datatable的使用

datatable

中文官网：http://datatables.club/

所需文件：

• <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
  

• <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
  

一、数据的获取与生成

HTML部分

<div class="bk-panel bk-demo" id="bk_side_panel">
    ...
    <div id="panel-content1" class="bk-panel-body p0">
        <table class="bk-table" id="organization">
            <thead>
                <tr>
                    <th>所属组织</th>
                    <th>负责人</th>
                    <th>可申报人员</th>
                    <th>更新人</th>
                    <th>申报时间</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
    </div>
    ...
</div>

对于html部分，可以删除全部的form-body部分和之前创建的分页器部分，仅剩下头部即可。

然后在table标签添加id即可。

JS部分

var orgTable = $('#organization').DataTable({
    sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',
    pagingType: "full_numbers", // 分页器的按钮类型
    paging: true, //隐藏分页
    ordering: false, //关闭排序
    info: true, //隐藏左下角分页信息
    searching: false, //关闭搜索
    pageLength: 5, //每页显示几条数据
    lengthChange: false, //不允许用户改变表格每页显示的记录数
    serverSide: true,  // 在服务器端进行数据处理
    lengthMenu: [5, 10, 25, 50, 75, 100],  // 设置每页的数据量
    ajax: {  // 通过ajax请求数据
        url: '/get_org_list/',
        method: "get",
        dataType: 'json',
        data: function (d) {
            d.search_award_name = $('#search_award_name').val();
            d.search_org_name = $('#search_org_name').val();
            d.search_status = $('#search_status_option:selected').val();
            d.search_apply_time = $('#search_apply_time').val();
            d.csrfmiddlewaretoken = "{{ csrf_token }}";
        },
        dataSrc: function (json) { // 转化获得的数据，
            json.recordsTotal = json.data.info.recordsTotal;
            json.recordsFiltered = json.data.info.recordsFiltered;
            json.data = json.data.info.data
            return json.data;
        },
    },
    columnDefs: [
        {
            targets: 0,
            data: "org_name",
        },
        {
            targets: 1,
            data: "principal",
        },
        {
            targets: 2,
            data: "apply_person",
        },
        {
            targets: 3,
            data: "operator",
        },
        {
            targets: 4,
            data: "create_time",
            className: "text-center",
        },
        {
            targets: 5,
            data: "id",
            render: function (data, type, row, meta) {
                return  '<a class="bk-icon-button bk-warning bk-button-mini" type="button" οnclick="editOrgForm(' + data + ')" title="编辑">\n' +
                    '<i class="bk-icon icon-file bk-icon"></i>\n' +
                    '<i class="bk-text">编辑</i>\n' +
                    '</a>\n' +
                    '<a class="bk-icon-button bk-danger bk-button-mini" type="button" οnclick="deleteOrgForm(' + data + ')" title="关闭">\n' +
                    '<i class="bk-icon icon-close bk-icon"></i>\n' +
                    '<i class="bk-text">删除</i>\n' +
                    '</a>\n';
            }
        }
    ]
})

js部分有过多的参数，可以灵活调用，详细可以看官方文档：http://datatables.club/reference/option/

后端部分

def get_org_list(request):
    """
    获取组织信息列表数据
    正常操作：通过url获取page和page_lenght。但是如果使用datatable则需要获取start进行计算
    """
    start = int(request.GET.get("start"))
    organizations = Organization.objects.filter(is_delete=False)  # 通过modal获取数据
    total = len(organizations)  # 获取所有数据的长度
    page_length = int(request.GET.get("length", 5))  # 获取每页的数据量，如果没有则默认5条
    page = start // page_length + 1

    paginator = Paginator(organizations, page_length)

    # 如果获取的页面大于总页面，则将页面换成最后一页
    if page > paginator.num_pages:
        page = paginator.num_pages
    if page < 0:
        page = 1

    organizations = paginator.get_page(page)
    result_data = []
	
    # 序列化所需的数据
    for organization_item in organizations:
        result_data.append(
            {
                "id": organization_item.id,
                "org_name": organization_item.org_name,
                "principal": ",".join(organization_item.principal.values_list("username", flat=True)),
                "apply_person": ",".join(organization_item.apply_person.values_list("username", flat=True)),
                "operator": organization_item.operator,
                "create_time": organization_item.create_time.strftime("%Y-%m-%d %H:%M:%S")
            }
        )
    
    # 将数据通过json格式进行返回
    return JsonResponse({
        "result": True, "code": 200,
        "data": {
            "info": {
                'data': result_data,
                "recordsTotal": total,
                "recordsFiltered": total,
            }
        }
    })

对于后端而言，因为使用了datatable自带的分页器，因此每次需要获取一个start（即当前页面开始的数据）。然后通过每页的数据量来计算出所求的page。