javascript - jQuery - HTML Table to DataTables

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=".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>

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.

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./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>

Share Improve this question edited Aug 27, 2020 at 8:16 kewlashu 1,10911 silver badges19 bronze badges asked Jul 30, 2020 at 17:32 BeerusDev 1,5193 gold badges14 silver badges34 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4 +25

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();
});

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

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.

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./https://jsonkeeper./b/9S5X';
const TEST_URL2 = 'https://cors-anywhere.herokuapp./https://jsonkeeper./b/R0CC';
const TEST_URL3 = 'https://cors-anywhere.herokuapp./https://jsonkeeper./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables/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".

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery - HTML Table to DataTables - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)