I really do love the awesome DataTable plugin which creates useful dynamic, with oodles of extra functionality, tables out of plain old vanilla HTML tables. Today’s quick tip however looks at how one destroys an already instantiated DataTable instance, say because you want to recreate it at a later stage in a completely different format but want to reuse the selector currently bound to the existing table.
If you are using the brilliant jQuery DataTables plugin to present your data in nifty dynamic tables, and are using it in a server-side loading context, you have no doubt encountered the issue when a table with a lot of columns (more than 20) fails to load (in other words stays in “processing” mode) when browsing using Internet Explorer (IE).
Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.
As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!
Because the DataTables was being fed through a server-side script, in other words the actual table data is loaded by the DataTables plugin itself, my jQuery function that was supposed to interact with the clicking of a smiley face couldn’t work because the elements it was meant to interact with simply didn’t exist when the page’s initial DOM tree was being loaded.
Today’s quick tip is on how to disable sorting on specific columns, in the event when it simply doesn’t make sense for a user to be able to sort by that particular column in your table.
When constructing your dataTable object you can pass it an initializer parameter named aaSorting which essentially allows you to set which columns to sort on and also which direction to sort in.
Of course, I don’t usually work with static table data, meaning that I use server side processing scripts to load the data to my tables and when I started to employ user selectable data filters not connected to the DataTables object, I realised that I needed to be able to reload the DataTable’s data source at will.
DataTables is a brilliant jQuery plugin that instantly adds a full set of advanced interaction controls over whatever HTML table it gets attached to. It’s flexible, well-coded and does the job in a fantastic manner, thereby lifting a lot of grunt work off any developer who doesn’t feel like creating table controls up from scratch any more.
Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under whichever martial arts dojo is closest at the time, and for the most part, simply enjoys life with his amazing wife and daughter.
Oh, and he draws ever now and then too.
This is a collection of things that he has managed to find the time to scribble down since 2007.
Looking for Something?
Jump to Category: