Question

我正在尝试渲染两个不同的表，但是只用一个AJAX调用。

如何使用相同的JSON数据源初始化两个不同的表？这两个表的唯一不同之处在于，我通过JSON中的特定键来过滤行。

当前我的代码如下。

var t = $('#adminKeysTable').DataTable( {
            "ajax": {
                "url": getKeysById,
                "dataSrc": function(json) {
                    var rows = [];
                    for (var i=0;i<json.keys.length;i++) {
                        if (json.keys[i].privileges == '32') 
                            rows.push(json.keys[i]);
                            allAdminKeys.push(json.keys[i].key);
                    }
                    return rows;
                }
            },
            "columns": [
                { "data": null },
                { "data": "name" },
                { "data": "key" },
                { "data": null }
            ]               
        } );

var tt = $('#apiAccessKeyTable').DataTable( {
            "ajax": {
                "url": getKeysById,
                "dataSrc": function(json) {
                    var rows = [];
                    for (var i=0;i<json.keys.length;i++) {
                        if (json.keys[i].privileges != '32') 
                            rows.push(json.keys[i]);
                    }
                    return rows;
                }
            },
            "columns": [
                { "data": null }, 
                { "data": "name", "className": "editable" }, 
                { "data": "key" }, 
                { "data": "externalUser", "className": "editable" }, 
                { "data": "privilegesArray", "className": "edit-privileges" },
                { "data": null }, 
                { "data": null } 
            ]
        } );

我当前代码的问题是，在第一个表完成加载后，加载第二个表通常会花费更长的时间。我以为那是因为我要同时进行两个AJAX通话？

我是AJAX的新手。因此，不确定如何仅对GET请求进行一次调用，并使用该JSON数据初始化两个单独的表。

感谢有人可以指导我。谢谢。

Answer 1

考虑不同因素，一旦获得数据，就可以将数据存储到不同的变量中，然后将数据视图传递给同样的对象。

var tt = $('#apiAccessKeyTable').DataTable( {
        "ajax": {
            "url": getKeysById,
            "dataSrc": function(json) {
                var t1rows = [];
                var t2rows = [];
                for (var i=0;i<json.keys.length;i++) {
                    if (json.keys[i].privileges != '32') {
                        t1rows.push(json.keys[i]); // Changed section
                    } else {
                        t2rows.push(json.keys[i]); // changed section
                    }

                }
                return rows;
            }
        },
        "columns": [
            { "data": null }, 
            { "data": "name", "className": "editable" }, 
            { "data": "key" }, 
            { "data": "externalUser", "className": "editable" }, 
            { "data": "privilegesArray", "className": "edit-privileges" },
            { "data": null }, 
            { "data": null } 
        ]
    } );

希望这会有所帮助！

Answer 2

我真的没有使用jQuery中的DataTable方法的经验。但是您可以执行以下操作：

$.ajax({
     url: getKeysById,
     success: function(json) {
         var t1rows = [];
         var t2rows = [];

         for (var i = 0; i < json.keys.length; i++) {
             if (json.keys[i].privileges != '32') {
                 t1rows.push(json.keys[i]); // Changed section
             }
             else {
                 t2rows.push(json.keys[i]); // changed section
             }
          }
          callback(t1rows, t2rows);
      }
});


var callback = function(data1, data2){
    $('#apiAccessKeyTable').DataTable({columns: []}); //add your data here: t1rows
    $('#adminKeysTable').DataTable({columns: []}); //add your data here: t2rows;
}

您首先执行一个独立的ajax调用，并在成功处理程序中呈现表。

您应该查看如何从该jQuery数据表中添加不是来自内部ajax请求的数据。我假设这会相对容易。像这样：

var callback = function(data1, data2){
$('#adminKeysTable').DataTable({
    dataSrc: data1,
    columns: []
});

$('#apiAccessKeyTable').DataTable({
    dataSrc: data2,
    columns: []
});
}

？

这甚至可以进一步简化，但是为了与您的代码相对相似，我将其保留不变。

Answer 3

您执行1个ajax调用，根据条件拆分数据并使用各自的JSON加载Datatable

类似这样的东西

var t1rows = [];
var t2rows = [];


function splitData(){

    $.ajax({
         url: getKeysById,
         success: function(json) {
         for (var i=0; i < json.keys.length ; i++) {
             if (json.keys[i].privileges != '32') {
                 t1rows.push(json.keys[i]); // Changed section
             }
             else {
                 t2rows.push(json.keys[i]); // changed section
             }
          }
          // load Datatables
        loadDatatable1();
        loadDatatable2();


          }
    });
}


function loadDatatable1(){

    $('#apiAccessKeyTable').dataTable({
        data: t1rows,
        columns: [
            { data: 'userID' },
            { data: 'userName' }
        ]
    });
}


function loadDatatable2(){

    $('#adminKeysTable').dataTable({
        data: t2rows,
        columns: [
            { data: 'userID' },
            { data: 'userName' }
        ]
        });
}

Answer 4

我已经修改了Datatable - Insert JSON data to the table的答案中的一个小提琴

您可以在这种小提琴中尝试类似的东西

https://jsfiddle.net/gx3ktawn/311/

HTML

<button id="getResults">Get Results</button>
<table id="my_logs"></table>
<table id="my_logs2"></table>

脚本

var myTable = $('#my_logs').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "data": [],
    "columns": [{
        "title": "Date",
        "data": "log_time"
    }, {
        "title": "User Name",
        "data": "user_name"

    }, {
        "title": "Class",
        "data": "class_name"

    }, {
        "title": "Function",
        "data": "class_function"

    }, {
        "title": "Action",
        "data": "action_title"

    }, {
        "title": "Description",
        "data": "action_description"

    }]
});
var myTable2 = $('#my_logs2').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "data": [],
    "columns": [{
        "title": "Date",
        "data": "log_time"
    },  {
        "title": "Class",
        "data": "class_name"

    }, {
        "title": "Function",
        "data": "class_function"

    }, {
        "title": "Description",
        "data": "action_description"

    }]
});

$(document).ready(function() {
    $("#getResults").click(function() {
        $.ajax({
            url: 'https://api.myjson.com/bins/ml2k2',
            success: function(logs) {
                myTable.clear();
                $.each(logs, function(index, value) {
                    myTable.row.add(value);
                });
                myTable.draw();
        myTable2.clear();
                $.each(logs, function(index, value) {
                    myTable2.row.add(value);
                });
                myTable2.draw();
            },
            error: function(jqXHR, textStatus, ex) {
                alert(textStatus + "," + ex + "," + jqXHR.responseText);
            }
        });
    });
});

通过一个AJAX调用初始化两个不同的表

4 个答案: