jquery datatable 分页,及搜索实现

最近开发项目用到了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向后台传递搜索参数。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值