使用DataTables，如何在< td>中指定元素被搜索 [英] Using DataTables, how to specify an element inside a <td> to be searched

问题描述

我正在使用jQuery数据表，我有一个表格，单元格，每个< 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> 
 ... 
  

解决方案

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

  $（'＃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 {
返回数据; 
} 
} 
}] 
}）; 
  

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

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

请参阅手动或示例有关数据 - 属性的更多信息。

I'm using jquery DataTables, and I have a table with cells, each <td> contains a <span> and a hidden <select>, now all I want is to filter on just the text inside the <span> not the whole content of the <td> which also contains the hidden <select> element.

I'm using basic DataTables configuration:

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

I've been trying for a couple of days now on this site, Datatables site , googling, but couldn't find an answer, so please help Thanks in advance

The code is generated on server, but the resulting table is something like this: Please notice that: <select> element is hidden with 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>
        ...

解决方案

You can use the code below to only search <span> inside cells in specific columns. Please note that I've used "targets": [0, 1] to target first and second column only based on your HTML code, adjust according to your needs.

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

Alternatively, you can use data-search attribute on <td> element to specify value used for filtering, then no additional initialization code is required. See below for an example:

<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>

See manual or example for more information on data- attributes.

这篇关于使用DataTables，如何在< td>中指定元素被搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！