DavidBuchukuri's avatar

sorting html table on header click

I have html table inside a blade, filled with statistics data which comes from mysql database. I need to sort this data is descending order when field's header is clicked. if it's clicked again I have to sort it in ascending order. Also there are multiple fields. how should i go about this?

0 likes
4 replies
eterlinden's avatar

Hey @davidbuchukuri ,

This is a feat that is not the simplest to implement. You will have to find some kind of datatables package to use within your application.

If you are using a plain Laravel installation you could go, yes I hate to even mention it, the jQuery route.

https://appdividend.com/2022/02/28/laravel-datatables/

It's been a long time since I've done anything outside the Vue.js and Livewire worlds, so I can't give you an opinion on the package mentioned above.

It seems to be a popular choice still, and might help you get an idea of things.

Cheers.

1 like
chiefguru's avatar

@davidbuchukuri we don't display a great deal of information, up to 50 events in peak times, but we use data tables to allow students to sort our events schedule any which way they want to.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>

It was pretty easy to get working.

jlrdw's avatar

@davidbuchukuri you do not need a "datatable" for this. Just use fetch js and load server fetched partial in an object. Have back end ORDER BY however you need. Of course you'll setup an addEventListener() to handle this.

Of course jquery would also work if you are already familiar with it.

2 likes

Please or to participate in this conversation.