JQuery Datatables sorting a select inside a column

Question

I am using DataTables 1.10.12 and JQuery 1.12.3

I got a problem with sorting a column that have dropdown list inside it

I am using the multi select filter.

All is working fine, prob is that it can't sort the column including the select (that has selected="selected" option) probably because of the value of the option tag in the multi_select that I don't know how to fill

So how could I achieve a search inside the td, maybe with regex, finding those selected option ?

Hi @DipakThoke, I am already using this and that's working good for others columns. My problem off of this system is with a dropdown inside a column ! — Plotisateur
– Plotisateur, Commented Oct 25, 2016 at 11:43
can you give the js fiddle link of efforts you have taken uptil now with dummy data. Thanks — Dipak Thoke
– Dipak Thoke, Commented Oct 25, 2016 at 11:46
@DipakThoke Yes, there the jsfiddle : jsfiddle.net/zkugnpq5. As you can see the column Status don't get sorted on click. Neither with the multi_filter_select method. — Plotisateur
– Plotisateur, Commented Oct 25, 2016 at 12:44

Community · Accepted Answer · 2017-05-23 12:00:00Z

4

SOLUTION

You can use columnDefs to target a specific column using zero-based index in targets option and render to return selected value during searching (type === 'filter') or sorting (type === 'order').

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: [0,1,2,3], 
         render: function(data, type, full, meta){
            if(type === 'filter' || type === 'sort'){
               var api = new $.fn.dataTable.Api(meta.settings);
               var td = api.cell({row: meta.row, column: meta.col}).node();
               data = $('select, input', td).val();
            }

            return data;
         }
      }
   ],
   // ... skipped ...
});

The code above uses values of option elements to determine value to sort/search. However in your updated example, you're using numeric IDs as values.

To use text of option instead, use modified code shown below:

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: [0,1,2,3], 
         render: function(data, type, full, meta){
            if(type === 'filter' || type === 'sort'){
               var api = new $.fn.dataTable.Api(meta.settings);
               var td = api.cell({row: meta.row, column: meta.col}).node();
               var $input = $('select, input', td);
               if($input.length && $input.is('select')){
                  data = $('option:selected', $input).text();
               } else {                   
                  data = $input.val();
               }
            }

            return data;
         }
      }
   ],
   // ... skipped ...
});

Also you need to invalidate cell data once data changes as shown below (according to this solution).

$('tbody select, tbody input', table.table().node()).on('change', function(){
     table.row($(this).closest('tr')).invalidate();
});

DEMO

See updated example for code and demonstration.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 27, 2016 at 16:34

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

2 Comments

Poyson1 Over a year ago

Hi @Gyrocode.com, I know this question was answered many time ago, I recently used it as solution too, however, when I implement this solution for select input, the on change event never fires for all select input elements, how can I make they work again by keeping this solution?

MetalMikester Over a year ago

The code at datatables.net/examples/plug-ins/dom_sort.html also works for this, though to sort on the displayed text rather that the value (which may be an int that has nothing to do with the correct order for displayed text), replace return $('select', td).val(); with return $('option:selected', td).text(); I was able to figure this out thanks to your answer. ;)

Collectives™ on Stack Overflow

JQuery Datatables sorting a select inside a column

1 Answer 1

SOLUTION

DEMO

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SOLUTION

DEMO

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related