Инициализируйте две разные таблицы одним вызовом AJAX

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

Я изменил скрипту из ответа на этот Datatable - Вставить данные JSON в таблицу

Вы можете попробовать что-то вроде этой скрипки

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

Answer 2

У меня серьезно нет опыта использования этого DataTable метода из jQuery. Но вы могли бы сделать что-то вроде этого:

$.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 datatable, которые не пришли из внутреннего ajax-запроса. Я предполагаю, что это будет относительно легко. Что-то вроде:

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

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

Это может быть еще более упрощено, но ради того, чтобы быть относительно похожим на ваш код, я оставлю это как есть.

Answer 3

Вы делаете 1 ajax-вызов, разделяете данные на основе условия и загружаете Datatable с соответствующим JSON

Примерно так

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

Принимая во внимание другое, как только вы получите данные, вы можете сохранить данные в другой переменной и передать представление данных аналогичным образом.

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

Надеюсь, это поможет!