在Jquery中动态隐藏数据表列和列数据

时间:2016-09-19 09:29:21

标签: jquery datatable

如果J查询中的某些条件为真,我想在数据表中隐藏列及其数据。我可以在需要时使用下面的代码隐藏列(条件为真)。

{
                            'targets': [1],
                            'render': function (data, type, row, meta){
                                var student= $("#studentName").val();
                                if(student==''){
                                    return '<a href="URL?student='+row.student+'">'+row.student+'</a>';
                                }else{
                                    table.columns([1]).visible(false);
                                }
                            }
                        },

但是在加载数据时它会低于警告。如果单击“确定”进行警告,则会按预期显示数据(不显示列及其内容)

  

&#34; DataTables警告:table id = {id} - 请求的未知参数   &#39; {参数}&#39;对于行{row-index},列{column-index}&#34;

3 个答案:

答案 0 :(得分:1)

如果表列标题计数与要呈现的数据列不匹配,则会出现此警告,因为我隐藏了一列,现在没有列标题比数据列多1个,所以如果我将缺少列数据的默认内容设置为空,这个警告会消失。我是这样做的

"{"data": "studentName",
                    "defaultContent": ""},
                .........
                ],"

现在,如果学生姓名列可见,则数据表将照常绘制。如果隐藏了学生名称列,则将设置默认内容。

完整的数据表组件如下。

var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "pagingType": "simple",
        "sDom" : '<"top"lp>rt<"bottom"lp><"clear">',
        "ajax": {
               url: 'JSONURL.json',
               dataType: 'json',
               type: 'GET',
               data: function ( d ){
                   d.param1= $("#studentName").val(),

                },
            },
        "columns": [
            {"data": ""},
            {"data": "studentName",
                "defaultContent": ""},
            .........
            ],
            "columnDefs": [
                         {
                            'targets': [1],
                            'render': function (data, type, row, meta){
                                var student = $("#studentName").val();
                                if(student==''){
                                    return '<a href="URL?student='+row.studentName">'+row.studentName+'</a>';
                                }else{
                                    table.columns([1]).visible(false);
                                }
                            }
                        },
                ]
});

答案 1 :(得分:0)

显示具有默认返回语句的,然后显示 columnDefs

中的条件
"columns": [
        {"data": ""},
        {"data": "studentName"},{"data": "mobile"},
],
"columnDefs": [
        {
            'targets': [3],
            'render': function (data, type, row, meta){
                if(row.studentName != undefined){
                    return row.studentName;  
                }else{
                    table.columns([3]).visible(false);
                }
            }
        },
        {
            'targets': [4],
            'render': function (data, type, row, meta){
                if(row.mobile != undefined){
                    return row.mobile;  
                }else{
                    table.columns([4]).visible(false);
                }
            }
        }

]

答案 2 :(得分:0)

"initComplete": function (settings) {
                var api = this.api();
                for (var i = 0; i < api.rows({ page: 'current' }).data().length; ++i) 
                {
                    if(api.rows({ page: 'current' }).data()[i].Status == "VISIBILITY_CONDITION")
                        {
                            tab.columns([9]).visible(true);
                            break;
                        } 
                    else{
                            tab.columns([9]).visible(false)
                            break;
                      `enter code here`  }
                    }
            }

您还可以使用此条件,这有助于在表数据绑定处理完成之后检查条件。