AngularJS Datatables sort on checked items

Question

I am using anguarljs Lin Datatables Lin Datatables
The datatables work nice and search,sort works great, but there is a requirement to sort the datatable's on checked items.
For example , when user checks the checkbox and wants to sort on basis of checked items the sorting functionality doesn't work.

Can anyone please suggest how to sort using Lin datatables on basis of check-boxes.
The html code for checking the check-box state is

    <td><input id="{{content.fileName}}" type="checkbox"
value="{{content.fileName}}" ng-model="content.isChecked"
ng-click="toggleSelection(content)" /></td>

I don't know the plugin, but it seems that it orders the tables based on the textcontent of the td-element, though the textcontent of your td-element with checkbox is always an emtpy string. I'm afraid that you have to add text to the td-element, like so <span style="display:none">{{content.isChecked}}</span>. Let me know if this works. — Swimburger
– Swimburger, Commented Mar 25, 2016 at 6:05
@sniels , Thanks i will make it, will let you know once done — Anand Kadhi
– Anand Kadhi, Commented Mar 25, 2016 at 7:22

davidkonrad · Accepted Answer · 2016-03-25 08:40:37Z

2

You should implement the small dom-checkbox plugin. It works with angular dataTables as well :

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

Then set the # column to use dom-checkbox as orderDataType :

DTColumnBuilder
  .newColumn(1)  
  .withTitle('#')
  .withOption('orderDataType', 'dom-checkbox'),

have replicated your scenario here -> http://plnkr.co/edit/kXFzUmcjikUOQliqn02Z?p=preview

answered Mar 25, 2016 at 8:40

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Datatables sort on checked items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related