根据 select 元素的值搜索和排序

Question

我希望我的整个 table 成为 editable。因此我所有的数据都放在一个输入中，就像这样：

<td>
    <input class="form-control dnsinput" type="text" value="{{ line.host }}" />
</td>

问题是数据 table 的 ordering/search 没有在该输入内搜索。我有想法做一个隐藏其中数据的跨度，这解决了搜索问题，但不是过滤问题。总的来说感觉这是个坏主意。

我觉得最好的方法是修改 datatables 的默认行为，但我没有在文档中找到我想要的东西。

基本上为了缩短这个时间，我想：在每个单元格中放入一个包含数据的输入（我已经做过），并且数据的排序和搜索功能 table 会在这些输入中进行搜索。

有没有人做过这样的事情？如果是，是否有 "standard way" 这样做？

Answer 1

SOLUTION

您可以在搜索 (type === 'filter') 或排序 (type === 'order') 期间使用 columnDefs to target a specific column using zero-based index in targets option and render 到 return 所选值。

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: [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;
         }
      }
   ]
});

此外，您还需要在数据更改后使单元格数据无效，如下所示（根据 this solution）。

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

DEMO

$(document).ready(function (){
   
   var table = $('#example').DataTable({
      columnDefs: [
         { 
           targets: [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;
           }
        }
      ]
   });
  
   $('tbody select, tbody input', table.table().node()).on('change', function(){
       table.row($(this).closest('tr')).invalidate();   
   });
  
   // For testing purposes: make sure newly added rows also work
   $('#btn-add').on('click', function(){
      table.row.add(['John Dow', 'Janitor', '<select><option selected>Edinburgh</option><option>New York</option><option>San Francisco</option></select>', '<input type="text" value="23">', '2011/07/25', ',000']).draw(false);
   });
});

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
  
<body>
<p><button id="btn-add">Add row</button>
<table id="example" class="display" width="100%">
<thead>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Tiger Nixon</td>
  <td>System Architect</td>
  <td><select><option>Edinburgh</option><option selected>New York</option><option>San Francisco</option></select></td>
  <td><input type="text" value="61"></td>
  <td>2011/04/25</td>
  <td>,120</td>
</tr>
<tr>
  <td>Garrett Winters</td>
  <td>Director</td>
  <td><select><option selected>Edinburgh</option><option>New York</option><option>San Francisco</option></select></td>
  <td><input type="text" value="63"></td>
  <td>2011/07/25</td>
  <td>,300</td>
</tr>
<tr>
  <td>Ashton Cox</td>
  <td>Technical Author</td>
  <td><select><option>Edinburgh</option><option>New York</option><option selected>San Francisco</option></select></td>
  <td><input type="text" value="66"></td>
  <td>2009/01/12</td>
  <td>,800</td>
</tr>

</tbody>
</table>
</body>
</html>

根据 select 元素的值搜索和排序

Search and sort based on the value of the select element

javascript

jquery

datatables