javascript - Search and sort based on the value of the select element -
i whole table editable. data placed inside input, :
<td> <input class="form-control dnsinput" type="text" value="{{ line.host }}" /> </td> the problem ordering/search of datatables not searching inside input. had idea span hidden data inside it, solved search problem, not filtering one. felt bad idea overall.
i feel best way modify datatables's default behaviour, didn't find wanted in docs.
basically shorten up, : put in every cell, input containing data (that did) , ordering , searching functionnalities of datatables go , search inside inputs.
has ever had such thing? if yes, there "standard way" of doing ?
solution
you can use columndefs target specific column using zero-based index in targets option , render return selected value during searching (type === 'filter') or sorting (type === 'order').
var table = $('#example').datatable({ columndefs: [ { targets: [2, 3], render: function(data, type, full, meta){ if(type === 'filter' || type === 'sort'){ var api = new $.fn.datatable.api(meta.settings); var td = api.cell({row: meta.row, column: meta.col}).node(); data = $('select, input', td).val(); } return data; } } ] }); also need invalidate cell data once data changes shown below (according this solution).
$('tbody select, tbody input', table.table().node()).on('change', function(){ table.row($(this).closest('tr')).invalidate(); }); demo
$(document).ready(function (){ var table = $('#example').datatable({ columndefs: [ { targets: [2, 3], render: function(data, type, full, meta){ if(type === 'filter' || type === 'sort'){ var api = new $.fn.datatable.api(meta.settings); var td = api.cell({row: meta.row, column: meta.col}).node(); data = $('select, input', td).val(); } return data; } } ] }); $('tbody select, tbody input', table.table().node()).on('change', function(){ table.row($(this).closest('tr')).invalidate(); }); // testing purposes: make sure newly added rows work $('#btn-add').on('click', function(){ table.row.add(['john dow', 'janitor', '<select><option selected>edinburgh</option><option>new york</option><option>san francisco</option></select>', '<input type="text" value="23">', '2011/07/25', '$5,000']).draw(false); }); });<!doctype html> <html> <head> <meta charset=utf-8 /> <title>jquery datatables</title> <link href="//cdn.datatables.net/1.10.7/css/jquery.datatables.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://cdn.datatables.net/1.10.7/js/jquery.datatables.min.js"></script> </head> <body> <p><button id="btn-add">add row</button> <table id="example" class="display" width="100%"> <thead> <tr> <th>name</th> <th>position</th> <th>office</th> <th>age</th> <th>start date</th> <th>salary</th> </tr> </thead> <tbody> <tr> <td>tiger nixon</td> <td>system architect</td> <td><select><option>edinburgh</option><option selected>new york</option><option>san francisco</option></select></td> <td><input type="text" value="61"></td> <td>2011/04/25</td> <td>$3,120</td> </tr> <tr> <td>garrett winters</td> <td>director</td> <td><select><option selected>edinburgh</option><option>new york</option><option>san francisco</option></select></td> <td><input type="text" value="63"></td> <td>2011/07/25</td> <td>$5,300</td> </tr> <tr> <td>ashton cox</td> <td>technical author</td> <td><select><option>edinburgh</option><option>new york</option><option selected>san francisco</option></select></td> <td><input type="text" value="66"></td> <td>2009/01/12</td> <td>$4,800</td> </tr> </tbody> </table> </body> </html>
Comments
Post a Comment