Maximum columns support by datatables.net

sarooptrivedi

I have 100 Columns in my table. tables load successfully with colvis button.

but it I got the error when I redraw the table after apply the filter rows .

datatables.js:76223
Uncaught TypeError: Cannot read properties of undefined (reading 'style')

kthorngren

There is not a max limitation on the number of columns.

but it I got the error when I redraw the table after apply the filter rows

Can you provide a link to your page or a test case showing this problem? If not then please post your Datatables code and maybe we can see where the problem might be.

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

Most of the time this means there is a mismatch between the number of columns in HTML and the number defined in columns. Other issues can cause the problem. The forum may have other helpful tips for you.

Kevin

sarooptrivedi

Hey Kevin,

My code is working properly when I remove the colvis option. It is large code and I can not put here. I am aware of the error meaning. I checked my columns array and th tag both are same. It is only affect when I apply the filter. Colvis is creating issue.

1. It is server side scripting in .net
   2.Colvis button option apply when page load first time. default columns only visible and rest of hide.
2. I created button inside datatable and call the modal window. Modal window has some filters textbox. on filter I collect the values and pass as data in datatable.
3. It is filter the data perfectly.
   If I remove the colvis button then code work propertly

kthorngren

It is only affect when I apply the filter. Colvis is creating issue.

How are you applying the filter? What is the code?

Its hard to say without seeing the problem. I put together a starter test case for you that has 108 columns and covlis with most of the columns hidden and uses server side processing. Please update the test case to show the issue or at a minimum post your relevant code that is causing the problem.

Kevin

sarooptrivedi

Hey Kevin,

This is so funny. but I dig in the issue and I find out that Colvis is not issue.

Issue is when I applied the order on server side after applying filter.
"order": [[0, "desc"]].

I am not sure how to create test case here. I am working in C#. I created the partial view and add the two textbox for search value. pass two textbox values as data in my ajax call and in code behind apply that value in your where condition.

kthorngren

I would start with the browser's network inspector tool to see what is return from the server when the error occurs.

Kevin

sarooptrivedi

// apply the advance filter on datatables.net
function ApplyAdvanceSearch() {

    var rVal = $(".rbsearchtypetn:checked").val();
    collection = {
        StartSampleId: $('#txtInitialStartNum').val(),
        EndSampleId: $('#txtInitialEndNum').val(),
        RadconLog: $('#drpRadConLogList option:selected').text() == "--Select--" ? null : $('#drpRadConLogList option:selected').text(),
        RadconLogNo: $('#txtRadConLogNo').val(),
        Facility: $('#drpFList option:selected').text() == "--Select--" ? null : $('#drpFList option:selected').text(),
        Building: $('#drpBList option:selected').text() == "--Select--" ? null : $('#drpBList option:selected').text(),
        Area: $('#drpAList option:selected').text() == "--Select--" ? null : $('#drpAList option:selected').text(),
        RCT: $('#txtRCT').val(),
        AirSampleType: $('#drpJobTypeList option:selected').text(),
        AirSamplerType: $('#txtSamplerType').val(),
        StartDate: $('#txtDateOnStart').val(),
        EndDate: $('#txtDateOnEnd').val(),
        ARAWorker: $('#txtARAWorker').val(),
        SearchType: rVal
    };

    DatatablesLoad(collection);
    $('#SearchModalPopup').modal('hide');
}
//Clear filters
function ClearFilterSearch() {

    DatatablesLoad();
} 

function DatatablesLoad(collection) {
//Code

  if ($.fn.dataTable.isDataTable('#tblInitialCount')) {
        table = $('#tblInitialCount').DataTable();
       
        table.clear();
        table.destroy();
    }

    var table = $("#tblInitialCount").DataTable({
//server side code
});
}

$(document).ready(function () {
    //Advance Search

    if (collection == null)
        DatatablesLoad();
    else {

        DatatablesLoad(collection);

    }
    // Open the advance search popup modal

  
});

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

sarooptrivedi

I don't know but this code paste not work in my Edge browser.

It looks like when the datatables function call inside the AdvanceSearch function the datatables object is lost some where.

on my dbclick event I need to check the is exist or not

   //Redirect to the Edit page when double click the datatable row
    $('#tblInitialCount tbody').on('dblclick', 'tr', function () {
        if ($.fn.dataTable.isDataTable('#tblInitialCount')) {
            table = $('#tblInitialCount').DataTable();
            var data = table.rows(this).data();            
            // var url = $("#EditUrl").val() + '/' + data["ID"];
            var url = $("#EditUrl").val() + '/' + data[0]["ID"];
            window.location.href = url;
        }
       
    });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You posted this:

    var table = $("#tblInitialCount").DataTable({
//server side code
});

Does this mean you have server side processing enabled? What are the config options? Are you dynmaically building the columns or are they statically defined in the init code?

Kevin

sarooptrivedi

I am loading through the EF. All Columns come from the List<Class> values.

kthorngren

I am loading through the EF. All Columns come from the List<Class> values.

Sorry, but I don't know what you mean by these comments.

At a minimum please post your Datatables init code. But we will probably need to see a running test case showing the issue to help debug. Please post a link to your page or a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

sarooptrivedi

Hey Kevin,

Let close this issue. Because my server side scripting is large.

I can not able to put whole source code.
1. Create class with 100 fields
2. In database create 100 fields table.
3. Link with List<class> object through the EF(Entity FrameWork)
4.Convert List<Class> to JSON and pass to Datatable Ajax.
5. Design 100 columns base on class property
6. Create Partial view with three textbox.
7 Open partial view in modal pop up on datatable button click
8. Input value in partial view textbox and close the modal window
9.Store the partial view textbox values in JSON array
10 call the datatables function again and pass the values as ajax data

"ajax": {
"url": "/ControllerName/ActionName/",
"type": "POST",
"ContentType": "application/json",
data: collection, // filter values passed as Json array
"datatype": "json",
"dataSrc": function (result) {
totalrecord = result.recordsFiltered;
return result.data;
},

11.Datatables lost the reference. it is null on dblclick and order[[0,'desc']]