Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Showing default column search datatable


how to show default search field in datatable,

I tried this method, but it doesn't appear


$("#table").dataTable({
"searching": true
});


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Visually, stickman hook is sleek and minimalist, which actually helps me focus more on gameplay. There’s no unnecessary clutter—just clean colors, simple obstacles, and smooth animations. It keeps you in the zone and lets your movement speak for itself.



Ok thanks



Were you able to show the search bar after following @Faizal's reply?



Hi Jatinika.

Are you using the HTML version?

The default search DOM has been removed by default for the Metronic custom layout. You can check this file and look for the default DOM modification. You can remove this code block to make the datatable use the default DOM with the search input.

src/js/vendors/plugins/datatables.init.js


$.extend( true, DataTable.defaults, {
dom:
"<"table-responsive"tr>" +

"<"row"" +
"<"col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"li>" +
"<"col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"p>" +
">",

renderer: "bootstrap"
} );


Thanks



I did remove this block of code on datatables.init.js but the search bar is still not showing up. Is there anything else I need to do? I am using Metronic v8.1.7.


$("myTable").DataTable({
"searching": true
});


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(