1. datatable中如果不想对前几列进行排序,使用以下代码:

      $('#informationList').DataTable({
        	//对0,1,2列不排序
         "columnDefs": [ {
             "orderable": false,
             "targets": [0,1,2]
         }],
     	//如果需要重载页面则需要销毁页面,以便于重新加载
         destroy:true,
     	//自带的搜索框,如果不需要则可以设置false,默认为true
         searching:true,
     	//表格分页
         paging: true,
     	//汉化
         language: {
             "sProcessing": "处理中...",
             "sLengthMenu": "显示 _MENU_ 项结果",
             "sZeroRecords": "没有匹配结果",
             "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
             "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
             "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
             "sInfoPostFix": "",
             "sSearch": "简单搜索:",
             "sUrl": "",
             "sEmptyTable": "表中数据为空",
             "sLoadingRecords": "载入中...",
             "sInfoThousands": ",",
             "oPaginate": {
                 "sFirst": "首页",
                 "sPrevious": "上页",
                 "sNext": "下页",
                 "sLast": "末页"
             },
             "oAria": {
                 "sSortAscending": ": 以升序排列此列",
                 "sSortDescending": ": 以降序排列此列"
             }
         }
     });
    
  2. 现出现需求:datatable自带的搜索框满足不了需求,需要自己动手写搜索语句,并且把数据都已经获取到list集合中了,如何操作?

    1. 查看官方文档,datatable的数据源就三种,其中最方便的一组是使用了array集合来存储数据,如下:

       	/**
        * 条件查询
        *
        * @param title
        * @param level
        * @param industry
        * @param company
        * @param keyword
        * @param function
        * @return
        */
       @RequestMapping("/search")
       @ResponseBody
       public Map<String, Object> searchCaseByCondition(@RequestParam("name") String name, @RequestParam("title") String title, @RequestParam("level") String level, @RequestParam("industry") String industry, @RequestParam("company") String company, @RequestParam("keyword") String keyword, @RequestParam("function") String function, String state) {
           System.out.println(state);
           System.out.println(name);
           System.out.println("1111");
           Map<String, Object> returnMap = new HashMap<>();
           if ("".equals(name)) {
               name = null;
           }
           if ("".equals(level)) {
               level = null;
           }
           if ("".equals(title)) {
               title = null;
           }
           if ("".equals(industry)) {
               industry = null;
           }
           if ("".equals(company)) {
               company = null;
           }
           if ("".equals(keyword)) {
               keyword = null;
           }
           if ("".equals(function)) {
               function = null;
           }
           if (name == null && function == null && keyword == null && company == null && industry == null && title == null && level == null) {
               String error = "输入参数错误,请重新输入!";
               return (Map<String, Object>) returnMap.put("error", error);
           }
           List<Problem> results = caseService.searchByConditions(name, title, level, industry, company, keyword, function, state);
           returnMap.put("searchResults", results);
           return returnMap;
       }
      

前台接收后的代码:

	$("#btn_search").on('click', function () {
        //点击后,需要想后台传输数据
        //0,申请人
        var pname=$("#proName option:selected").val();
        if (pname==null){
            pname=null;
        }
        //1,传送难度级别
        var pLevel = $("#proLevel option:selected").val();
        if (pLevel == null) {
            pLevel = null;
        }
        // 2,传输所属行业
        var pIndustry = $("#proIndustry option:selected").val();
        if (pIndustry == null) {
            pIndustry = null;
        }
        //3,传输来源企业
        var pCompany = $("#proCompany option:selected").val();
        if (pCompany == null) {
            pCompany = null;
        }
        //4,传输关键字,
        var keyword = $("#proKeyword option:selected").val();
        if (keyword == null) {
            keyword = null;
        }
        //5,传输实现功能
        var pFunction = $("#proFunction option:selected").val();
        if (pFunction == null) {
            pFunction = null;
        }
        //6,传输难题名称
        var pTitle = $("#proTitle option:selected").val();
        //7,传值,证明是通过的
        var pState='1';
        console.log(pState);
        $.ajax({
            type: "post",
            url: "/case/search",
            dataType: "json",
            data:
                {
                    name: pname,
                    title: pTitle,
                    level: pLevel,
                    industry: pIndustry,
                    company: pCompany,
                    keyword: keyword,
                    function: pFunction,
                    state:pState
                },
            error: function () {
            },
            success: function (data) {
                //搜索到数据后去掉模态框
                $("#passSearchModal").modal('hide');

                console.log(data);
                $('#declarationList').DataTable({
                    destroy: true,
                    data: data.searchResults,
                    columns: [
                        {data: 'proId',render:function (data,type,row,meta) {
                                return '<label class="checkbox-inline"><input type="checkbox" class="myid2" name="items" id="items" value="'+row.proId+'">'+row.proId+'</label>'

                            }},
                        {data: 'proTitle',render:function (data, type, row, meta) {
                                return '<span><a href="/case/displayCase/'+row.proId+'">'+row.proTitle+'</a></span>'
                            }},
                        {data: 'proLevel'},
                        {data: 'proIndustry'},
                        {data: 'proCompany'},
                        {data: 'proKeyword'},
                        {data: 'proFunction'},
                        {data: '',render:function (data, type, row, meta) {
                                return '<a href="/case/exportApproveCase/'+row.proId+'">导出<i class="fa fa-file-word-o" aria-hidden="true"></i></a>'
                            }}
                    ]
                });
            }
        })
    });

使用render来扩展内容属性具体博客忘了粘贴了。
上面一篇的博客----》https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90445222
 posted on 2019-11-03 20:21  ben跑的换行符  阅读(207)  评论(0编辑  收藏  举报