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

Question

我有一个表，其中正在应用JQUERY Datatable插件。事情很好。但是我表的第一列，每个单元格都包含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>

因此，在标记中，您可以看到有一个强类标记，其中包含内部文本类，并且会在星级内显示评级。因此，Iam尝试制作一个过滤器来搜索或过滤单独搜索第一列内容的表格，以根据第一列中该单元格的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将自动检测HTML单元格上的以下属性：

     

data-sort或data-order - 用于订购数据

     

data-filter或data-search - 搜索数据

示例：

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

有关data-属性的详情，请参阅manual或example。

或者，您可以使用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;
         }
      }
   }]
});