CODEWITHSUNDEEP
jquerydatatable
curious_soul
curious_soul

Reputation: 645

Hidding datatable column and column data dynamically in Jquery

I want to hide a column and its data in data table if some condition is true in J query. I am able to hide the column using below code whenever needed(condition is true). 

{
                            '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);
                                }
                            }
                        },

But it throws below warning while loading data. If I click OK to warning, data is displayed as intended(column and its contents are not displayed)

"DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}"

Upvotes: 2

Views: 15070

Answers (3)

Ashish Kumar
Ashish Kumar

Reputation: 1

"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`  }
                    }
            }

You can also use this condition this helps in checking condition after table data binding processing complete.

Upvotes: 0

Hemamalini
Hemamalini

Reputation: 751

Show columns with default return statement and then conditions in 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);
                }
            }
        }

]

Upvotes: 0

curious_soul
curious_soul

Reputation: 645

This warning comes if table column headers count does not match with data columns to be renderedSince I am hiding one column, Now No of column headers are 1 more than data columns, so If I set default content of missing column data to empty, this warning will go away.I did it like below

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

Now if student Name column is visible, data table will be drawn as usual. If student Name column is hidden, default content will be set.

Complete data table components are as below.

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);
                                }
                            }
                        },
                ]
});

Upvotes: 2

Related Questions