javascript - JQuery Datatables 对列内的选择进行排序

Question

我正在使用 DataTables 1.10.12 和 JQuery 1.12.3

我在对其中包含下拉列表的列进行排序时遇到问题

我正在使用多选过滤器。

一切工作正常，问题是它无法对包括选择(具有 selected="selected"选项)的列进行排序，可能是因为 multi_select 中选项标记的值我不知道如何填充

那么我怎样才能在 td 内实现搜索，也许使用正则表达式，找到那些选定的选项？

Answer 1

解决方案

您可以使用columnDefs使用 targets 中的从零开始的索引来定位特定列选项和 render在搜索(type === 'filter')或排序(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 ...
});

上面的代码使用 option 元素的值来确定要排序/搜索的值。但是，在更新的示例中，您使用数字 ID 作为值。

要使用选项的文本，请使用如下所示的修改后的代码:

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 ...
});

此外，一旦数据发生更改，您还需要使单元格数据无效，如下所示(根据 this solution )。

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

演示

参见updated example用于代码和演示。