Sorting selected rows in a datatable with CSS checkbox

Question

I have a datatable with checkboxes similar to this example.

The checkboxes are made using the CSS :after and :before pseudo-elements so the column holding them has no values.

I am programmatically selecting some rows when the user clicks on a button, but would like the selected rows to appear at the top of the table. This is mainly so that the user sees something happening, especially when the selected rows are in non-visible pages.

Here is a fiddle: https://jsfiddle.net/b22kx27s/2/

I've tried looking into custom sort function to bring the selected rows to the top but couldn't figure out how to do it since the column has no values.

Without some sort of data changing in that column, I'm unsure how you can get DataTables to sort by it when you check the box. (Clever use of :before and :after to accomplish those checkboxes!) — random_user_name
– random_user_name, Commented Sep 27, 2016 at 20:10
Agree with cale_b ... you have to store that state somewhere that can be referenced to the row data when internals of plugin do the custom sort. Could be stored in a data store outside the plugin data but makes it a bit trickier doing it that way — charlietfl
– charlietfl, Commented Sep 27, 2016 at 20:19

NicE · Accepted Answer · 2016-09-29 09:11:27Z

7

After looking at this page, I used an order function that for each column, checks if the line of each cell has the selected class:

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
  return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
    return $(td).closest('tr').hasClass('selected') ? '1' : '0';
  } );
}

Using orderDataType: 'dom-checkbox' in the columnDefs for the first columns allows to order by selection.

Here's an updated fiddle: https://jsfiddle.net/s65tjv0v/8/

answered Sep 29, 2016 at 9:11

NicE

21.5k3 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramachandran · Accepted Answer · 2017-08-01 06:28:13Z

0

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

Using orderDataType: 'dom-checkbox' in the columnDefs for the first columns allows to order by selection.

answered Aug 1, 2017 at 6:28

Ramachandran

412 bronze badges

Collectives™ on Stack Overflow

Sorting selected rows in a datatable with CSS checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related