jQuery-DataTabls使用

来源：互联网发布：js 正则提取字符串编辑：程序博客网时间：2024/06/10 18:01

因为要做管理端，产品又要求使用这个框架，无奈，放弃了那个比较丑的easyUI，可能是我很久没做管理端了，所以只会一个easyUI。

需要了解这个框架的点击这个链接 http://datatables.club/ 好了，不闲扯了。

datatables/1.10.0/jquery.dataTables.min.js 我使用的是这个版本的，所以代码也是以这个版本为标准。

html：

<table class="table table-border table-bordered table-hover table-bg table-sort" id="logtable1">
<thead>
<tr class="text-c">
<th><input type="checkbox" name=""></th>
<th>产品标题</th>
<th>额度</th>
<th>利率</th>
<th>说明介绍</th>
<th>关联产品名</th>
<th>排序</th>
<th>文案与说明</th>
<th>关联产品</th>
<th>状态</th>
</tr>
</thead>
<tbody id="test1 mod">

</tbody>
</table>

js：

var table = null;
$(function(){
table = $('.table-sort').dataTable({

"bAutoWidth":true,
"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"sEmptyTable":"没有数据",
"bFilter": false, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"sServerMethod": "POST",
"bServerSide": true,//这个用来指明是通过服务端来取数据

"fnServerParams": function(aoData) {

//你要传递的参数这里可以把你需要的参数取出，服务器端只接受你需要的参数（当时赶时间，并没有这样做）
aoData.push({
"name": "bNeedPaging",
"value": "true"
});
},
"fnServerData" : function(sSource, aoData, fnCallback) {

$.ajax({
"type" : 'post',
"url" : sSource,
"dataType" : "json",
"data" : {
aoData : JSON.stringify(aoData), //后端接收得参数
},
"success" : function(resp) {
fnCallback(resp);
}
});

},
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"bServerSide" : true,
"aoColumnDefs" : [ {
sDefaultContent : '',
aTargets : [ '_all' ],
"sClass": "text-c"
} ],

"aoColumns" : [ { //第0列头的值
"bVisible" : true,
"mData" : "id",
"sClass": "text-c",
"aTargets" : [ 0 ],
"render" : function(data, type ,full){
return '<input type="checkbox" value="' + data + '" name="id">';
}
}, {
"bVisible" : true,
"mData" : "loanName",
"sClass": "text-c",
"aTargets" : [ 1 ]
}, {
"bVisible" : true,
"mData" : "loanLimitUnit",
"sClass": "text-c",
"aTargets" : [ 2 ],
"render" : function(data, type ,full){
return full['startLoanLimit'] + "~" + full['endLoanLimit'] + data;
}
}, {
"bVisible" : true,
"mData" : "interestRate",
"sClass": "text-c",
"aTargets" : [ 3 ],
"render" : function(data, type ,full){
return data + full['interestRateUnit'];
}
}, {
"bVisible" : true,
"mData" : "loanDescribe",
"sClass": "text-c",
"aTargets" : [ 4 ],
}, {
"bVisible": true,
"mData": "loanName",
"sClass": "text-c"
}, {
"bVisible": true,
"mData": "loanSort",
"sClass": "text-c",
"aTargets": [6],
}, {
"bVisible" : true,
"mData" : "id",
"sClass": "text-c",
"aTargets" : [ 7 ]
}, {
"bVisible" : true,
"mData" : "id",
"sClass": "text-c",
"aTargets" : [ 8 ],
"render" : function(data, type, full) {
return "<a>点击</a>";
}
},
{
"bVisible" : true,
"mData" : "status",
"sClass": "text-c",
"aTargets" : [ 7 ]
}
}
] ,
"aLengthMenu": [[10, 20, 30, 40, 50, 60, 70, 80, 90, 100,1000], [10, 20, 30, 40, 50, 60, 70, 80, 90,1000]],
"sAjaxSource": "替换成功请求数据的链接"
});
});

然后比较重要的一个方法 table.fnDraw(); 此方法会刷新当前列表。这样就可以做到点击查询功能

现在说下后端如何处理，我是用的是springMVC

如果你没有在前端对参数处理，接收的话 aoData 然后根据它得到分页参数。

做分页需要的条件无非就是 pageNum,pageSize和查询条件

dataTables 传递到后端的key可不是我们常用的那些名词，是 iDisplayStart iDisplayLength

例如：每次显示10条,第2页它们就是 iDisplayStart = 10 , iDisplayLength = 10

每次显示10条,第3页它们就是 iDisplayStart =20 , iDisplayLength = 10

说完接收了，现在说下返回什么。返回的数据也是特定格式的

返回是一个json格式的数据：

paramMap.put("iTotalRecords",page.getTotalElements()); //总条数

paramMap.put("iTotalDisplayRecords",page.getTotalElements()); //总条数

paramMap.put("sEcho",sEcho); // 请求次数

paramMap.put("aaData",page.getContent()); //list 数据

如有错误，请指正。

0 0