Add columns to Bootstrap 4 example without losing sort and pagination?

mikegoescoding

Using the example from: https://datatables.net/examples/styling/bootstrap4

Everything is working just fine until I try to add additional columns. The pagination and sort features disappear and I am left with just one endless table. I know I'm missing something, but I've followed the example exactly, and it works perfectly...until I add additional columns (I need 9 in total).

Any help would be much appreciated!

kthorngren

The pagination and sort features disappear and I am left with just one endless table.

Usually this is a Javascript error stopping the script. Check the browser's console for errors. Likely a syntax error.

Kevin

mikegoescoding

@kthorngren Thanks for the quick reply. I do have a console error, but I'm not quite sure what it is telling me.

jquery-3.5.1.js:4055 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
at $a (jquery.dataTables.min.js:37)
at ia (jquery.dataTables.min.js:32)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:33)
at jquery-3.5.1.js:208
at Function.map (jquery-3.5.1.js:463)
at jQuery.fn.init.map (jquery-3.5.1.js:207)
at Ja (jquery.dataTables.min.js:33)
at f (jquery.dataTables.min.js:107)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:108)
at Function.each (jquery-3.5.1.js:381)

and the only javascript in the file is the init per the example:

$(document).ready(function () { $('#example').DataTable(); });

I have tried adding paging: true, etc and nothing changes.

Thanks!

LukasL

Is your column number in html equal to the number in datatable's initialization code?

mikegoescoding

SOLVED: there was one sneaky row that had no data in it in the new column(s) that appears to be causing the error. Thanks for your help @LukasL , @kthorngren !