CODEWITHSUNDEEP
datatables
Se0ng11
Se0ng11

Reputation: 2333

jquery datatable column header not update properly

I try reuse 1 table with different amount of data based on different button click, I able to populate data successfully, but the problem is, the header did not populate correctly, I had debug and see the correct amount of column pass into table, but why it still retain the design from the 1st click? the 1st data from the 1st click have 3 column, but in the 2nd click, it still retain the same 3 column instead of 8 column? how to make the header populate correctly?

I try to destroy and recreate, but the code not working well if declare before the table create, any idea?

 //if ($.fn.DataTable.fnIsDataTable($(selector)[0])) {
            //    $(selector).dataTable.fnClearTable();
            //    $(selector).dataTable.fnDraw();
            //}

var oDataTable = $(selector).dataTable({
                "sDom": _sDom,
                "sPaginationType": "bootstrap",
                "bDestroy": true,
                "bServerSide": true,
                "bFilter": true,
                "bStateSave": true,
                "bSort": tools,
                "bAutoWidth": false,
                "sAjaxSource": source,
                "fnServerParams": function (aoData) {
                    aoData.push({ "name": "sParams", "value": params });
                },
                "bProcessing": true,
                "oLanguage": {
                    "sLengthMenu": _displayLen
                },
                "aoColumns": cols
            });

1st button click enter image description here

2nd button click enter image description here

Upvotes: 2

Views: 2630

Answers (1)

Se0ng11
Se0ng11

Reputation: 2333

Ok, found the answer, after fndestroy, I still need to remove header from table before recreate a new set of header

$(selector).find('thead tr th').remove();

Upvotes: 3

Related Questions