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

javascript

datatable

ui-customization

javascript-options

byNikita Barsukov·Jan 6, 2025

Strip out DataTables' search bar and footer by tweaking the initialization options: set searching: false and info: false options. For further refinement, adjust the DOM positioning using dom: 'lrtip', excluding 'f' and 'i' which stand for the filtering input and table information elements.

$('#example').DataTable({
  // Nuh-uh. No searching for you
  searching: false,
  // No info for the Misinfo Age
  info: false,
  // Arrange your DOM elements as needed. Go nuts (but not too nuts, ok?)
  dom: 'lrtip'
});

If you're using DataTables versions prior to 1.10, use bFilter: false and bInfo: false. Replace bPaging: false with paging: false using the respective notation for your version to remove pagination controls, keeping things spick and span.

Finer controls for savvy users

The art of DOM layout customizing

Customize the dom property to freely define the placement of DataTables' interface features. The default order, lfrtip, can be rearranged or simplified to your heart's content.

$('#example').DataTable({
  // As fuss-free as a minimalist's linens
  dom: 'lrtip' 
});

The "in-your-CSS-face" approach

Not a fan of options and settings? Go the CSS way:

.dataTables_filter, .dataTables_info { 
  display: none; 
  //Nada. Gone. Kaput. 
}

Toggle sorting like a pro

Disable sorting if not required by setting ordering: false:

$('#example').DataTable({
  //Sorting? Not on this watch!
  ordering: false
});

Taking it up a notch

Wisdom of the crowd

Don't underestimate the power of the DataTables forums. It's a treasure trove of real-world solutions from a global community.

Documentation is your best friend

For an in-depth study on sDom usage and customization, nothing beats the official DataTables documentation.

Practical examples to the rescue

Ever heard of learning by example? DataTables examples bring that right to your screen with real scenarios and tailored solutions.

Version-specific tweaking

Ensure you adjust plugin settings contingent on the version of DataTables you are using to avoid compatibility issues.

UI customization on steroids

Delve into DataTables documentation on feature customization to tailor the datatable UI exactly to your application's requirements.

explain-codes / Javascript / How can I remove the search bar and footer added by the jQuery DataTables plugin?

Linked

How to remove pagination in DataTable



Datatables warning(table id = 'example'): cannot reinitialise data table



Html table headers always visible at top of window when viewing a large table



Alternate table row color using CSS?



How to display scroll bar onto a html table



How to hide columns in an HTML table?



Table header to stay fixed at the top when user scrolls it out of view with jQuery



Finer controls for savvy users Taking it up a notch