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.
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:
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.
