最近开发项目用到了jquery datatable 这个插件，感觉还是很好用的，今天写了一个表格的完整功能，贴上来，以供参考，html，和后台部分的内容就不贴了，只贴js部分
/*
* 调用搜索，搜索参数在fnServerParams中定义
*/
$("#submitSearch").click( function () {
oTable.fnFilter();
} );
/*
* 初始化表格参数
*/
var oTable = $('#messageList').dataTable( {
"bProcessing" : false, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide" : true, //是否启动服务器端数据导入
//"aLengthMenu" : [10, 20, 50], //更改显示记录数选项
"iDisplayLength" : 10, //默认显示的记录数
"bPaginate" : true, //是否显示（应用）分页器
"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
"bSort" : true, //是否启动各个字段的排序功能
"sDom": "t<'row-fluid'<'span6'i><'span6'p>>",//定义表格的显示方式
"sPaginationType": "bootstrap",
"aaSorting" : [[0, "desc"]], //默认的排序方式，第0列，降序排列
"bFilter" : true, //是否启动过滤、搜索功能
"aoColumns" : [{
"mData" : "id", //列标识，和服务器返回数据中的属性名称对应
"sTitle" : "",//列标题
"sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
"bVisible" : false //此列不显示
//"sClass" : "hidden"//定义列的class参数，隐藏列也可以通过这种方式设置
}, {
"mData" : "fromUser",
"sTitle" : "发送人",
"sWidth":"10%",//定义列宽度，以百分比表示
"sDefaultContent" : "",
}, {
"mData" : "toUser",
"sTitle" : "接收人",
"sDefaultContent" : "",
}, {
"mData" : "messaeg_content",
"sTitle" : "消息内容",
"sDefaultContent" : "",
"bSortable":false //此列不需要排序
}, {
"mData" : "",
"sTitle" : "操作",
"sDefaultContent" : "",
}],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总显示记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(共显示 _MAX_ 条数据)",
"sInfoPostFix" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
/*
* 修改状态值
*/
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
if (aData.response_type == 'video')
$('td:eq(1)', nRow).html('视频回复');
return nRow;
},
/*
* 向服务器传递的参数
*/
"fnServerParams": function ( aoData ) {
aoData.push(
{ "name": "keyword", "value": $("#search-keyword").val() },
{ "name": "responseType", "value": $("#search-responseType").val() }
);
},
//请求url
"sAjaxSource" : basePath+"getCustomResponsePageMessage/"+$("#secret").val(),
//服务器端，数据回调处理
"fnServerData" : function(sSource, aDataSet, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "post",
"url" : sSource,
"data" : aDataSet,
"success" : function(resp){
fnCallback(resp);
}
});
}
});
以下是服务器返回的参数
{
"iTotalRecords": 10,//本次加载记录数量
"iTotalDisplayRecords": 57,//总记录数量
"aaData": [
{
"id": "1",
"fromUser": "tom",
"toUser": "jack",
"content": "hello"
},
{
"id": "2",
"fromUser": "jack",
"toUser": "tom",
"content": "how are you"
}, ... ]}
需要注意的是，datatable的fnFilter有自带的搜索实现，但是它传递到后台的参数识别起来比较麻烦，所以修改了搜索的实现通过fnServerParams向后台传递搜索参数。