Add sort function in table tag

Question

I am using Laravel 5.4

So, I wanted to know if I can sort things in my table without actually using queries.

Here is my table structure:

<table class="table table-hover">
    <tr>
        <th>ID</th>
        <th>Item</th>
        <th>Total Earnings</th>
        <th>Quantity Sold</th>
        <th>Date</th>
    </tr>
    <thead>
    </thead>
    <tbody>
        @forelse($solditems as $solditem) 
            <tr>
                <td>{{$solditem->item_id}}</td>
                <td>{{$solditem->item}}</td>
                <td>{{$solditem->subtotal}}</td>
                <td>{{$solditem->qty}}</td>
                <td>{{\Carbon\Carbon::parse($solditem->created_at)->format('j F Y h:i A')}}</td>
            </tr>
        @empty
        @endforelse
    </tbody>
</table>

Answer 1

Use the jQuery data table. see docs here .

Here are the links for CSSandJS

http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

So you need to add the following script to your file

$(document).ready(function(){
    $('#myTable').DataTable();
});

You need to add id="myTable"a table to your element.

UPDATE

First download the files from the links above,

CSS project/public/css/ JS project/public/js/,

CSS

<link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap.min.css') }}">

HTML

<table id="customTable">
    ....
</table>

JS

<script src="{{ asset('js/jquery.dataTables.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.customTable').DataTable();
    });
</script>