添加排序功能對錶標籤

Question

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

Answer 1

使用jQuery數據表。 請參閱文檔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> 

JS

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