本文介绍了一个使用Python+Django+ACE框架的大数据项目中，如何解决前端使用jQuery DataTables插件动态加载数据的问题。包括了从后端获取数据、前端构造表格、动态更新表格数据等多个环节。
做一个大数据的项目，web页面数据展示用的ACE，所以有些页面想用到Jquery table来做，
整个项目用Python+Django+ACE来做web前后端
模板本身的演示效果如下，个人感觉还是相当美观，而且排序和导出功能也非常清晰：
开始写通常主要技术点有以下几点
- 后端整理数据
- 前端Ajax请求数据
- 构造table
前两项都没有问题，到了最终页面套用插件展示的时候，遇到了很多问题，由于模板本身并没有
提供如何加载数据，填写字段这两个最基本的写法，而是将table标签一开始就写好在页面上，所以
一开始如何将Ajax返回的json数组填充到表格插件中，成了一个最大的问题。
页面通过一个input，接收输入的索引号，然后回车，查询出该索引号对应的数据
$("#index").keydown(function (event) {
if (event.keyCode == 13) {
/*判断输入的so号是否正确*/
var sotext = $("#sonumber").val().toUpperCase();
var pattern = /^[sS][oO]\d{5}$/;
if (pattern.test(sotext) == false) {
/*提示输入错误*/
bootbox.confirm("输入的SO号错误！", function () {
});
}
else {
/*根据so号进行查询,调用原生AJAX返回json数据*/
var xmlhttp;
function loadXMLDoc(url) {
xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp != null) {
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = state_Change;
} else {
alert("your browser doesn't support XMLHTTP")
}
}
function state_Change() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var sbdata = xmlhttp.responseText;
var xx = JSON.parse(sbdata);
}
}
var urlstr = "/api/servicebom/SBOM/" + sotext +"?timestamp="+new Date().getTime();
loadXMLDoc(urlstr);
}
}
})
通过在浏览器中调试，已知接收到了正确的json数据
但是接下来的问题就开始一个一个坑出现了，模板本身并没有数据加载和字段添加的写法
下面语句是模板本身的够建dataTable的语句
jQuery(function($) {
//initiate dataTables plugin
var myTable =
$('#dynamic-table')
//.wrap("<div class='dataTables_borderWrap' />") //if you are applying horizontal scrolling (sScrollX)
.DataTable( {
bAutoWidth: false,
"aoColumns": [
{ "bSortable": false },
null, null,null, null, null,
{ "bSortable": false }
],
"aaSorting": [],
//"bProcessing": true,
//"bServerSide": true,
//"sAjaxSource": "http://127.0.0.1/table.php" ,
//,
//"sScrollY": "200px",
//"bPaginate": false,
//"sScrollX": "100%",
//"sScrollXInner": "120%",
//"bScrollCollapse": true,
//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
//you may want to wrap the table inside a "div.dataTables_borderWrap" element
//"iDisplayLength": 50
select: {
style: 'multi'
}
} );
从中无法得知数据是如何加载到该table插件的，于是上网开始查找jquery table的数据加载写法，
用到了以下几种，都没有解决问题：
data:’本地json文件’ //jquery table 官网示例 可以正常加载，但是不符合我的需求
ajax:’本地json文件’ //jquery table 官网示例 可以正常加载，但是不符合我的需求
ajax: url //数据可以获取，但是却不能正常加载到table插件，提示TypeError
开始查找服务端返回数据加载的例子：
(可能是由于jquery table版本的问题，网上各种写法混杂，试过不少写法，最后在官网找到了对于
我这个情况的可用写法)
"ajax": {
"url": "/api/servicebom/SBOM/indexnumber",
"dataSrc": function (json) {
return json;
}
}
再次说明了遇到问题先查官网文档的重用性
现在可以table插件本身可以接收后端的json数据并展现了，但是页面是需要一个input来提供索引号的
所以如何在table构造里面修改url的地址，从而来接收不同索引号的值，这个又成了一个问题。
这个问题似乎无法解决，因为这种写法是在dataTable构造的时候就写好的。。。
var myTable = $('#dynamic-table')
.DataTable({
"ajax": {
"url": "/api/servicebom/SBOM/indexnumber",
"dataSrc": function (json) {
return json;
}
},
所以想了很久也不知道如何来重写url的值，因此我最终还是决定从外部把json数据传到构造器中
修改以下json请求的回调函数state_Change和dataTable构造器的数据加载方式
function state_Change() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var sbdata = xmlhttp.responseText;
var xx = JSON.parse(sbdata);
loadtable(xx);
}
}
function loadtable(grid_data){
var myTable = $('#dynamic-table')
.DataTable({
data:grid_data
}
现在重复加载后端不同json数据的问题解决了，但是又有了一个新的问题，在第二次
加载的时候，table插件提示Warning:Cannot reinitialise DataTable
jquery table 的错误提示还是很准确很有帮助的，并且还提示了问题的解决页面
所以到了官网的该页面看了问题描述，得知是table重复加载的问题，所以要把第一次构造的
dataTable清除，一开始使用了retrieve关键字
retrieve:true
重写加载不在报错了，但是导出的按钮在不断增加，因为构造器里的button.append又运行了
一次，所以这个关键字无法彻底解决问题，于是用destroy来将表格销毁再重新构造
再次修改Ajax回调函数 ，代码如下：
function state_Change() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var sbdata = xmlhttp.responseText;
var xx = JSON.parse(sbdata);
if(myTable==null){
tableload(xx);
}else{
myTable.destroy();
tableload(xx);
}
}
}
到目前为止，完整的实现了页面的展现逻辑
最终页面效果如下：
列字段的构造写法：
"columns":[
{
orderable: false,
width: "30px",
data: null,
render: function (data, type, row, meta) {
return '<td class="center"><label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label></td>';
}
},
{data: "bomid"},
{data: "configration"},
{data: "bomso"},
{data: "bomoption"},
{data: "productno"},
{data: "idcode"},
{data: "levelop"},
{data: "qadprice"},
{data: "qty"},
{data: "extended"},
{
data: "active",
render: function (data, type, row, meta) {
if (data == 1) {
return '<span class="label label-sm label-success">是</span>';
} else {
return '<span class="label label-sm label-warning">否</span>';
}
}
},
{
orderable: false,
data: null,
render: function (data, type, row, meta) {
return '<td><div class="hidden-sm hidden-xs action-buttons"><a class="blue" href="#"><i class="ace-icon fa fa-search-plus bigger-130"></i></a><a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130"></i></a><a class="red" href="#"><i class="ace-icon fa fa-trash-o bigger-130"></i></a></div></td>';
}
}
],
按钮点击事件的接收：
$('#dynamic-table').on('click', 'td div a[class=blue]', function () {
var item = $(this).closest('tr');
var data = myTable.row(item).data();
var sp = item.find("span").last();
if (sp.text() == "是") {
data['active'] = 0;
sp.text("否");
sp.removeClass("label-success");
sp.toggleClass("label-warning");
} else {
data['active'] = 1;
sp.text("是");
sp.removeClass("label-warning");
sp.toggleClass("label-success");
}
});
因为这个页面用户只是会修改数据行active字段的状态（1,0），并不会修改其他字段的值，所以没有
再继续研究下去，但是后续基本上也就是dom操作了。
总结一下：
1、该模板没有完整的数据加载演示的例子，所以不如jqGrid好用，不用那么费力的调试
2、有问题还是多看官网，网上大家的情况不太一样，所以各种写法混杂
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
