前端控件五花八门,越来越多越来越方便快捷,但是有时候就会有各种各样的问题,特别是像我这种主要写后端编程,前端写得不多的人就没有花什么时间去看其详细用法配置,所以有时候或遇到一些小问题写原生js或jquery不能处理的时候,就老老实实按照指定的要求调用,百度一下来一堆不过百度真的很渣渣,大部分是瞎贴乱整
/*
* 调用搜索,搜索参数在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"
}, ... ]}