Datatable Fixed Column stuck when using multiple datatables

leadtbs

I have 9 datatables in one page and I use bootstrap tabs to separate these. There are some tabs that use the same datatable only that it changes the content depending on what tab is clicked (This was made to emulate our previous practice using google spreadsheet, one sample is that different sheet has same columns but with different data i.e. students for different branches).

I've used datatable fixed column in all datatable so I heavily rely on it. The problem occurs when I change tab multiple times that the fixedcolumn will get stuck, the data and alignment is correct however but when I click the sort button above the fixed column the data behind will actually sort but the fixed column data will not follow, I confirmed this when I deleted the fixed column using inspect element. Also when I search for something that does not exist in the table, one row of fixed column with one data is blocking the result which is "No matching records found". Also everytime I click a tab, it will refresh the datatable for it.

var columns_students = [
        {data: 'name', name: 'name'},
        {data: 'contact', name: 'contact'},
        {data: 'program.name', name: 'program'},
        {data: 'school.name', name: 'school'},
        {data: 'benefactor.name', name: 'benefactor'},
        {data: 'gender', name: 'gender'},
        {data: 'age', name: 'age'},
        {data: 'course.name', name: 'course'},
        {data: 'email', name: 'email'},
        {data: 'date_of_signup', name: 'date_of_signup'},
        {data: 'referral.fname', name: 'referral'},
        {data: 'remarks', name: 'remarks'},
        {data: "action", orderable:false,searchable:false}
    ]

var columnDefs_students = [
    { width: 220, targets: 0 }, //name
    { width: 90, targets: 1 }, //contact
    { width: 130, targets: 2 }, //program
    { width: 130, targets: 3 }, //school
    { width: 130, targets: 4 }, //benefactor
    { width: 60, targets: 5 }, //gender
    { width: 45, targets: 6 }, //age
    { width: 200, targets: 7 }, //course
    { width: 200, targets: 8 }, //email
    { width: 120, targets: 9 }, //signup
    { width: 120, targets: 10 }, //referral
    { width: 250, targets: 11 }, //remarks
    { width: 150, targets: 12 }, //action
    {defaultContent: "", targets: "_all"}
]


function refresh_student_branch(){
        departure_year = $('#year_select').val();
        departure_month = $('#month_select').val();

        students_branch = $('#students_branch').DataTable({
            stateSave: true,
            stateSaveCallback: function(settings,data) {
                localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
            },
            stateLoadCallback: function(settings) {
                return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
            },
            stateLoadParams: function( settings, data ) {
                if (data.order) delete data.order;
            },
            processing: true,
            destroy: true,
            scrollX: true,
            scrollCollapse: true,
            fixedColumns: true,
            ajax: {
                url: '/student_branch',
                data: {
                    current_branch: current_branch,
                    departure_year: departure_year,
                    departure_month: departure_month
                }
            },
            columnDefs: columnDefs_students,
            columns: columns_students,
            order: [[3,'asc']]
        });

    }


$('.branch_pick').on('click', function(){
    current_branch = $(this).text();

    showMonthSelect();
    refresh_student_branch();
});

This is how I reinitialize a datatable, you can see that it's inside a javascript function so I simply call it in other functions(particularly in clicking of tabs) every time I want to refresh it.

I'm thinking that it may be because of how I reinitialize the datatable especially for this many. All other functionalities are smooth except for this one and it's the most important.

colin

Hi @leadtbs ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

leadtbs

Thank you,

There are indeed a lot going on here and the code are too long as well. I'll try to share one page for the sake of testing purposes. I hope that we'll be able to fix this.

leadtbs

Hi @colin

It seems that it may be too hard to emulate what I've already done but basically that is how I reinitialize a datatable. May I know if it is an efficient one?

Thank you.

colin

Hi @leadtbs ,

Everything looks fine with your code, it's not an issue we've seen before, so it's just hard to diagnose without being able to see it.

Cheers,

Colin