datatables 多条件搜索

前端控件五花八门,越来越多越来越方便快捷,但是有时候就会有各种各样的问题,特别是像我这种主要写后端编程,前端写得不多的人就没有花什么时间去看其详细用法配置,所以有时候或遇到一些小问题写原生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"
 
 }, ... ]}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值