javascript-使用DataTables,如何在要搜索的内部指定元素

我正在使用jquery DataTables,并且我有一个包含单元格的表,每个< td>包含< span>和隐藏的< select&gt ;,现在我只想过滤< 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>
        ...

解决方法:

您可以使用下面的代码仅搜索< 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>

有关数据属性的更多信息,请参见manual或example.

标签：javascript,jquery,jquery-datatables,datatables-1-10
来源： https://codeday.me/bug/20191011/1894396.html