datatable1.9 与datatable1.10取数据区别

Bertha 。 2022-08-13 06:00 116阅读 0赞

本人也是摸索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里面

用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' \]  
\} \],

add `$.fn.dataTableExt.sErrMode = 'throw'` in the page where the plugin is used

搜索 datatable 1.10 ajax