Back in 2015 I posted an answer on Stack Overflow to the problem of searching and ordering by text or select inputs in a table powered by DataTables. One of the recent comments prompted me to update my answer and post it here.
jQuery DataTables
jQuery DataTables: Card view
There is an interesting thread on DataTables.net forum demonstrating ability to present table rows as cards.
jQuery DataTables: How to show loading indicator during table reload
There are some tricks to show loading indicator when retrieving data via Ajax request using jQuery DataTables.
jQuery DataTables: COLSPAN in table body TBODY
Officially jQuery DataTables doesn’t support COLSPAN
or ROWSPAN
attributes for a cell in table body. I already wrote how to use ROWSPAN attribute with jQuery DataTables. Today I am going to demonstrate a trick to use COLSPAN
attribute for HTML and Ajax sourced data.
jQuery DataTables: How to expand/collapse all child rows
While answering questions on StackOverflow and DataTables forum I have seen a number of similar questions on how to open all child rows. Today I am going to demonstrate a couple solutions to this problem.
Read More
jQuery DataTables: Row grouping and checkboxes (part 2)
Back in February, 2017 I wrote about unofficial row grouping plug-in for jQuery DataTables, see jQuery DataTables: Row grouping and checkboxes.
However there is also official extension for row grouping – RowGroup. It works differently than unofficial plug-in and adds a separate parent row for a group of child rows.
I added example demonstrating how to group rows in a table powered by jQuery DataTables plug-in and display checkboxes using Checkboxes plug-in, see RowGroup page for more details.
jQuery DataTables: How to select columns
jQuery DataTables plug-in has lots of useful extensions that let you add extra functionality. Select extension is probably one of the most popular ones providing item selection capabilities. Usually it is used to select table rows or cells but it is capable of column selection as well.
jQuery DataTables: Column reordering and resizing
Past version of jQuery DataTables had column reordering plug-in ColReorderWithResize that also provided the ability to resize columns by clicking and dragging the point between two columns. However this plug-in was not compatible with the latest version of jQuery DataTables.
Luckily Jeff Walter updated ColReorderWithResize to make column reordering and resizing work with jQuery DataTables 1.10 and released it under MIT license.
jQuery DataTables: How to navigate rows with KeyTable plug-in
Came across a question on StackOverflow asking on how to use KeyTable plug-in to navigate rows instead of cells. Currently KeyTable plug-in for jQuery DataTables lets you navigate cells but not rows.
jQuery DataTables: Common JavaScript console errors
jQuery DataTables displays a message when there is Ajax error or invalid JSON response. However most of the time you will only see a JavaScript error in your browser console if something is wrong. I have compiled a list of the most common JavaScript errors appearing in the console, their cause and possible solutions.