jQuery dataTable使用

来源：互联网发布：票乎为什么停止运营编辑：程序博客网时间：2024/06/06 00:19

1、首先是jsp页面：

2、在js里使用dataTable给 id="appointList"的表赋值

oTable= $('#appointList').dataTable({
"bProcessing": true,
"bServerSide": true,

"bFilter":true, //是否展示搜索功能，

"bRetrieve": true, //网上几乎所有人介绍这个参数都是复制其他人的，自己根本就不懂，在此讲下这个参数的含义：设为true，当你按照某一属性排序时，第一页／第二页都会按照这个属性排序，设为false，只有第一页会按照某一属性排序

"bFilter":false,
"sAjaxSource": url, //请求数据url
"aoColumns": [ //与jsp展示的列数一致，三列，不能多，也不能少，此处的取值和排序有一定关系，比如下面写的 "aaSorting": [[ 0, "desc" ]]，这个0就是此处的第一行
{"mData": "user.mobile"},
{"mData": "user.loginName"},
{"mData": "user.id"}
],
"aaSorting": [[ 0, "desc" ]], //默认排序，按照第一列的数据进行降序排序
"aoColumnDefs": [ //详细取值根据你后台传过来的对象决定，仅供参考，给页面对应的列赋值，共三列，没列都必须返回有值，“”也可以，否则页面老是会警告。
{
"aTargets": [0],
"mRender": function(data, type, row) {
if(row['manager'] !== null){
var mid = row['manager']['user']['id'];
return '<a href="user/' + mid + '#profile-wealthmanager">' + row['manager']['user']['name'] + '</a>';
}{
return "";
}

}
},
{
"aTargets": [1],
"mRender": function(data, type, row) {
return String.format('<a href="user/{0}">{1}</a>', row['user']['id'], row['user']['name']);
}
},
{
"aTargets": [2],
"mRender": function(data, type, row) {
if (row.request.target.realm == 'WEALTH_PRODUCT')
return String.format('<a href="wealthproduct/{0}">{1}</a>', row['target']['id'], row['target']['title']);
else if (row.request.target.realm == 'WEALTH_PRODUCT_RATE') {
return String.format('<a href="wealthproduct/{0}">{1}</a>', row['target']['product']['product']['id'], row['target']['product']['product']['title']);
}
}
}
],

"fnDrawCallback": function() {
// callback function: bind loading funciton for cell.
addClickHandler();
addConfirmFunc();
},
"fnPreDrawCallback": function(oSettings) {
},
"fnInitComplete": function() {
},
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
for (var i = 0; i < aoData.length; i++) {
if (aoData[i]['name'] == 'iSortCol_0') {
var cols = this.fnSettings().aoColumns;
var index = parseInt(aoData[i]['value']);
aoData.push({"name": "sColName", "value": cols[index]['mData']});
break;
}
}
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function() {
$(".modalBg").hide();
$.gritter.add({
title: '请求数据失败！',
text: '',
time: 3000,
fade_out_speed: 1000
});
}
});
},
"oLanguage": {
"sLengthMenu": "显示 _MENU_ 条记录",
"sSearch": "搜索:",
"sInfo": "显示第 _START_ - _END_ 条记录，共 _TOTAL_ 条",
"sInfoEmpty": "没有符合条件的记录",
"sZeroRecords": "没有符合条件的记录"
}

});

此斯功能异常强大，尔等若想出师，当全力调试、感觉，当尔等对每个属性都熟悉的时候，就可下山了。

1 0