How can I sort textarea input fields immediately after they are changed?

djremedy

Is there a command that will re-index the data in input fields so the column can sort on the new data immediately after it is changed? Without having to reload the whole table?

I have a pretty big table, 21 columns. It is filled with data from the DB, and it includes some fields that are alterable by the user, including one that is for comments that can become rather large. So I added a textarea column to hold them. When I load the table, this column sorts fine. When a checkbox or numeric text input is changed, the sorting can take place immediately. But when the textarea is changed, it sorts as though it still contained the old data. I tried doing a .draw() after the textarea is changed, but it still does not allow me to sort on the new data.

kthorngren

Is sorting enabled for those columns? If so it should sort when updated.

Can you provide a link to a page showing the issue?

Kevin

djremedy

Sorting is enabled, the column sorts, but treats new information as if it was unchanged. It sorts the column in the same way as when the table was first loaded, even though the data has changed.

I will try to work up a fiddle.

gsalinas

I remember having an issue like this, it was pretty annoying .

You're probably looking for something like this: table.rows().invalidate().draw()
You can read more here: https://datatables.net/reference/api/rows().invalidate()

LMK if that works for you.

djremedy

That was exactly what I was looking for, thank you! I had read that command somewhere, so I knew it was out there, but I could not find it when I needed it.

However, it behaved very strangely when I put it in. When it hit this command, it reverted the textarea back to its original content, and broke the sorting on the whole table. However, from that page I found another solution that worked. I am calling this the 30 lb. sledge solution.

var commentTextArea = "<textarea class='commentTextarea' rows='2' id='comm~" + isbn + "'>" +comment + "</textarea>"; $('#isbnTable').DataTable().cell(event.target.parentElement).data(commentTextArea).draw();

This redraws the cell with a new textarea that has the new content. It allows the content to be immediately sortable, which is what I was going for. It does break my event listener, but I can add that back in after the cell is redrawn.

Thank you for pointing me in the right direction!

gsalinas

You're welcome !

I'm still fairly new to DT. So, I can't say much about the strange behavior. I'm glad a solution came from that though.

I'll keep the 30lb Sledge solution in mind. Never know when I might need it .

djremedy

I am new to it as well, this is my first one and it got kind of out of hand. 20 columns, half of them with user inputs, including this one textarea column. It is working very well, though, which is a testament to the library's greatness.