Question

我正在使用jquery DataTables，我有一个包含单元格的表格，每个<td>包含一个<span>和一个隐藏的<select>，现在我想要的只是过滤<span>内的文字，而不是<td>的整个内容，其中也包含隐藏的<select>元素。

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

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

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

代码是在服务器上生成的，但结果表是这样的： 请注意： <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>。请注意，我已根据您的HTML代码使用"targets": [0, 1]定位第一列和第二列，并根据您的需要进行调整。

$('#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;
         }
      }
   }]
});

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

<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或example。

使用DataTables，如何指定要搜索的元素

1 个答案: