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:</
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DataTables是一个强大的jQuery表格插件,它可以快速地将HTML表格转换成可排序、可搜索、可分页的数据表格。下面是DataTables插件使用步骤: 1. 引入必要的文件 首先需要在HTML文件中引入jQuery和DataTables的相关文件。例如: ``` <!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 DataTables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script> ``` 2. 创建HTML表格 在HTML文件中创建一个普通的表格,例如: ``` <table id="example"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tom</td> <td>25</td> </tr> <tr> <td>2</td> <td>Jerry</td> <td>28</td> </tr> <tr> <td>3</td> <td>Mary</td> <td>30</td> </tr> </tbody> </table> ``` 3. 初始化DataTables 使用jQuery的`DataTable()`函数初始化表格,例如: ``` $(document).ready(function() { $('#example').DataTable(); }); ``` 这样就可以将表格转换为可排序、可搜索、可分页的数据表格了。 还可以通过配置参数来定制表格的样式、功能等。例如: ``` $(document).ready(function() { $('#example').DataTable({ "paging": false, // 禁用分页 "searching": false, // 禁用搜索 "ordering": false, // 禁用排序 "info": false // 禁用信息显示 }); }); ``` 以上就是DataTables插件使用步骤,希望可以帮到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值