Python DataTables分页

一、DataTables介绍
官网：https://www.datatables.net/
中文网：http://www.datatables.club/
二、静态文件引用（Django 框架静态引用，在项目根目录static文件夹下）

<script src="{% static "js/datatables/js/jquery.dataTables.js" %}"></script>

三、页面table

	姓名	性别	电话	邮箱	操作

四、页面js

table=$("#example-2").dataTable({
        serverSide:true,//使用服务器交互
        ajax:{
            url:'',//请求地址
            type:''//请求方式
       },
       columns:[
            {
                                "data": "null",
                                "defaultContent": "<i>未知</i>"
                            },
                            {
                                "data": "name",//对应后台json数据的字段
                                "defaultContent": "<i>未知</i>"//字段值为空时默认显示，如果没有默认显示并且值为空则会弹出提醒，如果有render，优先用render内容展示
                            },
                            {
                                "data": "sex",
                                "defaultContent": "<i>未知</i>"
                            },
                            {
                                "data": "phone",
                                "defaultContent": "<i>未知</i>"
                            },
                            {
                                "data": "email",
                                "defaultContent": "<i>未知</i>"
                            },
                            {
                                "data": null,
                                "defaultContent":''
                            }
        ]

});
中文配置：默认情况下分页条是英文的，中文配置如下：

   "language": {
        "lengthMenu": "_MENU_ 条记录每页",
        "zeroRecords": "没有找到记录",
        "info": "从 _START_ 条到 _END_ 条共 _TOTAL_ 条(第 _PAGE_ 页 总共 _PAGES_ 页 )",
        "infoEmpty": "无记录",
        "infoFiltered": "(从 _MAX_ 条记录过滤)",
        "paginate": {
               "previous": "上一页",
               "next": "下一页"
         }
  }

注意：里面字符全是DataTables定义好的不能随意更改
操作按钮配置：
很多时候我们的列表都是有操作或者复选框的
这时候我们可以用render展示表格内容

  columnDefs: [
        {
            targets: 0,//columns里面data的顺序从0开始
            render: function (a, b, c, d) {
                  return '<input type="checkbox" class="cbr" value="'+c.id+'">';
            }
       }
 ]

五：服务器代码

def userlistdata(requst):
    draw = int(requst.GET.get('draw'))#
    start = int(requst.GET.get('start'))
    length = int(requst.GET.get('length'))
    users = User.objects
    totalcount = User.objects.count()
    resultData = users[start:start + length]
    return HttpResponse(InitDataResult(draw=draw, count=totalcount, resultData=resultData),
                    content_type="application/json")
userlistdata方法是用来接受请求，并且获取请求参数查询数据。其中draw、start、length都是DataTables自己定义的参数。还有很多其他的参数，先不做解释。resultData 就是分页以后的结果

def InitDataResult(draw, count, resultData):
    data = {"draw": draw, "recordsTotal": count, "recordsFiltered": count}
    dataResult = []
    for item in resultData:
        dataResult.append(item.toDict())
    data["data"] = dataResult
    # json.dumps(InitDataResult(draw=draw, count=totalcount, resultData=resultData))
    return json.dumps(data);
InitDataResult方法用来封装返回的数据，以便让DataTables进行识别，其中draw参数必须原样返回，recordsTotal是总条数，data中放的是查询结果集。注意这是是一个集合并且已经把类变成了dict的形式。
我再定义User类的时候，类里面加了一个toDict()方法，
        def toDict(self):
            data = self._data;
            for item in data:
                value = data[item]
                if isinstance(value, datetime.datetime):
                    data[item] = value.strftime('%Y-%m-%d %H:%M:%S')
                elif isinstance(value, ObjectId):
                    data[item] = str(value)
            return data
    注意不能序列化的字段要自己做一下处理，否则会报错

后台返回的结果大致如下：
{
“draw”: 1,
“recordsTotal”: 81,
“recordsFiltered”: 81,
“data”: [
{
“name”: “ss4”,
“first_name”: null,
“last_name”: null,
“password”: null,
“phone”: “1888888x4”,
“email”: “abc4@qq.com”,
“sex”: “男”,
“remark”: null,
“birthday”: “2017-12-14 16:03:18”,
“createtime”: “2017-12-14 16:03:18”,
“id”: “5a321647d557d21f0c47ee9c”
}
]
}
到此我们查询数据、展示数据已经完成了。
六、操作数据时更新列表
当我们进行删除或者更新操作时要实时刷新列表
方法就是在操作成功以后调用如下方法：
table.api().ajax.reload();
function DeleteUser(id){
$.ajax({
url:’/deleteUser’,
data:{
id:id
},
success:function(data){
if(data.result)
table.api().ajax.reload();//刷新列表
}
})
}
七、效果展示
1、列表显示

2、分页显示
**