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