Paging not working

pritamsinha

I need some help with my datatable. The replica of my actual table is given in:JSFiddle
2 problem:
1) paging and info (show 1 out of 5 entries )not working in the bottom.
2) scrollx not working, even when screen size is changing.

kthorngren

The min problem is you are getting this error in the browser's console:

jquery.dataTables.min.js:76 Uncaught TypeError: Cannot read property 'style' of undefined

The problem is with your header. It is not configured in a way that Datatables supports. Please see this complex header example for more information.

Your bottom thead to needs to have on cell per column. Something like this:
https://jsfiddle.net/Lf20r6gw/

You have conflicting CSS. You have two sets of sorting icons; one is the default Datatables icons and the other Bootstrap. This is caused by loading jquery.dataTables.min.css when using Bootstrap. You are loading Bootstrap 3 but are loading buttons.bootstrap5.min.css. Use the Download Builder to get the correct files for the styling framework you are using.

Read through the Styling docs for more details. See this BS 3 example. Click on the HTML tab to see how to set the basic Bootstrap table styles on the table tag.

Kevin

pritamsinha

Thanks for the info. It fixed both the problems. Yes I imported all the styling css. And now its a mess. I will try to fix it.

kthorngren

Why is it a mess? Can you update the test case to show us?

I used the download builder and updated the table tag and it looks ok here:
https://jsfiddle.net/ef7msc8t/

Kevin