row-reorder, column sorting, and checkboxes

row-reorder, column sorting, and checkboxes

martinbarkermartinbarker Posts: 6Questions: 2Answers: 0

Hello, I have a working datatables example here:

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

That does row-reordering and column sorting correctly. You can drag rows by their number columns to re-arrange their order. You can also sort columns (like the 'Name' column) and the number '#' field will still display the correct numbers.

I'm trying to add a checkbox to each field with a 'select all' option in the column header, I have it working at the start, but if you sort the rows, rearrange them, or search, the checkbox fields disappear.

How can I ensure that the 'checked' status of each row remains the same and doesn't reset to 'unchecked' whenever the rows are rearranged / searched / sorted?

Thanks

Answers

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,945

    I would look at updating the checkbox cell with the status of the checkbox. I updated one of my examples to include RowReorder:
    http://live.datatables.net/qatadire/1/edit

    I did a few tests and it looks like it works :smile:

    Kevin

  • martinbarkermartinbarker Posts: 6Questions: 2Answers: 0

    thanks, how did you get the data? from an ajax call? would it be possible to replace this with hardcoded data? im trying to add a 'select all' button to your example

  • martinbarkermartinbarker Posts: 6Questions: 2Answers: 0
    edited August 2020

    on thing i noticed from your link ( http://live.datatables.net/qatadire/1/edit )

    clicking on a column to sort the table changes the ID order, I am trying to make it so the ID order only changes when you manually re-arrange the columns, clicking 'name' to sort by name should keep the ID's in their order

    I added hard-coded data and a 'select all' feature here:

    im trying to change the code on this link: http://live.datatables.net/nudajoru/1/edit?html,js,console so that the id's dont change order when i sort a column. I added hard-coded data and a select-all feature. The last part I need is to make the ID col only change when you manually re-order it. I have this feature working in my original post, but its implemented in a different weird way that im trying to make work for http://live.datatables.net/nudajoru/1/edit?html,js,console but am having trouble

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,945

    on thing i noticed from your link ( http://live.datatables.net/qatadire/1/edit )
    clicking on a column to sort the table changes the ID order,

    The example is a quick example to show one way you can keep the checkboxes checked when reordering. It came from another example and isn't intended to be a complete solution.

    that the id's dont change order when i sort a column.

    Maybe the Index Column example will help.

    Kevin

  • martinbarkermartinbarker Posts: 6Questions: 2Answers: 0

    thank you, I remade my example using the index column here:
    http://live.datatables.net/foxuhuqu/1/edit?html,js,output

    I have row-reordering working with this index column in most cases, but I've found two bugs I'm trying to fix and need some help:

    1) If I sort a row (such as clicking then 'FirstName' col to sort the table) it breaks the row-reordering, and when I drag rows by their ID to reorder them, the values dont update. This remains broken until you reload the page

    2) clicking 'select all' breaks row reordering, after you click the select all checkbox, dragging rows to reorder them breaks and wont work until you reload the page

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,945

    1: The key to RowReorder is that the index column is sorted when dragging the rows. Sorting by another column negates the RowReorder ordering. RowReorder swaps the index values to keep the table in order. The code you have for indexing should run only once, not each time the table is order or searched. Move that code inside initComplete.

    One you order by a different column how do you want to reset the order back to the index column before reordering the table? The order() can be used for this.

    2: This one is easier. You need to turn off ordering of the checkbox column. When you click the Select All it is also ordering that column.

    I updated your example to use orderable false on the checkbox column. I moved the index code into initComplete.
    http://live.datatables.net/foxuhuqu/5/edit

    The last step is to decide how you are going to handle reverting the ordering back to the index column when you want to reorder the table. This solution is based on your requirements. The simplest would be to enable ordering of that column.

    Kevin

  • kthorngrenkthorngren Posts: 21,299Questions: 26Answers: 4,945

    Thinking about it you could use the order event to update the indexes if the user orders by a different column. You might not want to do the same with searching because that might have a negative affect on how the indexes work. You will need to test to see.

    Even if you do this the index column will need to be the sorted column when using RowReorder.

    Kevin

This discussion has been closed.