Change Content - Javascript

Change html element content using pure javascript author(s): Deepu Mohan Puthrote (WarFox)

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.1/datatables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.1/datatables.min.js"></script>

<div id="tableContainer">
  <table id="data_table" class="table table-striped table-hover display allow-overflow" style="width:100%">
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Title
        </th>
        <th>
          Location
        </th>
        <th class="row-actions" data-orderable="false">
          <a href="#" class="text-danger delete-button d-none" title="Delete" data-action="delete"><i class="fs-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
              <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
            </svg>
          </i></a>
          Actions
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-rowId="1">
        <td>Mickey Mouse</td>
        <td>Ship Captain</td>
        <td>Detroit, MI</td>
        <td class="row-actions text-nowrap"></td>
      </tr>
      <tr data-rowId="2">
        <td>Goofy Dog</td>
        <td>Man's Friend</td>
        <td>Plattville, WI</td>
        <td...

JavaScript

$(document).ready(() => {

const tableId = 'data_table';
let actionAnchors = document.querySelectorAll('th.row-actions > a');

  const settings = {
    columns: [
      {
        data: "name"
      },
      {
        data: 'title'
      },
      {
        data: 'location'
      },
      {
        data: null,
        render: (data, type, row, settings) => {
          let html = '';
          actionAnchors.forEach((anchor) => {
            let newAnchor = anchor.cloneNode(true);
            const table = $(`#${tableId}`);
            const row = table.DataTable().row(settings.row);
            const tr = row.node();
            newAnchor.classList.remove('d-none');

            html += newAnchor.outerHTML;
          });
          if (html) {
            return html;
          }
        }
      }
    ],
    //sAjaxDataProp: '', // this is a MUST in order to be able to delay-load the data after the delete is performed
    drawCallback: (settings) => {
      $(`#${tableId}`).off('click', 'a[data-action="delete"]').on('click', 'a[data-action="delete"]', function (event) {
        event.preventDefault(); // Prevent the default link behavior

        const selectedTableRow = $(`#${tableId}`).DataTable().row($(this).closest('tr')).node();
        const selectedRows = $(`#${tableId}`).DataTable().row($(this).closest('tr')).data();
        const selectedRowsData = [selectedRows]; // Wrap it in an array
        
        const postDeleteData = `[{"name":"Mickey Mouse", "title": "Ship Captain", "location": "Detroit, MI"},{"name":"Goofy Dog", "title": "Man's Friend", "location": "Platteville, WI"}]`;
        const doDelete = (row) => {
          // calls the server API to delete the selected row
          // after delete succeeds a $(`#${tableId}`),DataTable().ajax.url('/ajaxSpecificApi/GetAll').load() is called to reload the table with the latest data
          // imagine the data that comes back from /ajaxSpecificApi/GetAll looks like "postDeleteData"
          // after this...