将 AJAX 检索到的 JSON 推送到数据表中

Push AJAX retrieved JSON into Datatables

本文关键字:数据表 AJAX 检索 JSON      更新时间:2023-09-26

我正在使用数据表插件,它对我来说工作正常。但是,当我知道我可以进行一次 AJAX 调用并将结果存储在一个变量中并让每个表函数将该变量用于其数据时,我正在进行多次调用来填充多个表,但我无法让它工作。

我正在使用类似的东西来获取我需要的数据。

var all_data;
$.ajax({
        async   : false,
        url: 'all_data.php',
        type: 'GET',     
        success: function(data) {
        all_data = data;
         console.log(all_data);
 }
  })

这个想法是将all_data变量传递到我的表函数中(我在这个页面上有几个),而无需进行多次调用。执行以下操作将返回一列带有字母"a"的列,这是不正确的。返回的数据是 JSON 编码的。我使用了下面的代码,但将 AJAX 函数作为表函数的一部分:

$("#my_table").DataTable({
      "data":all_data
       ,
      "paging":        true,
      "sDom": '<"top">t<"bottom"><"clear">',
      "pageLength": 50,
      "order": [[ 4, "desc" ]],
      "aoColumns": [
      { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
      { "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
      { "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2",  "sTitle": "Database","visible":false},
      { "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
      { "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
      ],
      "columns": [
      { "searchable": true },
      { "searchable": false },
      { "searchable": false },
      { "searchable": false },
      { "searchable": false },
      ],
      "search": {
      "search": "gen"
      },
      "columns": [
      { "width": "20%" },
      null,
      null,
      null,
      { "width": "80%" },
      ],
      "initComplete": function(settings, json) {
        colorIndex();}
      });
});

我在这里做错了什么?我怀疑我必须以某种方式准备all_data,但我不确定那可能是什么。

编辑:如果我控制台.log返回的数据,这就是我得到的(为简洁起见被切断):

 Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
 data: Array[484]
    [0 … 99]
     0: Array[5]
          0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5

你的代码看起来不错,你唯一需要做的就是将数据表分配给一个变量,然后在ajax中解析清除,添加数据并绘制表。

var all_data;
$.ajax({
        async   : false,
        url: 'all_data.php',
        type: 'GET',     
        success: function(data) {
        all_data = data;
        console.log(all_data);
        table.clear().row.add(all_data).draw(); //clear, add data and draw
 }
  });

// Assign your datatable to a variable
var table = $("#my_table").DataTable({
      "data":all_data
       ,
      "paging":        true,
      "sDom": '<"top">t<"bottom"><"clear">',
      "pageLength": 50,
      "order": [[ 4, "desc" ]],
      "aoColumns": [
      { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
      { "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
      { "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2",  "sTitle": "Database","visible":false},
      { "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
      { "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
      ],
      "columns": [
      { "searchable": true },
      { "searchable": false },
      { "searchable": false },
      { "searchable": false },
      { "searchable": false },
      ],
      "search": {
      "search": "gen"
      },
      "columns": [
      { "width": "20%" },
      null,
      null,
      null,
      { "width": "80%" },
      ],
      "initComplete": function(settings, json) {
        colorIndex();}
      });
});