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"
 
 }, ... ]}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,根据查询条件动态改变表头展示个数可以通过Datatables的API来实现。具体步骤如下: 1. 定义一个函数来动态生成表格的表头,例如: ```javascript function generateTableHeaders(num) { var headers = []; for (var i = 0; i < num; i++) { headers.push({"title": "Column " + (i+1)}); } return headers; } ``` 上面的代码中,generateTableHeaders函数接受一个参数num,表示表头的个数。函数返回一个包含num个表头的数组,每个表头的标题为"Column n",其中n从1开始递增。 2. 在Datatables的初始化代码中,根据查询条件动态生成表头,并重新绘制表格,例如: ```javascript $(document).ready(function() { var table = $('#example').DataTable({ "ajax": "data.json", // 表格数据的URL "columns": generateTableHeaders(5) // 表头个数为5 }); $('#search-btn').on('click', function() { var num = $('#header-num').val(); // 获取查询条件,表示表头的个数 var headers = generateTableHeaders(num); // 根据查询条件生成表头 table.destroy(); // 销毁原来的表格 $('#example thead').empty(); // 清空原来的表头 table = $('#example').DataTable({ "ajax": "data.json", // 表格数据的URL "columns": headers // 使用新的表头重新初始化表格 }); }); }); ``` 在上面的示例中,我们定义了一个查询条件,表示表头的个数,当用户点击搜索按钮时,根据查询条件重新生成表头,并重新初始化Datatables表格。注意,我们销毁了原来的表格,并清空了原来的表头,然后使用新的表头重新初始化表格。 希望这可以帮到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值