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

How to integrate cross-components logic?


So, I just started using Metronic in my company and I'm working on emulating what a colleague has selected and composed from the Html demo (some lists, some filters, some dashboard elements, etc.).

At the start I've struggled a lot, the Laravel documentation is truly meagre and the overall explanation of how the template works, how its components talk to each and so is lacking from a junior perspective.

Anyway, I managed to get a custom DataTable element inside a custom view, which is taking most of the Laravel's demo user-management/users route-view. The table in itself is perfect, as much as the standard Laravel demo and the standard Html demo.

Now, I wanted to offer the user the ability to filter the row based on the date in a rows' column. I've taken the kt_datepicker_7 and pasted it in the blade:


<div class="input-group w-250px">
<input class="form-control form-control-solid" placeholder="Pick date range" id="kt_datepicker_7" />
<button class="btn btn-icon btn-light" id="kt_datepicker_7_clear">
<span class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></span>
</button>
</div>


then I pushed its JS:


$("#kt_datepicker_7").flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
mode: "range"
});


So, now, could you tell me how I actually use the input value as a filter on the table's row? There's not straightforward answer to this I could find..
In the HTML demo the filtering logic seems to be expressed in the sr\js\custom\apps\ecommerce\sales\listing.js file:


var handleSearchDatatable = () => {
const filterSearch = document.querySelector("[data-kt-ecommerce-order-filter="search"]");
filterSearch.addEventListener("keyup", function (e) {
datatable.search(e.target.value).draw();
});
}


that file is present also in the Laravel demo and it's using the same selectors, id, classes and logic.
So, giving I included the JS with the .flatpickr() method shouldn't I receive all of its logic? Do I need to actually use the @push directive to include ALL of the listing.js file logic inside my view? How do I relate the DataTable and the date range picker and its selected value?


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 (2)


Hi Lore Porre

Sorry for the delay. The DataTable we are using is Yajra DataTables. You can find the official documentation at https://yajrabox.com/docs/laravel-datatables/11.0/quick-starter.

Hopefully, this guide will help.
https://yajrabox.com/docs/laravel-datatables/11.0/filter-column

Let us know if you need further help.

Thank you



Thanks Faizal, I'll try to implement Datatables Laravel API to make a filtered call on the table.
Much appreciated!


Deleted comment
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  :(