将 AJAX 检索到的 JSON 推送到数据表中
Push AJAX retrieved JSON into Datatables
我正在使用数据表插件,它对我来说工作正常。但是,当我知道我可以进行一次 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();}
});
});
相关文章:
- 如何在数据表中设置从Ajax响应选中的复选框
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- 数据表ajax从新的源重新加载
- 数据表 AJAX 筛选器重新加载数据
- 为什么不允许在jquery数据表服务器端处理ajax中使用成功
- 如何在数据表的命令链接中使用 ajax 禁用表单字段
- 将数据表.js样式应用于 AJAX 加载的表
- 表单提交中的数据与Ajax中的数据
- Ajax数据表单序列化防止双重提交
- 将 AJAX 检索到的 JSON 推送到数据表中
- 分页如何正确生成数据表(ajax,服务器端)
- 使用 ajax 从 mysql 填充 jQuery 数据表
- 如何在数据表 Ajax 调用后加载远程模式
- 具有重复jQuery数据表AJAX调用的内存管理
- 数据表Ajax搜索
- jQuery数据表ajax回调
- 在数据表ajax调用成功时调用函数
- 数据表ajax更改结果索引
- 如何从JQuery数据表AJAX调用Spring控制器函数
- 数据表ajax post用户选择的参数和重新加载表数据