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