Question

我正在使用DataTables 1.10.12和JQuery 1.12.3

我在排序列中有下拉列表的列时遇到了问题

我正在使用多选滤镜。

一切正常，问题是它无法对包括select（已选择=“已选择”选项）的列进行排序，可能是因为multi_select中的option标签的值我不知道如何填写

那么我怎样才能在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作为值。

要使用option的文字，请使用以下修改后的代码：

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以获取代码和演示。

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

1 个答案:

解

样本