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> 

see manual or example more information on data- attributes.


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -