Question

我希望我的整个表格可以编辑。因此，我的所有数据都放在输入中，如：

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

问题是数据表的排序/搜索不是在该输入内搜索。我有想法用它里面的数据隐藏一个跨度，这解决了搜索问题，但没有解决过滤问题。觉得这总体上是一个坏主意。

我觉得最好的方法是修改数据表的默认行为，但我没有在文档中找到我想要的内容。

基本上要缩短这一点，我想：放入每个单元格，包含数据的输入（我已经做过）以及数据表的排序和搜索功能在这些输入中进行搜索。

有没有人曾经做过这样的事情？如果是，是否有“标准方式”这样做？

Answer 1

<强>解

您可以使用columnDefs在targets选项和render中使用从零开始的索引来定位特定列，以便在搜索（type === 'filter'）或排序期间返回所选值（ type === 'order'）。

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

<强>样本

＆＃13;

$(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', '$5,000']).draw(false);
   });
});

＆＃13;

<!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>$3,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>$5,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>$4,800</td>
</tr>

</tbody>
</table>
</body>
</html>

＆＃13;

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

1 个答案: