jquery - 如何将一个 ajax 数据源与多个 JQuery 数据表一起使用

Question

同一页面上有两个数据表，并且都有不同的列。

有没有办法使用同一个ajax数据源绘制多个表格？我正在尝试避免多次调用数据库。

 $('#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>");
                  }
              }
            ]
        });

Answer 1

由于 DataTables 已经使用了 jQuery，您可以使用 jQuery 的 when()一次获取数据然后重新使用它。

在我的示例中，我的 JSON 如下所示:

{
  "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"
    }
  ]
}

我有两个包含不同列的表:

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

我使用 ajax 函数来获取数据，我调用它如下所示:

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

  });

} );

现在，我的每个表都是从 JavaScript 源 (var dataSet) 填充的，而 JavaScript 源又是从 ajax 调用填充的。

结果是这样的: