jQuery - HTML Table to DataTables

Question

Currently I have code that query's lists from three separate subsites and then populates that data that I am calling for into an html table.

I want to spice up the table just a bit, I was thinking something along the lines of a DataTable but that is too much work. What would be the easiest way to make this HTML table have a search tool/filter tool?

function loadData(source, url) {
  return fetch(url, {
      headers: {
        accept: "application/json; odata=verbose"
      }
    }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url); // Check for errors
      return r.json(); // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

window.addEventListener("load", function() {
  Promise.all([
      loadData("xDeliverables", "/_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
      loadData("yDeliverables", "/_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
      loadData("zDeliverables", "/_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
    ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2, r3);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Source</strong></td>" +
        "</tr></thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Program + "</td>";
        tableContent += "<td>" + objItems[i].To + "</td>";
        tableContent += "<td>" + objItems[i].Date + "</td>";
        tableContent += "<td>" + objItems[i].Approved + "</td>";
        tableContent += "<td>" + objItems[i].Notes + "</td>";
        tableContent += "<td>" + objItems[i].source + "</td>";
        tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

td {
  text-align: center;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="EmployeePanel">
  <table id='deliverablesTable' style="width: 100%;" border="1 px">
    <tr>
      <td>
        <div id="deliverables" style="width: 100%"></div>
      </td>
    </tr>
  </table>
</div>

Answer 1

Yes, the DataTables jQuery plugin would probably be your best solution. Their front page has the very basics covered: https://datatables.net

One thing to note is that their example assumes your table exists on page load, but yours is created by an ajax call. So you'd initialize it right after your tableContent append call.

Using all default options, you'd just need:

$("#deliverablesTable").DataTable();

Edit: It also looks like you might run into problems because of having two different tables with id='deliverablesTable'. You have one in your initial html, and then you insert another one inside of that during your javascript execution. Each id should be unique on the page, and you might not even want to be inserting one table nested into another in the first place.

Answer 2

Just a working example from your code:

function loadData(source, url) {
  return fetch(url) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url); // Check for errors
      return r.json(); // parse JSON
    })
    //.then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

const TEST_URL1 = 'https://cors-anywhere.herokuapp.com/https://jsonkeeper.com/b/9S5X';
const TEST_URL2 = 'https://cors-anywhere.herokuapp.com/https://jsonkeeper.com/b/R0CC';
const TEST_URL3 = 'https://cors-anywhere.herokuapp.com/https://jsonkeeper.com/b/4OF4';

window.addEventListener("load", function() {
  Promise.all([
      loadData("xDeliverables", TEST_URL1),
      loadData("yDeliverables", TEST_URL2),
      loadData("zDeliverables", TEST_URL3),
    ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2, r3);
      var tableContent =
        '<table id="deliverablesTableInner" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Source</strong></td>" +
        "</tr></thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Program + "</td>";
        tableContent += "<td>" + objItems[i].To + "</td>";
        tableContent += "<td>" + objItems[i].Date + "</td>";
        tableContent += "<td>" + objItems[i].Approved + "</td>";
        tableContent += "<td>" + objItems[i].Notes + "</td>";
        tableContent += "<td>" + objItems[i].source + "</td>";
        tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
      $('#deliverablesTableInner').DataTable();
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

//fetch(TEST_URL).then(r => console.log(r))

td {
  text-align: center;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<div id="EmployeePanel">
  <table id='deliverablesTable' style="width: 100%;" border="1 px">
    <tr>
      <td>
        <div id="deliverables" style="width: 100%"></div>
      </td>
    </tr>
  </table>
</div>

Note: better look in "fullscreen" mode. After clicking on "Run code snippet", press "Full page".

Answer 3

Yes, you can. I couldn't edit the code with respect to yours but here is something you maybe able to use.

var $rows = $('#table tr');
$('#search').keyup(function() {

var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

$rows.show().filter(function() {
    text = $(this).text().replace(/\s+/g, ' ');
    return !reg.test(text);
}).hide();
});