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

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

jquery asp.net ajax datatables

如何将一个ajax数据源与多个JQuery数据表一起使用,jquery,asp.net,ajax,datatables,Jquery,Asp.net,Ajax,Datatables,同一页上有两个DataTable，它们都有不同的列有没有一种方法可以使用同一个ajax数据源来绘制多个表？我试图避免多次调用数据库 $('#gvData').DataTable({ "processing": true, //"serverSide": true, "bPaginate": false, "bFilter&quo

同一页上有两个DataTable，它们都有不同的列

有没有一种方法可以使用同一个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>");
                  }
              }
            ]
        });

$（'#gvData'）.DataTable({
“处理”：对，
//“服务器端”：正确，
“bPaginate”：错误，
“bFilter”：错误，
“bInfo”：假，
“滚动”：“300px”，
“卷轴崩溃”：没错，
是的，
“ajax”：{
“数据类型”：“json”，
“contentType”：“application/json”，
“类型”：“职位”，
“url”：“myform.aspx/GetData”，
“数据”：功能（d）{
返回“{regDate:”+regDate+”，cmdName:“+command+”}”；
},
“dataSrc”：函数（json）{
adata=json；
返回$.parseJSON（json）；
}
},
“栏目”：[{
“数据”：“源名称”
},
{
“数据”：“记录计数”，
“fnCreatedCell”：功能（nTd、sData、oData、iRow、iCol）{
$（nTd）.html（“”）；
}
}
]
});

由于DataTables已经使用jQuery，因此可以使用jQuery获取数据一次，然后重新使用它

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

{
“雇员”：[
{
“id”：“1”，
“名字”：“老虎尼克松”，
“位置”：“系统归档文本”，
“工资”：“$320800”，
“开始日期”：“2011/04/25”，
“办公室”：“爱丁堡”，
“extn”：“5421”，
“切换”：“打开”
},
{
“id”：“2”，
“姓名”：“Garrett Winters”，
“职位”：“会计”，
“工资”：“$170750”，
“开始日期”：“2011/07/25”，
“办公室”：“东京”，
“extn”：“1278”，
“切换”：“关闭”
}
]
}

我有两个不同列的表：


名称
位置
开始日期
薪水



名称
位置
办公室
Extn。

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

var数据集=[]；
函数ajax（）{
返回$.ajax({
url:“http://localhost:7000/employees",
成功：功能（数据）{
数据集=data.employees；
},
类型：“职位”
});
}
$（文档）.ready（函数（）{
$.when（ajax（））.done（function（）函数）{
$（'demo_one'）。数据表（{
“数据”：数据集，
栏目：[
{数据：“名称”}，
{数据：“位置”}，
{数据：“开始日期”}，
{数据：“工资”}
]
} );
$（'demo_two'）。数据表（{
“数据”：数据集，
栏目：[
{数据：“名称”}，
{数据：“位置”}，
{数据：“办公室”}，
{数据：“extn”}
]
} );
});
} );

现在，我的每个表都是从JavaScript源代码（

var-dataSet

）填充的，而JavaScript源代码又是从ajax调用填充的

结果如下所示：

由于DataTables已经使用jQuery，您可以使用jQuery获取数据一次，然后重新使用它