bootstrap jquery table 使用中遇到的问题
作一个大数据的项目，web页面数据展现用的ACE，因此有些页面想用到Jquery table来作，
整个项目用Python+Django+ACE来作web先后端
模板自己的演示效果以下，我的感受仍是至关美观，并且排序和导出功能也很是清晰：
php
开始写一般主要技术点有如下几点
- 后端整理数据
- 前端Ajax请求数据
- 构造table前端
前两项都没有问题，到了最终页面套用插件展现的时候，遇到了不少问题，因为模板自己并无
提供如何加载数据，填写字段这两个最基本的写法，而是将table标签一开始就写好在页面上，因此
一开始如何将Ajax返回的json数组填充到表格插件中，成了一个最大的问题。jquery
页面经过一个input，接收输入的索引号，而后回车，查询出该索引号对应的数据web
$("#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的语句ajax
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插件，提示TypeErrorjson
开始查找服务端返回数据加载的例子：
(多是因为jquery table版本的问题，网上各类写法混杂，试过很多写法，最后在官网找到了对于
我这个状况的可用写法)后端
"ajax": {
"url": "/api/servicebom/SBOM/indexnumber",
"dataSrc": function (json) {
return json;
}
}
再次说明了遇到问题先查官网文档的重用性api
如今能够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操做了。
总结一下： 一、该模板没有完整的数据加载演示的例子，因此不如jqGrid好用，不用那么费力的调试 二、有问题仍是多看官网，网上你们的状况不太同样，因此各类写法混杂