jQuery-DataTabls使用-优快云博客

本文链接：https://blog.youkuaiyun.com/u014148255/article/details/52171499

本文介绍了如何在管理端应用中使用jQuery DataTables框架，包括设置表格、配置选项、处理分页和后端交互。重点讲解了fnServerParams和fnServerData方法，以及后端Spring MVC处理分页参数的方式，最后提到了刷新表格的关键方法table.fnDraw()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为要做管理端，产品又要求使用这个框架，无奈，放弃了那个比较丑的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": "替换成功请求数据的链接"
});
});