Datatables – Search Box outside datatable

by

You can use the DataTables api to filter the table. So all you need is your own input field with a keyup event that triggers the filter function to DataTables. With css or jquery you can hide/remove the existing search input field. Or maybe DataTables has a setting to remove/not-include it.

Checkout the Datatables API documentation on this.

Example:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

More Related Contents:

  1. jQuery DataTables – Filter column by exact match
  2. How to filter the jqGrid data NOT using the built in search/filter box
  3. datatable jquery – table header width not aligned with body width
  4. Multiple search with multiplefields by default
  5. When using Ajax with jQuery DataTables, how do I determine what to do with the data returned?
  6. Live search through table rows
  7. jQuery DataTables: control table width
  8. Detect page change on DataTable
  9. How to manually update datatables table with new JSON data
  10. Datatables: Cannot read property ‘mData’ of undefined
  11. Datatable date sorting dd/mm/yyyy issue
  12. make column data as hyperlink (dataTable JQUERY)
  13. How to export all rows from Datatables using Ajax?
  14. DataTables – Not working when added colspan for the last column
  15. How can I remove the search bar and footer added by the jQuery DataTables plugin?
  16. Find all elements on a page whose element ID contains a certain text using jQuery
  17. jQuery DataTables Getting selected row values
  18. Filtering with checkboxes using jQuery
  19. Datatables warning(table id = ‘example’): cannot reinitialise data table
  20. How to sort by Date with DataTables jquery plugin?
  21. How to make datatable row or cell clickable?
  22. jQuery dataTable doesn’t show sort icon
  23. JQuery search in static HTML page with highlighting of found word
  24. DataTables fixed headers misaligned with columns in wide tables
  25. jquery filtering has + not
  26. how to store an array in jquery cookie?
  27. How can I change the text color with jQuery?
  28. How to include !important in jquery
  29. Combining LazyLoad and Jquery Masonry
  30. JQuery Ajax is sending GET instead of POST

Leave a Comment