datatables插件的使用记录——serverSide服务器模式

简述

先来看看datatables官方对于服务器模式的解释

默认情况下DataTables使用客户端处理模式,但是可以通配置让切换到服务器端处理模式。 当处理大量数据的时候(如超过50000条记录)服务器端处理模式就十分有用。这种情况下可以使用数据库来进行排序操作。 现代的数据库都针对这样的处理进行了优化,使用这样的方式能够让DataTables轻松应付几万条的记录排序、过滤。

使用服务器端处理模式时,DataTables会向服务器端发送必要的参数以说明所需的数据(如页码、过滤条件等)。
同时DataTable也需要从返回的参数中获取显示表格所需的参数。DataTables与服务器端通讯时所使用的协议请参考 ServerSide Document

官方说明:http://datatables.club/reference/option/serverSide.html
好了,现在开始把它用起来
我的使用环境为Django框架

目标与功能

首先,服务器模式需要额外处理以下几项内容,也是我们的处理目标:
1、分页 。最主要的作用,实现也比较简单。
2、排序。datatables默认是支持多有列的排序的,是否要实现、全部实现或者部分实现要视情况而定。
3、搜索。这个也是比较不太容易全实现的。

前端实现

前端dt插件配置要求:
1、数据源必须是ajax
2、开启服务端模式,serverSide: true,

贴一下简单的前端dt代码

    <script>
        var td = $('#table_id_example');
        $(document).ready(function () {
   
            td.dataTable({
   
                dom: '<"top"Bf>rt<"bottom"ilp><"clear">',
                ajax: {
   
                    type: "GET",
                    url: "{% url 'get_draw_list' %}",
                },
                columnDefs: [
                    {
    //设置所有列的缺省内容为空
                        "defaultContent": "",
                        "targets": "_all"
                    },
                    {
   "orderable": false, "targets": 2},
                    {
   "orderable": false, "targets": 3}
                ],

                columns: [ //这些列的数据名会发送到后端
                    {
   data: "id"},
                    {
   data: "agent_user_id"}, //username在数据库里的外键字段
                    {
   data: "name"},
                    {
   data: "mobile"},
                    {
   data: "descriptions"},
                    {
   data: "state"},
                    {
   data: "commission"},
                    {
   data: "mod_date"},
                    {
   data: "check_date"},
                    {
   data: "check_user_id"}
                ],
                order:  // 默认排序规则
                    [
                        [0, 'desc'],
                    ],
                ordering: true,
                serverSide:</
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值