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

Posted 2023-05-07

【中文标题】如何将一个 ajax 数据源与多个 JQuery 数据表一起使用

【英文标题】：How to use one ajax datasource with multiple JQuery Datatables

【发布时间】：2021-04-06 06:39:22

【问题描述】：

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

有没有办法使用同一个 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>");
                  
              
            ]
        );

【参考方案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 调用填充的。

结果如下：