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 ?

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 ?

• javascript
• jquery
• sorting
• datatables

Share Improve this question Follow edited Oct 27, 2016 at 17:33 Plotisateur asked Oct 25, 2016 at 11:31 PlotisateurPlotisateur 5061010 silver badges2424 bronze badges 5

• do you want column search functionality for data table? – Dipak Thoke Commented Oct 25, 2016 at 11:39
• datatables/examples/api/multi_filter.html like this – Dipak Thoke Commented Oct 25, 2016 at 11:40
• 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 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 Commented Oct 25, 2016 at 11:46
• @DipakThoke Yes, there the jsfiddle : jsfiddle/zkugnpq5. As you can see the column Status don't get sorted on click. Neither with the multi_filter_select method. – Plotisateur Commented Oct 25, 2016 at 12:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.