How to use one ajax datasource with multiple JQuery Datatables

There are two datatables on the same page and both have different columns.

Is there a way to use the same ajax datasource to draw multiple tables? I am trying avoid multiple calls to database.

 $('#gvData').DataTable({
            "processing": true,
            //"serverSide": true,
            "bPaginate": false,
            "bFilter": false,
            "bInfo": false,
            "scrollY": "300px",
            "scrollCollapse": true,
            "bDestroy": true,

            "ajax": {
                "dataType": 'json',
                "contentType": "application/json",
                "type": "POST",
                "url": "myform.aspx/GetData",
                "data": function (d) {
                    return "{ regDate: '" + regDate + "', cmdName: '" + command + "'}";

                },
                "dataSrc": function (json) {
                    adata = json;
                    return $.parseJSON(json);
                }
            },

            "columns": [{
                "data": "Source_Name"
            },
              {
                  "data": "Record_Count",
                  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                      $(nTd).html("<a href='" + oData.Record_Count + "' id= '" + iRow + "' style='color: black; text-decoration: none;' onclick='return GetSelectedRow(this, 'completed');' >" + oData.Record_Count + "</a>");
                  }
              }
            ]
        });

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Since DataTables already uses jQuery, you can use jQuery’s when() to fetch the data once and then re-use it.

In my example, my JSON looks like this:

{
  "employees": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architext",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421",
      "toggle": "on"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "1278",
      "toggle": "off"
    }
  ]
}

I have two tables with different columns:

    <table id="demo_one" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

    <br><br>

    <table id="demo_two" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
    </table>

I use an ajax function to fetch the data, and I call it as shown below:

var dataSet = [];
 
function ajax() {
  return $.ajax({
    url: "http://localhost:7000/employees",
    success : function(data) {
      dataSet = data.employees;
    },
    type: "POST"
  });
}

$(document).ready(function() {

  $.when(ajax()).done(function() {

    $('#demo_one').DataTable( {
      "data": dataSet,
      columns: [
        { data: "name" },
        { data: "position" },
        { data: "start_date" },
        { data: "salary" }
      ]
    } );

  $('#demo_two').DataTable( {
      "data": dataSet,
      columns: [
        { data: "name" },
        { data: "position" },
        { data: "office" },
        { data: "extn" }
      ]
    } );

  });

} );

Now, each of my tables is populated from the JavaScript source (var dataSet), which in turn was populated from the ajax call.

The result looks like this:

How to use one ajax datasource with multiple JQuery Datatables


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x