datatable某列不排序、和自定义搜索、给数据里面加属性

最新推荐文章于 2022-07-05 22:06:50 发布

2022年度最佳搬砖户

最新推荐文章于 2022-07-05 22:06:50 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/qq_34896209/article/details/106133459

版权

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": ": 以降序排列此列"
         }
     }
 });

现出现需求：datatable自带的搜索框满足不了需求，需要自己动手写搜索语句，并且把数据都已经获取到list集合中了，如何操作？

查看官方文档，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