Datatables - Search Box outside datatable

Question

I m using DataTables  datatables net  and I would like my search box to be outside of the table  for example in my header div    Is this possible

User · Answer

You could move the div when the table is drawn using the fnDrawCallback function           myTable   dataTable        fnDrawCallback   function  oSettings                dataTables filter   each function                    this  appendTo   this  parent   siblings   panel-body

User · Answer

As per  lvkz comment     if you are using datatable with uppercase d  DataTable     this will return a Datatable API object   use this      oTable search   this  val    draw       which is  netbrain answer    if you are using datatable with lowercase d  dataTable     this will return a jquery object    use this      oTable fnFilter   this  val

User · Answer

More recent versions have a different syntax   var table       example   DataTable         myInput is a  lt input type  text  gt  element     myInput   on  keyup change   function          table search this value  draw          Note that this example uses the variable table assigned when datatables is first initialised  If you don t have this variable available  simply use   var table       example   dataTable   api         myInput is a  lt input type  text  gt  element     myInput   on  keyup change   function          table search this value  draw          Since  DataTables 1 10      Source  https   datatables net reference api search

User · Answer

This should be work for you  DataTables 1 10 7   oTable       myTable   dataTable         myInputTextField   on  keyup change   function      oTable api   search   this  val    draw         or  oTable       myTable   DataTable         myInputTextField   on  keyup change   function      oTable search   this  val    draw

User · Answer

If you are using JQuery dataTable so you need to just add  bFilter  true  This will display default search box outside table and its works dynamically  as per expected        archivedAssignments   dataTable                    sPaginationType    full numbers                    bFilter  true                   sPageFirst   false                   sPageLast   false                   oLanguage                      oPaginate                          sPrevious     lt  lt  previous                        sNext     Next  gt  gt                         sFirst     lt  lt                         sLast     gt  gt                                                         bJQueryUI   false               bLengthChange   false               bInfo  false               bSortable  true

User · Answer

example   DataTable       bProcessing   true      bServerSide   true      sAjaxSource       admin ajax loadtransajax php       fnServerParams   function  aoData               Initialize your variables here            I have assign the textbox value for  text min val          var min val       min   val       push to the aoData         aoData push  name   text min val   value min val              fnCreatedRow   function  nRow  aData  iDataIndex             nRow  attr  id    tr     aData 0             nRow  attr  name    tr     aData 0             nRow  attr  min    tr     aData 0              nRow  attr  max    tr     aData 0                In loadtransajax php you may receive the get value   if    GET  text min val          sWhere    WHERE           sWhere      t group no LIKE       mysql real escape string   GET  text min val                  sWhere

User · Answer

I want to add one more thing to the  netbrain s answer relevant in case you use server-side processing  see serverSide option    Query throttling performed by default by datatables  see searchDelay option  does not apply to the  search   API call  You can get it back by using   fn dataTable util throttle   in the following way   var table       myTable   DataTable    var search     fn dataTable util throttle      function val            table search val  draw               400     Search delay in ms         mySearchBox   keyup function         search this value

User · Answer

You can use the sDom option for this   Default with search input in its own div   sDom    lt  search-box r gt lftip    If you use jQuery UI  bjQueryUI set to true    sDom    lt  search-box r gt  lt  H lf gt t lt  F ip gt     The above will put the search filtering input element into it s own div with a class named search-box that is outside of the actual table   Even though it uses its special shorthand syntax it can actually take any HTML you throw at it

User · Answer

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   lt input type  text  id  myInputTextField  gt    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

User · Answer

This one helped me for DataTables Version 1 10 4  because its new API  var oTable       myTable   DataTable            myInputTextField   keyup function       oTable search    this  val     draw

User · Answer

I had the same problem  I tried all alternatives posted  but no work  I used a way that is not right but it worked perfectly  Example search input  lt input id  quot searchInput quot  type  quot text quot  gt    the jquery code     listingData   dataTable     responsive  true     quot bFilter quot   true    show search input        quot  listingData filter quot   addClass  quot hidden quot       hidden search input     quot  searchInput quot   on  quot input quot   function  e       e preventDefault           listingData   DataTable   search   this  val    draw

[jquery] Datatables - Search Box outside datatable

Examples related to jquery

Examples related to search

Examples related to datatables

Examples related to filtering