CODEWITHSUNDEEP
jquerydatatables
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

JQUERY Datatable filtering based on a column value in which the column contains HTML data

I've a Table in which am appying JQUERY Datatable plugin. Things works fine. But my first column of the table, each cells contains HTML data. Not just text alone.

enter image description here

Actually the column content markup is as follows. Its actually a column which shows rating for each users. When a rating is applied it looks like this

enter image description here

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

So in the markup as you can see there is a Strong tag with a class inside-text to which the rating is given and it will show inside the star. So Iam trying to make a filter to search or filter the table in which the first column content alone to be searched to find a specific rating based on the HTML content of that cell in first column.

The way I tried is

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

Upvotes: 2

Views: 2433

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58890

You can use data-search attribute on <td> element to specify value used for filtering. Below is an excerpt from the manual:

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

Example:

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

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

Alternatively you can use render method, detect filtering event (type == 'filter') and return desired value instead. Code $('#example').DataTable().cell(meta.row, meta.col).nodes().to$() returns <td> jQuery element.

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

Upvotes: 1

Related Questions