使用数据表，如何在 <td> 中指定要搜索的元素

Question

我正在使用 jquery 数据表，我有一个带有单元格的 table，每个 <td> 包含一个 <span> 和一个隐藏的 <select>，现在我只想过滤 <span> 内的文本，而不是 <td> 的全部内容，后者还包含隐藏的 <select> 元素。

我正在使用基本的 DataTables 配置：

$(document).ready( function () {
    $('#table_id').DataTable();
} );

我已经在这个站点 Datatables 站点上尝试了几天，谷歌搜索，但找不到答案，所以请帮忙提前谢谢

代码是在服务器上生成的，但是生成的 table 是这样的： 请注意： <select> 元素被 css

隐藏

<tr>
     <td>
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
        </td>
    <td>
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
        </td>   
        </tr>
        ...

Answer 1

您可以使用下面的代码只搜索 <span> 特定列的单元格内。请注意，我使用 "targets": [0, 1] 仅根据您的 HTML 代码定位第一列和第二列，请根据您的需要进行调整。

$('#table_id').DataTable({
   "columnDefs": [{
      "targets": [0, 1],
      "render": function ( data, type, full, meta ) {
         if(type === 'filter'){
            return $('#table_id').DataTable().cell(meta.row, meta.col).nodes().to$().find('span').text();
         } else {
            return data;
         }
      }
   }]
});

或者，您可以在 <td> 元素上使用 data-search 属性来指定用于过滤的值，这样就不需要额外的初始化代码。请参阅下面的示例：

<tr>
    <td data-search="Text">
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
    </td>
    <td data-search="Text">
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
    </td>   
</tr>

有关 data- 属性的详细信息，请参阅 manual or example。

使用数据表，如何在 <td> 中指定要搜索的元素

Using DataTables, how to specify an element inside a <td> to be searched

javascript

jquery

jquery-datatables

datatables-1.10