zoukankan      html  css  js  c++  java
  • datatable某列不排序、和自定义搜索、给数据里面加属性

    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
    博客网站 https://yamon.top 个人网站 https://yamon.top/resume GitHub网站 https://github.com/yamonc 欢迎前来访问
  • 相关阅读:
    MFC列表控件更改一行的字体颜色
    MFC之sqlite
    MFC笔记10
    MFC---关于string.h相关函数
    MFC笔记8
    MFC笔记7
    MFC笔记6
    MFC笔记5
    MFC笔记4
    MFC笔记3
  • 原文地址:https://www.cnblogs.com/chenyameng/p/11788877.html
Copyright © 2011-2022 走看看