首页 > 代码库 > datatable1.9 与datatable1.10取数据区别
datatable1.9 与datatable1.10取数据区别
本人也是摸索datatable1.10的新用法,在下面的代码中如有错误,欢迎提出。。
1.10与1.9区别官方网址说明:http://www.datatables.net/upgrade/1.10
我们之间看代码。先看1.9的写法:
$(document).ready(function() {
var table, _qData;
table = $(‘#example‘).dataTable({
aoColumns : _tableCols,
fnCreatedRow : xxxxx, //函数名
});
loadList();
});
// table: 表格对象
function loadList() {
$.ajax({
url : ‘/queryxxxx‘,
data : _qData,
dataType : ‘json‘,
success : function(data) {
table.fnClearTable();
table.fnAddData(data.records);
}
});
}
var _tableCols = [ {
mData : null,
bSortable : false,
sClass : "center",
sWidth : "30",
mRender :xxxx //函数名
}, {
mData : ‘groupCode‘,
sWidth : "120",
bSortable : true
}, {
mDataProp : "uuid",
sClass : "center",
bSortable : false,
sWidth : "124",
mRender : xxxx //函数名
} ];
现在看1.10的写法
$(document).ready(function() {
var table, _qData;
table = $(‘#example‘).dataTable({
"columns" : _tableCols,
"createdRow" : xxxxx, //函数名
});
loadList();
});
// table: 表格对象
function loadList() {
$.ajax({
url : ‘/queryxxxx‘,
data : _qData,
dataType : ‘json‘,
success : function(data) {
table.clear().draw();
table.rows.add(data.records).draw();
}
});
}
var _tableCols = [ {
data: null,
orderable: false,
className : "center",
width : "30",
render :xxxx //函数名
}, {
data : ‘groupCode‘,
width : "120",
orderable: true
}, {
data: "uuid",
className : "center",
orderable: false,
width : "124",
render : xxxx //函数名
} ];
我们在看一种1.10的写法。此时我们将Ajax放在datatable里面
var table= $(‘#example‘).dataTable({
"columns" : _tableCols, //_tableCols 写法同上
createdRow : xxxxx, //该函数用于行事件
"ajax" : {
"url" : "xxxxx",
"type" : "POST",
"dataSrc" : function(json) {
return json.records;
},
"error" : function() {
var data = http://www.mamicode.com/{
"data" : []
};
return data;
}
}, });
该种方式也能给datatable赋值。。。。
用mDataProp绑定字段 跟mdata 一样的用法,这两个都是datatable 1.9及以前用法。1.10之后统一用data了。
1.9 -----》 1.10
mdata mdataprop -->data
bSortable -->orderable
sClass -->className
swidth -->width
mRender -->render
fnCreatedRow -->createdRow
datatables warning table id requested unknown parameter from the data source for row
(说明:The reason for these warnings are normally due to null values in the data source. The key to suppressing this warning is through the use of the sDefaultContent property.)
下面代码也能稍微解决:
1. "aoColumnDefs" : [ {
sDefaultContent : ‘‘,
aTargets : [ ‘_all‘ ]
} ],
2.
add $.fn.dataTableExt.sErrMode = ‘throw‘
in the page where the plugin is used
搜索 datatable 1.10 ajax
datatable1.9 与datatable1.10取数据区别