Using FixedColumns with dynamically generated columns

dion20

I have an empty table (no headers, no rows, etc.), with everything inside is initialized with DataTables. The only thing set in the table is the thead to make use of the class. Both data_var and cols_var are obtained dynamically from AJAX.

<table id="table" class="table">
    <thead class="table-header"></thead>
</table>

$("#table").DataTable({
    "data": data_var,
    "columns": cols_var,
    ...
})

For several type data, I want to initialize them with variable amount of fixed columns (i.e. some data only have 1 fixed columns while other may have up to 5). However, nothing changed each time I initialize the data using "fixedColumns" parameter, not even when I use fixed value in the option.

$("#table").DataTable({
    ...
    "fixedColumns": { "leftColumns": 1 },
    ...
})

Console log only shows the error as a[m][p] is undefined from the _fnCopyLayout function or some variation of it. Is it actually possible to initialize fixed columns in my case (using variable columns generated by DataTable), since I usually use table with fixed columns and it worked fine.

Thank you

kthorngren

This example shows how to use the fixedColumns.leftColumns option. Looks like you are using it correctly.

The problem might be with the empty thead. Does your cols_var column definitions contain columns.title to define the column headers? If not that is likely the problem as Datatables attaches events to the column headers.

If this doesn't help please post a link to your page or a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

dion20

My cols_var does contain the "title" option alongside the "data" option to define both the headers and the data.

I double-checked my codes and the problem apparently happens because I use bootstrap for styling and didn't include the bootstrap JS file for fixedColumns (and other extensions as well). Plus, I also turned on my debugger on strict mode, which resulted in the console error. The table looked fine after I included the bootstrap JS file both in the test case below and my environment.

http://live.datatables.net/nazukida/2/edit

Also, while we're still at it, is my usage of the bootstrap styling as shown in the test case is already correct? Just want to make sure of it.

Thanks for the help

kthorngren

They look correct. You can use the Download Builder to generate the proper CSS and JS files.

Kevin