Search

I did all what was written at docs but now I have both bootstrap and dataTables icons ... [IMG]http://i62.tinypic.com/1z6xq3c.png[/IMG]

Never mind, json.records[i]['data'] was an array

Yes, if you use server-side processing (which I didn't know before, sorry), you would use draw since your would need to update this on every draw. Allan

You the icons and the CSS also fall under the MIT license. This applies for all of DataTables extensions presented on this site as well, with the exception of Editor which is commercial software. Allan

at the bottom when sorting the table. You will

Thanks Allan - as soon as I have an update on this I can update this thread too!

Got it working with the following code: $('.mainTable tfoot th:lt(7)').each( function () { var title = $('.mainTable thead th').eq( $(this).index() ).text(); $(this).html( '<input style="width:100%;" type="text" placeholder="Search '+title+'" />' ); } ); // DataTable var table = $('.mainTable').DataTable({ "pagingType": "full_numbers", "iDisplayLength": 5, "aoColumnDefs": [{ "bSortable": false, "aTargets": [ 7 ] }], "order": [[ 0, "desc" ]], "oLanguage": { "sLengthMenu": 'Display <select>' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '<option value="-1">All</option>' + '</select> records' } }); // Apply the search table.columns( ':lt(7)' ).every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { that .search( this.value ) .draw(); } ); } ); Thanks!

Good to hear you found it. For anyone else interested order is the option to set the default ordering. Allan

dataTables_scrollBody is the class under which entire body is genearted with the header..

Finally, I made it work :-) Hope it can help someone else. Notice: if (i == 1) { because I need select input only on 2nd column... $(document).ready(function() { $('#LoM1').dataTable({ "info": false, "paging": false, "columnDefs": [{ "targets": [2, 3, 7], "orderable": false }, { "targets": [4, 5], "type": 'date-eu' }, ], orderCellsTop: true, initComplete: function() { var api = this.api(); $('#LoM1 thead tr#forFilters th').each(function(i) { if (i == 1) { var column = api.column(i); var select = $('<select><option value=""></option></select>').appendTo($(this)).on('change', function() { var val = $.fn.dataTable.util.escapeRegex( $(this).val()); column.search(val ? '^' + val + '$' : '', true, false).draw(); }); column.data().unique().sort().each(function(d, j) { select.append('<option value="' + d + '">' + d + '</option>') }); } }); } }); });