How to add some code to the details.renderer and still call existing one ?

johndoo

Description of problem:

Sometimes when sorting a datatable column, the headers/footers are misaligned with the rows (still with scrollY: true)
But the misalignment occurs only after the responsive.details.renderer is called.
Here is my current code:
responsive: { details: { renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes() } }

I have looked at the example "Custom child row renderer" but it replaces completely the renderer, what I want is just add some kind of api.columns.adjust(); after the existing renderer call.

I don't know how modify the renderer without rewriting it completely.

NOTE: I use the last datatables version + last responsive version.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

johndoo

Here is a test case:

http://live.datatables.net/jelaremu/1/edit?html,js,output

Try to click several times on the "position" column ordering arrows , or try to slowly reduce the size of the browser window (Tested on last version of firefox).
On google chrome, try to reduce the size of the browser window.

Sometimes the misalignment is only 2 pixels, but it can be really huge (when a column appears/disappears in responsive mode).

If you can solve the issue in the plugin, I can then remove some tricky code I have added to solve the "browser window width change bug". ;-)

allan

Thanks for flagging this up. Two initial comments:

1. You have paging enabled, so do you really need scrollY as well? If not, then remove that option and the issue will be resolved.
2. Don't load both the DataTables base CSS and the DataTables/Bootstrap integration CSS - it causes conflicts (seen particularly in the paging there).

However, to resolve what you are seeing, you could use the responsive-display event to trigger the call to columns.adjust() - updated example:

  table.on('responsive-display', function () {
    table.columns.adjust();
  });

Regards,
Allan

johndoo

Thanks allan !

Concerning scrollY option, in some cases I will remove the paging so I need it.

I've commented out the second CSS loading in your example : update
But now the headers/footers are far away from the rows (wasted space on small screens).
And the resize window bug still there on firefox (sorting seems solved with your code).
You have to slowly reduce the width of window until one column becomes hidden.
In a datatable with many columns this occurs easily.

NOTE: if you put an alert() in the responsive-display function, it seems that it is never called.

colin

You removed the wrong CSS. If you use the download builder, then you get all the right sources. See updated example here: http://live.datatables.net/jelaremu/5/edit

Colin

johndoo

Thanks colin but bug still there in your updated version.

colin

I'm not seeing any misalignment - can you give instructions on how to reproduce, please.

Colin

johndoo

Well now this is indeed not easy to reproduce,

Example: you have to slowly reduce the width of the browser window around the transition between 4 to 3 columns visible in the datatables, you must release the mouse bouton exactly when the 4th column disapears, and then you will see the bug.

In real life there is little chance that the bug occurs but you know it is always when you make a demo to a customer that weird things occur

colin

Ah I see. It looks like scrollY is still enabled - see Allan's comment above about removing it - with that removed, it appears to work as expected - see here: http://live.datatables.net/jelaremu/7/edit

One point worth noting is that his other comment, to use responsive-display, isn't working - that event isn't being triggered. I've raised it internally (DD-1815 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

johndoo

Thanks for the feedback !