dataTable实现服务器端分页(python)

     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>

js

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=\"#\" οnclick=\"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")
        });

python代码：

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')

dataTable的排序和搜索功能不能用，需要自己实现。

参考文章：

http://blog.csdn.net/roeny/article/details/19006247

http://692088846.iteye.com/blog/1962970

http://www.cnblogs.com/zhoujie/p/js3.html