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

问题描述

同一页上有两个数据表，并且它们的列都不同.

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

有没有一种方法可以使用相同的ajax数据源绘制多个表?我正在尝试避免多次调用数据库.

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

推荐答案

由于DataTables已经使用jQuery，因此可以使用jQuery的 when() 一次获取数据，然后重新使用.

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

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

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>

我使用ajax函数来获取数据，并按如下所示对其进行调用:

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

  });

} );

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

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

结果如下:

这篇关于如何将一个ajax数据源与多个JQuery数据表一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！