fnSortListener Issues

rsoberano44

Hi, I'm using Datatables along with the rowGrouping plugin to display a list of products grouped by vendor. The way the table is now, you can sort product names and details under each vendor group by using the standard table sort events bound to the thead at the top of the table.

My issue is that I want to be able to make a copy of that thead under each group name so that users will be able to sort through the items in each vendor group without having to scroll all the way to the top (as this is a long list). Adding the row with the headings is fine, but I'm having mad issues trying to bind the sort event using fnSortListener to these headings, so I was wondering what the best way to do this is.

To clarify, the table is like this right now:

-------------------------------
Product Name Product Details
--------------------------------
Group 1 Name
Group 2 Name
Group 3 Name (expanded)
Product 1 Product 1 Details
Group 4 Name
--------------------------------

But I want it to be like this:

-----------------------------
Group 1 Name
Group 2 Name
Group 3 Name (expanded)
-----------------
Product Name Product Details <--- Want to be able to sort by these headings
------------------------
Product 1 Product 1 Details
Product 2 Product 2 Details
Group 4 Name
-----------------------------

allan

How are you currently trying to use fnSortListener? I've not worked with the column grouping plug-in much myself, but it should just be a case of telling fnSortListener what element to attach to and what column it should sort.

Allan

rsoberano44

Hey Allan, thanks for your reply. The way it works now is that when I click on a Group Name to open it up (like an accordion), the header row is dynamically added below that group name and fnSortListener is attached to those headings. My issue though is that when I do click on those group headings, they sort once and then both disappear.

rsoberano44

On further inspection, what seems to be happening is that the click handler is being attached to the headings, but when you click on them the column does sort, but headings don't actually disappear like I said earlier, instead they seem to be reinitialized because the click handler disappears. Same happens when I click on the sort buttons on the top. Is there something that happens when a sort is called that causes anything to reinitialize? I'm guessing this is an issue with the rowGrouping plugin then?

allan

> instead they seem to be reinitialized because the click handler disappears

Ah - its probably recreating the DOM elements on each draw.

Unfortunately in this case, DataTables is using a static event listener (see _fnBindAction) so you would probably need to bind the sort listeners on every draw as well ( fnDrawCallback ). I'd probably suggest having a dig around in the column grouping plug-ins code and seeing where it is working with the draw callback and then making the modification in there, rather than doing it externally.

Allan

rsoberano44

Thanks for the help! What I ended up doing was exactly as you said, binding the sort listeners on every draw. Luckily, the plugin has a callback function for when the table is initially grouped, and fnSortListner provides a callback argument for when the table is sorted (which executes after the table is redrawn after sort), so I wrote a function that dynamically adds the header and binds the sort listener to the header columns for the callback.

It works great now, thanks for all of your help and your quick replies!