dataTable有兩種分頁方式: 一種是頁面分頁(把資料一次性載入到頁面，然後再分頁)，另一種是伺服器端分頁. 由於後臺資料較多，採用頁面分頁耗時太長，頁面分頁還有一個弊端，就是除了第一頁，後面的頁面中的button都不能用，點選這些button沒響應，要重新載入一下頁面，button才可以使用，種種弊端，懶得找原因了，就把頁面分頁換成伺服器端分頁。

html

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1">
                    <thead>
                        <tr>
                            <th style=" width:60px;">
                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" id="select_all" name="select_all"/>
                                    <span></span>
                                </label>
                            </th>
                            <th> 組名 </th>
                            <th> 成員數目 </th>
                            <th> 備註 </th>
                            <th> 操作 </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
 

var table = $("#sample_1");
        var table_init = table.DataTable({
            "bDestroy" : true,
            "bProcessing" : true, //DataTables載入資料時，是否顯示‘進度’提示
            "bServerSide" : true, //是否啟動伺服器端資料匯入
            "bStateSave" : true, //是否開啟客戶端狀態記錄功能,此功能在ajax重新整理紀錄的時候不會將個性化設定回覆為初始化狀態
            "aLengthMenu" : [[5, 15, 20, -1], [5, 15, 20, "All"]], //更改顯示記錄數選項
            "iDisplayLength" : 5, //預設顯示的記錄數
            "bPaginate" : true, //是否顯示（應用）分頁器
            "bInfo" : true, //是否顯示頁尾資訊，DataTables外掛左下角顯示記錄數
            "sPaginationType": "bootstrap_full_number",
            "aaSorting" : [[2, "desc"]], //預設的排序方式，第2列，降序排列
            "bFilter" : true, //是否啟動過濾、搜尋功能
            "aoColumns" : [{
                "sDefaultContent" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"> \
                                        <input type="checkbox" class="checkboxes" value="" /> \
                                        <span></span> \
                           </label>', //此列預設值為""，以防資料中沒有此值，DataTables載入資料的時候報錯
                "bSortable":false //此列不排序
                }, {
                    "mData" : "name",
                    "sTitle" : "組名",
                    "sDefaultContent" : "",
                    "bSearchable":true
                }, {
                    "mData" : "users",
                    "sTitle" : "成員數目",
                    "sDefaultContent" : ""
                }, {
                    "mData" : "comment",
                    "sTitle" : "備註",
                    "sDefaultContent" : ""  ,
                    "bSortable":false   //此列不需要排序
                },  {
                    "mData" : "",
                    "sTitle" : "操作",
                    "sDefaultContent" : "",
                    "bSortable":false
                }],
                "oLanguage": { //國際化配置
                    "sProcessing" : "正在獲取資料，請稍後...",
                    "sLengthMenu" : "顯示 _MENU_ 條",
                    "sSearch": "搜尋:",
                    "sZeroRecords" : "沒有您要搜尋的內容",
                    "sInfo" : "從 _START_ 到  _END_ 條記錄 共 _TOTAL_ 條記錄",
                    "sInfoEmpty" : "記錄數為0",
                    "sInfoFiltered" : "(共顯示 _MAX_ 條資料)",
                    "sInfoPostFix" : "",
                    "oPaginate": {
                        "sFirst" : "第一頁",
                        "sPrevious" : "上一頁",
                        "sNext" : "下一頁",
                        "sLast" : "最後一頁"
                    }
                },
                /*
                * 設定操作列的值
                */
                "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
                    op_del = '<a class="del" name=\"/group/del/?id=' + aData.id + '\">刪除</a> ';
                    op_edit = '<a href=\"#\" onclick=\"editGroup('+aData.id+')\">編輯</a>';
                    op_html = '<div class="btn-group"> \
                            <button class="btn btn-xs green dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Actions\
                                <i class="fa fa-angle-down"></i> \
                            </button> \
                            <ul class="dropdown-menu" role="menu"> \
                                <li>' + op_edit + '</li>\
                                <li>' + op_del + '</li>\
                            </ul>\
                        </div>';
                    $('td:eq(4)', nRow).html(op_html);
                    $('td:eq(0) input', nRow).val(aData.id.toString());
                    return nRow;
                },
                //伺服器端，資料回撥處理
                "fnServerData" : function(sSource, aDataSet, fnCallback) {
                    $.ajax({
                        "dataType" : 'json',
                        "type" : "post",
                        "url" : sSource,
                        "data" : aDataSet,
                        "success" : function(resp){
                            fnCallback(resp);
                        }
                    });
                }
        });

        table.find(".group-checkable").change(function() {
            var e = $(this).attr("data-set"),
            t = $(this).is(":checked");
            $(e).each(function() {
                t ? ($(this).prop("checked", !0), $(this).parents("tr").addClass("active")) : ($(this).prop("checked", !1), $(this).parents("tr").removeClass("active"))
            })
        });
        table.on("change", "tbody tr .checkboxes", function() {
                 $(this).parents("tr").toggleClass("active")
        });
 

if request.method == 'GET':
        user_all = User.objects.all()
        return my_render('userManage/group_list.html', locals(), request)
    else:
        page_length = int(request.POST.get('length', '5'))
        total_length = UserGroup.objects.all().count()
        keyword = request.POST.get("search")
        rest = {
            "iTotalRecords": page_length,   # 本次載入記錄數量
            "iTotalDisplayRecords": total_length,  # 總記錄數量
            "aaData": []}
        page_start = int(request.POST.get('start', '0'))
        page_end = page_start + page_length
        page_data = UserGroup.objects.all()[page_start:page_end]
        data = []
        for item in page_data:
            res = {}
            res['id'] = item.id
            res['name'] = item.name
            res['users'] = item.user_set.all().count()
            res['comment'] = item.comment
            data.append(res)
        rest['aaData'] = data
        return HttpResponse(json.dumps(rest), content_type='application/json')
 

參考文章：