DataTables Editor inline editing and sort column

cheino1

We are using a DataTable with inline editing similar to this example https://editor.datatables.net/examples/inline-editing/editIcon.html The issue we are facing is when editing a value in the default sort column (eg. First Name), the row disappears from view after being edited. You can see this happen in the example I linked above if you take one of the first names beginning with letter 'A' and change it to a value such as 'Zebra'. This leaves the user wondering what happened to the row they were editing.

What is the best way to prevent the DataTable from sorting again when a value within the sort column has been edited? We would prefer the sort not to occur again until the user chooses a sort column or the table is re-initialized. We want to preserve the sort order as it was before the value was edited so that the edited row remains in the same location in the sort order.

allan

Hi,

Great question, and unfortunately at the moment I don't have an equally great answer for it. The mode of operation you describe is expected - when DataTables does a draw it will reevaluate the sorting (and filtering as it happens) as you have noticed, and at the moment, DataTables doesn't provide an API to stop this from happening - at least not directly.

As a temporary workaround you could try making a small modification in Editor - the line:

row.data( data ).draw( false );

can become:

row.data( data );

That will update the display only and not redo the sorting / filtering. However, it could potentially lead to confusion itself since the data int he table won't be correctly ordered.

I'm not certain what the correct thing to do here is to be honest, and would welcome any feedback from yourself and anyone else.

Regards,
Allan

NYTechMan

I would like to see it work like spreadsheets (Excel, etc.). In those type of apps, you must proactively sort (or re-sort). In conclusion - if data is edited, it does not assume that you want to re-apply the sort. That's how I would like to see it work as a user.

cheino1

Hi Allan,

Thank you for providing this solution. I made the modification in the editor JS file as you recommended, and it solves the issue.

We are using a row callback handler function to inject img tags into one of our columns, and I did notice that after applying the fix that when editing a row, the img tag is removed, presumably because we are disabling the draw method in this case so the row callback handler isn't called? We were able to get around that using the editor onOpen and onClose events, by copying the HTML from the cell containing the img tag in onOpen and restoring it in onClose.

editor.on( 'onOpen', function() {

    thumbnailCell = $('div.DTE').closest('tr').find('td:first-of-type');

    thumbnailHtml = $(thumbnailCell).html();

}).on( 'onClose', function() {

    $(thumbnailCell).html(thumbnailHtml);

});

One other thing we notice is that when using the pagination, the sort is always applied. For example, if we edit a row on page 1, then use the pagination to navigate to page 2, then back to page 1, the edited row is no longer in its original position. I think this is ok for our requirements but just wanted to mention.

Thanks again,

Chris

allan

We are using a row callback handler function to inject img tags into one of our columns, and I did notice that after applying the fix that when editing a row, the img tag is removed, presumably because we are disabling the draw method in this case so the row callback handler isn't called?

Correct. rowCallback is called on draw. I would suggest using columns.render to create the image tag rather than the row callback.

Allan

ggvishnu

how to remove sort button from a column?

allan

I'm not sure what your question has to do with the rest of this thread? However, if you checked the documentation you would find that you can use the columns.orderable option.

Allan

cheino1

Hi Allan,

Thank you again for your suggestions as they have helped us a great deal with our requirement.

Correct. rowCallbackDT is called on draw. I would suggest using columns.renderDT
to create the image tag rather than the row callback.

I ran a quick test and it seems the render function is called for all rows in the table, not just visible rows (e.g. first page). We are using rowCallback to "lazy load" images so that the image files are not requested until the row containing the image becomes visible which has made a big performance improvement for us.

Thanks,

Chris

allan

I ran a quick test and it seems the render function is called for all rows in the table, not just visible rows (e.g. first page).

That is correct as DataTables needs the rendered information for sorting and filtering. The image wouldn't be loaded until it is actually inserted into the document.

Allan