多个数据表可以从同一个 url 获取数据吗？

Question

是否可以在一个视图中有两个指向相同 Ajax url 的数据table？目前我不得不将其分成两个不同的调用，但我想通过一个调用获取我的数据。

我现在如何接听电话：

var table1;
var table2;

if (!$.fn.DataTable.fnIsDataTable('#table1')) {
     table1 = $("#table1").DataTable({
        "iDisplayLength": 4,
        "dom": "ftp",
        "ajax": {
            "url": "@Html.Raw(@Url.Action("Action1", "Controller", new { @id = @Model.ID}))",
            "dataSrc": "list1"
        },..});


if (!$.fn.DataTable.fnIsDataTable('#table2')) {
     table2 = $("#table2").DataTable({
        "iDisplayLength": 4,
        "dom": "ftp",
        "ajax": {
            "url": "@Html.Raw(@Url.Action("Action2", "Controller", new { @id = @Model.ID}))",
            "dataSrc": "list2"
        },..});

但我希望 ajax url 只是一个调用，select 来自返回数据的 dataSrc。

有点像这样（伪代码）：

var table1;
var table2;
var url = "@Html.Raw(@Url.Action("Action1", "Controller", new { @id = @Model.ID}))";

if (!$.fn.DataTable.fnIsDataTable('#table1')) {
     table1 = $("#table1").DataTable({
        "iDisplayLength": 4,
        "dom": "ftp",
        "ajax": {
            "url": url,
            "dataSrc": "list1"
        },..});


if (!$.fn.DataTable.fnIsDataTable('#table2')) {
     table2 = $("#table2").DataTable({
        "iDisplayLength": 4,
        "dom": "ftp",
        "ajax": {
            "url": url,
            "dataSrc": "list2"
        },..});

这可以吗？还有其他选择吗？

编辑：

对于像我这样喜欢 ajax 通话中的 "Trying to get data" 和 "No data found" 消息的人。

首先在 sEmptyTable 中设置一条默认消息

"oLanguage": {
    "sEmptyTable": "Looking for records, please wait."
},

并且在 getJson 调用中，操作此字符串以在 table returns 为空时显示新消息。

$.getJSON("@Html.Raw(@Url.Action("Action1", "Controller", new {id = @Model.ID}))", function (json) {
    if (json.list1.length > 0) { table1.rows.add(json.list1).draw(); }

    if (json.list2.length > 0) { table2.rows.add(json.list2).draw(); }

    if (json.list1.length == 0) {
            table1.context[0].oLanguage.sEmptyTable = "No records found.";
            table1.draw();
        }

    if (json.list2.length == 0) {
            table2.context[0].oLanguage.sEmptyTable = "No records found.";
            table2.draw();
        }
});

Answer 1

您可以对两个表使用相同的 URL，如下所示，请参阅 this jsFiddle 进行演示。

var table1 = $('#example1').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu'
});

var table2 = $('#example2').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu'
});

但是为了避免发出两次请求，更好的方法是一次获取数据，然后将其添加到相应的表中，如下所示，请参见this jsFiddle进行演示。

var table1 = $('#example1').DataTable();    
var table2 = $('#example2').DataTable();  

$.getJSON('https://api.myjson.com/bins/qgcu', function(json){
   table1.rows.add(json.data).draw();
   table2.rows.add(json.data).draw();        
});

多个数据表可以从同一个 url 获取数据吗？

Can multiple datatables get data from same url?

jquery

datatables