最近对datatables又做了一次深入的了解，这次主要datatables自定义样式及搜索框，废话不多说了，直接上代码。首先介绍下，代码是基于jquery、bootstrap，如果要直接使用代码，请先引入相关js、css。
第一部分：自定义搜索框
<div class="row" style="margin-top: 20px;">
<div class="col-lg-6" style="padding-left: 18px;">
<div class="input-group" style="width: 100%;margin:0 auto;">
<input type="text" id="assets" class="form-control" placeholder="请输入关键字搜索">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="search_button" onclick="doSearch();"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>第二部分：初始化datatables的配置
$.dataTablesSettings = {
"bPaginate" : true,
"bInfo": true,
"bSort": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,//每页显示的条数
"bLengthChange": false,//是否可以动态调整每页的显示条数
"bSearchable":false,
"bFilter":false,
"bProcessing": true,
"bServerSide":true,
"bAutoWidth": false,
"oSearch":{ "sSearch": "", "bRegex": false, "bSmart": true },
"oLanguage" : {
"sProcessing": "正在查询中......",
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "对不起，查询不到相关数据！",
"sEmptyTable" : "<strong>非常抱歉，没有查到您需要的信息 ",
"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
"sInfoEmpty" : "显示0到0条记录",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
},
"sServerMethod": "POST",
"sAjaxSource" : "<%=request.getContextPath()%>/trunkgroup/query",
"fnServerParams": function (aoData) {
//查询参数
},
"aoColumns": [
{ "mData": "id","className":"text-center","sClass":"hidden"},
{ "mData": "billId","className":"text-center","sClass":"hidden"},
{ "mData": "trunkGroupName","className":"text-center"},
{ "mData": "operatorInfo","className":"text-center"},
{ "mData": "lineType","className":"text-center"},
{ "mData": "capacity","className":"text-center"},
{ "mData": "billName","className":"text-center",
"render":function(data,type,obj){
if(data != null){
return "<a style='color: #333;' href='<%=request.getContextPath() %>/bill/get/"+obj.billId+"'>"+obj.billName+"</a>";
}
}
},
{ "mData":"application","className":"text-center"},
{ "mData":"status","className":"text-center"},
{ "mData": "purview","className":"text-center"},
{ "mData": "remark","className":"text-center"},
{ "mData": null,"className":"text-center",
"render": function(obj) {
return "<div class='row'>"+
"<div class='col-lg-5 text-center'>"+
"<button id='editButton' type='button' class='btn btn-xs operateButton'>编辑</button>"+
"</div>"+
"<div class='col-lg-5 text-center'>"+
"<button id='deleteButton' type='button' class='btn btn-xs operateButton'>删除</button>"+
"</div>"+
"</div>";
},
},
],
"fnDrawCallback": function () {//表格每次重绘回调函数
}
} dataTable = $("#trunkGroup_table").dataTable($.dataTablesSettings);还是稍微把html的代码贴下吧
<table id="trunkGroup_table" class="table table-bordered table-striped display" style="table-layout:fixed">
<thead>
<th style="width:7%;padding-left: 0px;padding-right: 0px;"class="text-center"nowrap="nowrap" >中继组</th>
<th style="width:7.5%;padding-left: 0px;padding-right: 0px;" class="text-center" nowrap="nowrap">运营商</th>
<th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center" nowrap="nowrap">线路类型</th>
<th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">容量</th>
<th style="width:15%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">账单名称</th>
<th style="width:12%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">用途描述</th>
<th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center" nowrap="nowrap">状态</th>
<th style="width:6%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">权限</th>
<th style="width:12.5%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">备注</th>
<th style="width:10%;padding-left: 0px;padding-right: 0px;" class="text-center" nowrap="nowrap">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>这样datatables的初始化工作算是完成了，接下来我们看看自定义搜索吧
第四部分：自定义搜索
function doSearch(params){
var assetSearch = $("#assets").val();//获取搜索框的值
//这里重新设置参数
$.dataTablesSettings.fnServerParams = function (aoData) {
aoData._rand = Math.random();
aoData.push({"name":"keyWords","value":assetSearch});
}
//搜索就是设置参数，然后销毁datatable重新再建一个
dataTable.fnDestroy(false);
dataTable = $("#trunkGroup_table").dataTable($.dataTablesSettings);
//搜索后跳转到第一页
dataTable.fnPageChange(0);
}既然都说到这了，我就再多啰嗦两句，datatables自带的分页都是假分页，如果数据量大的话，页面直接卡死，所以建议根据实际情况选择真分页还是假分页。
第五部分：datatables真分页
/**
* 当前页
*/
Integer currentPage = 1;
/**
* 每页数
*/
Integer pageSize = 10;
String iDisplayStart = request.getParameter("iDisplayStart");
String iDisplayLength = request.getParameter("iDisplayLength");
if (StringUtilsExtends.isNotBlank(iDisplayLength)) {
pageSize = Integer.valueOf(iDisplayLength);
}
if (StringUtilsExtends.isNotBlank(iDisplayStart)) {
currentPage = (Integer.valueOf(iDisplayStart) / pageSize) + 1;
}注意：如果你获取不到iDisplayStart、iDisplayLength的值，请确认datatables的配置bPaginate是否为true。只有bPaginate为true时才能获取到值。