Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

DataTables: Search


Hi there,
Was just wondering how I can implement the default search option that datatables.net uses in the top-right of my table. Thanks.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi Aidan,

Are you initializing the DataTable using datatables.net directly in JS? If you are using datatable from the HTML version, check this file for additional configuration:
/metronic_html_v8.2.6_demo1/demo1/src/js/vendors/plugins/datatables.init.js

After modifying any src js file from the HTML version, you need to rebuild the assets.


$.extend(true, $.fn.dataTable.defaults, {
pagingType: "simple_numbers",
dom:
"<"table-responsive"tr>" +
"<"row"" +
"<"col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"li>" +
"<"col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"pf>" + // Include "f" for search box
">",
renderer: "bootstrap"
});


Notice the addition of 'pf' in the dom string where:

'p' stands for the pagination control.
'f' stands for the filtering (search) input.

DataTable should display the default search box in the top-right corner of the table, along with the pagination controls and your custom toolbar and layout. Adjust the classes and layout as per your specific design needs.



Hi Aidan,

Sorry for the delay. we are using yajra datatable. thank you for pointing out bugs. you can refer to the Yajra DataTables documentation. It provides examples for setting up and customizing DataTables in your Laravel project.

Here is the link to the official documentation:
https://yajrabox.com/docs/laravel-datatables/11.0/quick-starter

If you need any further assistance, please let us know!



Keentheme documentation states that it uses datatables.net? Ignore the fact i'm on Laravel as I have implemented the datatable vendor provided by Keen and just added made a new endpoint on my controller to output data for it.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(