Datatable Row Reorder with Checkboxes and Radio Buttons

Datatable row recorders feature is used in tables using it’s add-on plugin named (dataTables.rowReorder.js). Using this addon we can drag and drop rows in any order we want in the table. This works only if the table is having some unique serial number or ID. Let’s work on the implementation of datatable with row reorder feature.

See Demo Here

Following are basic steps to use jQuery Datatable.

Step 1) Include Javascript and CSS liberaries required.

 

Step 2) Now we need to call Javascript code to initiate Datatables. I have already inline comments in the code below and will also explain it below. We have added a dummy data object.

 

 

Step 3) Add HTML part for a table in which we are binding Data.

 

 

As there is Radio and Checkboxes control in data tables. We are using row reorder in datatables. So normally what happens is whenever we drag and drop a row radio and check boxes, control reset to default dataset. Here we are adding jQuery functions to save radio and checkbox values in an array which will reflect after data is redrawn.

 

Step 4) Also add this additional CSS for adding drag effect on Rows when reordering.

 

We are using following operations to check saved radio and checkbox in “drawCallback” event.

 

You can see the working code example here.

Let me know if you have any challenges during implementation of datatables. 😁😋

Leave a Reply

Your email address will not be published. Required fields are marked *