datatables服務端分頁

這樣就可以得到一個初始的DataTables

<!--第一步：引入Javascript / CSS （CDN）-->

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

<!--第二步：新增如下 HTML 程式碼-->
<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table_id_example').DataTable();
} );

只需把查詢資料返回前端，前端自動迴圈渲染

<!--第二步：新增如下 HTML 程式碼-->
<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>名稱</th>
        </tr>
    </thead>
    <tbody>
        @foreach($arr as $val)
        <tr>
            <td>{{$val->id}}</td>
            <td>{{$val->name}}</td>
        </tr>
        @endforeach
    </tbody>
</table>

顧名思義，手動在後端使用程式碼進行分頁

這樣主要是為了，減輕資料庫一次查詢百萬條資料的壓力和防範前端面對百萬條資料進行分頁而產生崩潰的問題

$(document).ready( function () {
    $('#table_id_example').DataTable({
        //開啟服務端分頁
        serverSide:true,
        //分頁
        "paging": true,
        "lengthMenu": [10, 25, 50, 75, 100],
        ajax:{
            //訪問路由地址
            url:'xxxxx',
            type:'get',
        },
        //指定每一列顯示的資料
        columns:[
            //{'data':  '欄位名稱1', "defaultContent":  "預設值", 'className':  '類名'},
            {data:'id'},
            {data:'title'},
            {data:'created_at'},
            //操作列先佔位一下
            {data:'btn'},
        ]
    });
} );

//後端接收資料進行判斷
public function list(Request $request){
        //是否為Ajax請求
        if ($request->ajax()){
            // 開啟位置
            $start=$request->get('start',0);
            // 獲取記錄數
            $length=min(100,$request->get('length',10));
            // 獲取資料
            $data=Article::offset($start)->limit($length)->get();
            // 獲取總數
            $total=Article::count();
            /*
            draw: 客戶端呼叫伺服器端次數標識
            recordsTotal: 獲取資料記錄總條數
            recordsFiltered: 資料過濾後的總數量(和上面記錄總數是一樣的，無需理會)
            data: 獲得的具體資料
            注意：recordsTotal和recordsFiltered都設定為記錄的總條數
            */
            $result=[
                'draw'=>$request->get('draw'),
                'recordsTotal'=>$total,
                'recordsFiltered'=>$total,
                'data'=>$data
            ];
            //返回資料
            return $result;
        }
        return view('list');
    }

解決前面操作列佔位，最常見是按鈕的新增

protected $appends=['btn'];

    function getBtnAttribute(){
        $id=$this->id;
//        return "<button><a href='xdel?id=$id' >刪除</a></button>";
        return "<button value='$id' >刪除</button>";
    }

此處是多條件搜尋

首先關閉自帶搜尋功能

"searching": false,

在datatables上準備一個搜尋表單

外掛例項用一個變數接收

阻止表單預設提交，然後手動呼叫外掛發起ajax提交

function search() {
                    data.ajax.reload();
                    return false;
                }

給datetables新增提交引數，這裡必須要用一個函式

組裝多條件搜尋的條件

然後在查詢語句加如下條件即可

首先在後端程式碼加入如下程式碼段

            //獲取排序資訊陣列
            $orderArr = $request->get('order')[0];

            // 排序索引
            $column = $orderArr['column'];
            // 排序型別 升還是降
            $dir = $orderArr['dir'];
            // 排序欄位
            $orderField = $request->get('columns')[$column]['data'];

查詢構造器，拼接上排序方法

注意bug

另，前端加入如下內容可實現第二列預設進行倒序排序，其他列禁止排序

"columnDefs": [
                        { "orderable": false, "targets": [0,2,3,4,5,6,7,8,9,10] }
                    ],
                    "order":[[ 1, "desc" ]],

本作品採用《CC 協議》，轉載必須註明作者和本文連結