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>");
                  }
              }
            ]
        });

回答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:

来源：https://stackoverflow.com/questions/65495442/how-to-use-one-ajax-datasource-with-multiple-jquery-datatables

标签

jquery

ASP.NET

ajax

datatables