php – 在表标记上添加排序功能

发布时间：2020-12-13 22:28:07 所属栏目：PHP教程来源：网络整理

导读：我正在使用Laravel 5.4 所以我想知道我是否能够在没有实际使用查询的情况下对表中的内容进行排序. 这是我的表结构： table class="table table-hover" tr thID/th thItem/th thTotal Earnings/th thQuantity Sold/th thDate/th /tr thead /thead tbody @fore

我正在使用Laravel 5.4

所以我想知道我是否能够在没有实际使用查询的情况下对表中的内容进行排序.

这是我的表结构：

<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>{{CarbonCarbon::parse($solditem->created_at)->format('j F Y h:i A')}}</td>
            </tr>
        @empty
        @endforelse
    </tbody>
</table>

解决方法

使用Jquery Data表.
见文档 here.

这是CSS和JS的链接

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

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

因此,您需要做的是将以下脚本添加到您的文件中

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

您需要将id =“myTable”添加到表元素中.

UPDATE

首先从上面的链接下载文件,

将css文件放在project / public / css /目录下,将js文件放到project / public / js /目录下,添加如下

CSS

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

HTML

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!