[jQuery]jQuery DataTables插件自定義Ajax分頁實現

時間 2019-11-08

標籤 jquery datatables 插件自定義 ajax 分頁實現欄目 JQuery 简体版

原文原文鏈接

前言

昨天在博客園的博問上幫一位園友解決了一個問題，我以爲有必要記錄一下，萬一有人也趕上了呢。javascript

問題描述

園友是作前端的，產品經理要求他使用jQuery DataTables插件顯示一個列表，要實現分類效果。css

後端的分頁接口已經寫好了，不涉及條件查詢，須要傳入頁碼(pageNo)和頁面顯示數據條數(pageSize)，顯示相應頁的顯示記錄，且不能修改後端接口。html

分析

先來分析下分頁實現。
一是後端分頁：這種狀況下，在後端很容易實現，在官網上有示例，很少說明。
二是前端分頁：前端分頁也是支持的，不過須要一次把全部數據都獲取到才能夠。前端

看到這裏，問題來了。因爲後端在目前的狀況下是更改不了，只能在前端實現。可是，如今又不知足前端分頁的條件：一次性獲取全部數據（如今後端數據接口只能返回相應頁碼的數據）。java

介於目前的狀況，獲取的數據只有一頁，沒有全部的頁碼。
試試能不能假裝一下後端分頁的狀況，就是開啓後端分頁，在請求以前，將傳入的數據進行重組，在獲取到數據後，將返回的數據按照後端分頁的數據格式組裝一遍。jquery

通過測試，是能夠的。ajax

實現

經過DataTables配置參數ajax項實現的。關於ajax詳細介紹請看官方說明：中文 | 英文json

ajax接收三種類型的參數：bootstrap

string：設置獲取數據的url後端
object：和 jQuery.ajax 定義相似
function：自定義獲取數據的功能

直接上代碼吧，都有註釋。
前端頁面代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery DataTables插件自定義分頁ajax實現</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row-fluid">
    <h3>JQuery DataTables插件自定義分頁Ajax實現</h3>
    <table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>編號</th>
            <th>姓名</th>
            <th>性別</th>
        </tr>
        </thead>
    </table>
</div>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        //提示信息
        var lang = {
            "sProcessing": "處理中...",
            "sLengthMenu": "每頁 _MENU_ 項",
            "sZeroRecords": "沒有匹配結果",
            "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
            "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項",
            "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中數據爲空",
            "sLoadingRecords": "載入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "上頁",
                "sNext": "下頁",
                "sLast": "末頁",
                "sJump": "跳轉"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        var table = $("#example").dataTable({
            language:lang,  //提示信息
            autoWidth: false,  //禁用自動調整列寬
            stripeClasses: ["odd", "even"],  //爲奇偶行加上樣式，兼容不支持CSS僞類的場合
            processing: true,  //隱藏加載提示,自行處理
            serverSide: true,  //啓用服務器端分頁
            searching: false,  //禁用原生搜索
            orderMulti: false,  //啓用多列排序
            order: [],  //取消默認排序查詢,不然複選框一列會出現小箭頭
            renderer: "bootstrap",  //渲染樣式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分頁樣式：simple,simple_numbers,full,full_numbers
            columnDefs: [{
                "targets": 'nosort',  //列的樣式名
                "orderable": false    //包含上樣式名‘nosort’的禁止排序
            }],
            ajax: function (data, callback, settings) {
                //封裝請求參數
                var param = {};
                param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
                param.start = data.start;//開始的記錄序號
                param.page = (data.start / data.length)+1;//當前頁碼
                //console.log(param);
                //ajax請求數據
                $.ajax({
                    type: "GET",
                    url: "/hello/list",
                    cache: false,  //禁用緩存
                    data: param,  //傳入組裝的參數
                    dataType: "json",
                    success: function (result) {
                        //console.log(result);
                        //setTimeout僅爲測試延遲效果
                        setTimeout(function () {
                            //封裝返回數據
                            var returnData = {};
                            returnData.draw = data.draw;//這裏直接自行返回了draw計數器,應該由後臺返回
                            returnData.recordsTotal = result.total;//返回數據所有記錄
                            returnData.recordsFiltered = result.total;//後臺不實現過濾功能，每次查詢均視做所有結果
                            returnData.data = result.data;//返回的數據列表
                            //console.log(returnData);
                            //調用DataTables提供的callback方法，表明數據已封裝完成並傳回DataTables進行渲染
                            //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
                            callback(returnData);
                        }, 200);
                    }
                });
            },
            //列表表頭字段
            columns: [
                { "data": "Id" },
                { "data": "Name" },
                { "data": "Sex" }
            ]
        }).api();
        //此處需調用api()方法,不然返回的是JQuery對象而不是DataTables的API對象
    });
</script>
</body>
</html>

JSON數據格式:

效果圖:

本文就介紹到這裏。
期待你的點評。

jQuery DataTables插件自定義Ajax分頁實現

參考:
DataTables官網
 DataTables中文網
 自行封裝請求和返回數據的零耦合服務端分頁