Sorting isn’t working as expected when using conditional columnDef and inputs

thegamechangerpro

I am using the following code to lock off a cell in a column once a condition is met (condition = 1) otherwise it should be an input:

{targets: [7, 8], "render": function (data, type, row, meta) {if (row.condition == '1'){ return data} else {return '<input type="text" size="12" value ="' + data + '">' }}},

It works just how I want it to.

The issue is when i sort by this/these columns the rows that meet the condition sorts as if the data is null followed by the correctly sorted rows where the condition is not met (the input fields).

I have been using this to help sort the data in the inputs which is where I believe the issue lies:

$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
} );
};

How do I updated this get the rows to sort the inputs and data together correctly?

Thanks,

allan

DataTables caches the search and sort values for performance reasons. That's why it isn't reading the value from the input - unless you use something like the live DOM sorting plug-in.

I don't not that there is a way to mix static data and live DOM elements in a single column. I've not encountered that specific case before. I'll need to have a bit of a think about this!

Allan

thegamechangerpro

Thanks for taking an interest!
I don’t have to do it this way if you know of a better way to lock off inputs after the condition is met.

I suppose I can do an on change trigger that reverts the input back to its original state if the condition is met, but I would need a little advice on how best to do that. That way nothing is truly static.

allan

One workaround that springs to mind is to use input elements for all returns, but either make some read only / disabled, or add a class to make them appear as just plain text.

Allan

thegamechangerpro

Hi Allan,

Great suggestion, though I am having a tough time setting an input as readonly - this is in datatables not editor.

{targets: [7, 8], "render": function (data, type, row, meta) {if (row.condition == '1'){ return data} else {return '<input type="text" size="12" value ="' + data + '">' }}},

any tips?

kthorngren

Add the readonly or disabled attribute to the input string. Checkout this tutorial.

Kevin