javascript - Using DataTables, how to specify an element inside a <td> to be searched -
i'm using jquery datatables, , have table cells, each <td>
contains <span>
, hidden <select>
, want filter on text inside <span>
not whole content of <td>
contains hidden <select>
element.
i'm using basic datatables configuration:
$(document).ready( function () { $('#table_id').datatable(); } );
i've been trying couple of days on site, datatables site , googling, couldn't find answer, please in advance
the code generated on server, resulting table this: please notice that: <select>
element hidden 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 code below search <span>
inside cells in specific columns. please note i've used "targets": [0, 1]
target first , second column based on html code, adjust according 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, can use data-search
attribute on <td>
element specify value used filtering, no additional initialization code required. see below 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>
Comments
Post a Comment