JQUERY 基于列值(其中列包含 HTML 数据)的数据表过滤

Question

我有一个表，其中正在应用 JQUERY 数据表插件。一切正常。但我的表的第一列中，每个单元格都包含 HTML 数据。不仅仅是文本。

实际上列内容标记如下。它实际上是一个显示每个用户评分的列。当应用评级时，它看起来像这样

<td style="text-align: center;">
<input type="checkbox" class="row-check"><span class="fa-stack fa-lg star-rating" data-original-title="" title="">
<i class="fa fa-star-o graystar  fa-stack-2x"></i><strong class="fa-stack-1x inside-text">
</strong></span>
</td>

因此，在标记中，您可以看到有一个 Strong 标记，其类为 inside-text，对其进行评分，并且它将显示在 star 内。因此，我尝试创建一个过滤器来搜索或过滤仅搜索第一列内容的表格，以根据第一列中该单元格的 HTML 内容找到特定的评级。

我尝试的方法是

function applyRatingFilter() {
    var table = $('#tbl_main').DataTable();
    var rating = $('.popover').find('.rating').val();
    table.columns(0).search(rating).draw();
}

Answer 1

您可以使用data-search属性 <td>元素指定用于过滤的值。以下是手册的摘录:

DataTables will automatically detect the following attributes on HTML cells:

data-sort or data-order - for ordering data

data-filter or data-search - for search data

示例:

<tr>    
    <td data-search="3">
       <input type="checkbox" class="row-check"><span class="fa-stack fa-lg star-rating" data-original-title="" title="">
       <i class="fa fa-star-o graystar  fa-stack-2x"></i><strong class="fa-stack-1x inside-text">
       3
       </strong></span>
    </td>    
    <td>System Architect</td>    
    <td>Edinburgh</td>    
    <td>61</td>    
    <td>Mon 25th Apr 11</td>    
    <td>$3,120/m</td>
</tr>

参见manual或example欲了解更多信息data-属性。

或者您可以使用render方法，检测过滤事件( type == 'filter' )并返回所需的值。代码$('#example').DataTable().cell(meta.row, meta.col).nodes().to$()返回<td> jQuery 元素。

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