How can I remove the search bar and footer added by the jQuery DataTables plugin

Question

I am using jQuery DataTables    I want to remove the search bar and footer  showing how many rows there are visible  that is added to the table by default  I just want to use this plugin for sorting  basically  Can this be done

User · Answer

You can use sDom attribute  Code looks something like this     document  ready function             example   dataTable             sDom     top i                               It hides search and pager box

User · Answer

this worked for me  table is a Id of table     table   dataTable  searching  false  paging  false  info  false

User · Answer

You could hide them via css    example info   example filter display  none

User · Answer

I have done this by assigning footer an id and then styling using css         lt table border  1  class  dataTable  id  dataTable   dtoItem key    gt        lt thead gt           lt tr gt               lt th gt  lt  th gt            lt  tr gt       lt  thead gt    lt tfoot gt       lt tr gt               lt th id  FooterHidden  gt  lt  th gt       lt  tr gt   lt  tfoot gt   lt tbody gt        lt tr gt                    lt td class  copyableField  gt  lt  td gt        lt  tr gt    lt  tbody gt   lt  table gt    then styling using css     FooterHidden     display  none      As above mentioned ways aren t working for me

User · Answer

As said by  Scott Stafford sDOM is the most apropiated property to show  hide or relocate the elements that compose the DataTables  I think the sDOM is now outdated  with the actual patch this property is now dom   This property allows to set some class or id to an element too  so you can stylish easier   Check the oficial documentation here  https   datatables net reference option dom  This example would show only the table       myTable   DataTable        dom    t

User · Answer

This can be done by simply changing the configuration      table   dataTable         paging  false         info  false        But to hide the empty footer  this piece of code does the trick       table   dataTable         paging  false         info  false           add these config to remove empty header        bJQueryUI   true         sDom    lfrtip

User · Answer

You can also not draw the header or footer at all by setting sDom    http   datatables net usage options sDom   sDom    t     will display JUST the table  no headers or footers or anything   It s discussed some here  http   www datatables net forums discussion 2722 how-to-hide-empty-header-and-footer p1

User · Answer

if you are using themeroller    dataTables wrapper  fg-toolbar   display  none

User · Answer

If you only want to hide the search form for example because you have column input filters or may be because you already have a CMS search form able to return results from the table then all you have to do is inspect the form and get its id -  at the time of writing this  it looks as such tableid -table filter dataTables filter   Then simply do  tableid -table filter dataTables filter display none   retaining all other features of datatables

User · Answer

Just a reminder you can t initialise DataTable on the same  lt table gt  element twice    If you encounter same issue then you can set searching and paging false while initializing DataTable on your HTML  lt table gt  like this       tbl   DataTable       searching  false       paging  false      dom   Bfrtip       buttons            copy    csv    excel    pdf    print

User · Answer

A quick and dirty way is to find out the class of the footer and hide it using jQuery or CSS       dataTables info   hide

User · Answer

As of DataTables 1 10 5 it is now possible to define initialisation   options using HTML5 data-  attributes    -dataTables documentation  HTML5 data-  attributes - table options  So you can specify data-searching  false  data-paging  false  data-info  false  on the table  For example  this table will not allow searching  apply paging  or show the information block    lt table id  example  class  display  width  100   data-searching  false  data-paging  false  data-info  false  gt       lt thead gt           lt tr gt               lt th gt Name lt  th gt               lt th data-orderable  false  gt Avatar lt  th gt               lt th gt Start date lt  th gt               lt th gt Salary lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt Tiger Nixon lt  td gt               lt td gt  lt img src  https   www gravatar com avatar 8edcff60cdcca2ad650758fa524d4990 s 64 amp amp d identicon amp amp r PG  alt    style  width  64px  height  64px  visibility  visible   gt  lt  td gt               lt td gt 2011 04 25 lt  td gt               lt td gt  320 800 lt  td gt           lt  tr gt           lt tr gt               lt td gt Garrett Winters lt  td gt               lt td gt  lt img src  https   www gravatar com avatar 98fe9834dcca2ad650758fa524d4990 s 64 amp amp d identicon amp amp r PG  alt    style  width  64px  height  64px  visibility  visible   gt  lt  td gt               lt td gt 2011 07 25 lt  td gt               lt td gt  170 750 lt  td gt           lt  tr gt              ETC          lt  tbody gt   lt  table gt    See a working example at https   jsfiddle net jhfrench 17v94f2s    The advantage to this approach is that it allows you to have a standard dataTables call  ie     table apply dataTables   DataTable    while being able to configure the dataTables options table-by-table

User · Answer

I think the simplest way is    lt th data-searchable  false  gt Column lt  th gt    You can edit only the table you have to modify  without change common CSS or JS

User · Answer

If you are using custom filter  you might want to hide search box but still want to enable the filter function  so bFilter  false is not the way  Use dom   lrtp  instead  default is  lfrtip   Documentation  https   datatables net reference option dom

User · Answer

For DataTables  gt  1 10  use     table   dataTable  searching  false  paging  false  info  false     For DataTables  lt 1 10  use     table   dataTable  bFilter  false  bInfo  false     or using pure CSS   dataTables filter   dataTables info   display  none

User · Answer

Check out http   www datatables net examples basic init filter only html for a list of features to show hide   What you want is to set  bFilter  and  bInfo  to false     document  ready function             example   dataTable             bPaginate   false           bFilter   false           bInfo   false

User · Answer

lt script gt    document  ready function             nametable   DataTable            bPaginate   false           bFilter   false           bInfo   false              lt  script gt    in your datatable constructor  https   datatables net forums discussion 20006 how-to-remove-cross-icon-in-search-box

User · Answer

var table       datatable   DataTable       paging   false      ordering   false      searching   false

User · Answer

Here you can add to sDom element to your code  top search bar is hidden      document  ready function             example   dataTable     sDom     lt  top  gt rt lt  bottom flp gt  lt  clear  gt

[jquery] How can I remove the search bar and footer added by the jQuery DataTables plugin?

Examples related to jquery

Examples related to html

Examples related to datatables