We use datatables a lot, and a problem we face is column headers not adjusting when the user expands or collapses the sidebar menu in our UI template. The datatables table body expands or shrinks according to the horizontal page space gained or lost when the sidebar menu expands or collapses, but the headers for some reason do not. The result is a misaligned table that looks messy.
I decided to address this once and for all, and went looking for a solution I could implement at least on a page by page basis. I quickly discovered this approach would be extremely inefficient at best, since I was dealing with a system with dozens and dozens of tables, if not hundreds. And that approach isnt very DRY. Let’s face it, that approach is never really the best approach.
Lo and behold, a quick search turned up a call in the datatables API where I could summon all visible datatables instances in the page, whatever the page may be. Kind of like a bat signal! I put this in the shared/layout of my ASP.NET MVC app, and it is invoked on each page when the sidebar menu expands or collapses. Voilà! If there are any datatables instances on the page, the columns adjust. I had to put the delayed call to the datatables API in because the adjustment was happening before the class change had taken place.