写Blog目的：不是为人气，只是留份笔记；啰嗦不要紧，只怕有遗漏，以后想不起来。

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

开发环境：Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5

按我项目的开发过程简单整理。

1、第一版本，无分页。

在此之前有用到过DataTables（更多的是easyui中的Datagrid，另之前服务端是PHP），因此想着前端/客户端差异不大，服务端反正都是按规范格式返回JSON串（Django的代码后续再整理）。另外，刚开始也没想着表格分页，只是有三个字段排序需求（排序已在服务端做好并返回）。
DataTables基础代码：

//表格的HTML代码略过
$('#dtList').DataTable({
        "bPaginate": false, //翻页功能
        "bInfo": false,//页脚信息
        "ordering": false, //不排序
        "searching": false,  //搜索框，不显示
        "bLengthChange": false, //改变每页显示数据数量，不显示
        "iDisplayLength": 10,  //每页默认显示数量（不显示了，这个设置也起不了作用）
        "serverSide":true, //服务端
        "retrieve":false, //意思是如果已经初始化了，则继续使用之前的Datatables实例。

        "ajax": {
          "type": "POST",
          "url": "/manage/getlist/",
          "data":{'csrfmiddlewaretoken': '{{ csrf_token }}'}, //Django的token值
          "dataSrc": function (result) { //使用dataSrc属性来设置获取到的数据格式，其值是服务端拼好的key-value（数据字段名称-字段值）【服务端走了弯路，后续有时间再写文章说明】
            var json = JSON.parse(result).data;
            return json;
          }
        },
        "columns": [ //表格要显示的列定义(字段名称做了处理)
          { "data": "field0",
            "visible":false,
            "render": function ( data, type, full, meta ) {
              //return '<input type="checkbox"/>';
              return data;
            }
          },
          { "data": "field1" },
          { "data": "field2" , //此列名要与服务端返回的JSON串中的值一致
            "render": function ( data, type, full, meta ) {
              return '<div style="text-align:left">'+data+'</div>';
            }
          },
          //其余字段定义省略
          ]
        });

2、加上分页功能

第一个程序写好几天后就准备加上分页功能。
DataTables的JSON串格式要求：

{
  "draw": n, 
  "recordsTotal": n, //总记录数
  "recordsFiltered": n, //条件过滤后的记录数，与总记录数可能会不同
  "data": [{}] //获取到的记录集合
}

按照之前处理easyui中Datagrid组件的经验，得到总记录数，筛选后的记录数等值，拼好JSON串回传就行，客户端可以直接实现分页。

可是，问题来了：draw的值怎么控制？

查了资料，也跟踪了下浏览器的header，知道draw是DataTables本身的一个属性值 ，每次获取数据时都会向服务端传，不需要改这个值，直接在JSON串中回传就好。试了下，不知道问题出在哪，好像分页也不行，而且总感觉这种控制方法有点累。

换个思路再查资料，就是服务端分页（按需请求相应数据），还真有：django-datatables-view（datatables for django，https://pypi.python.org/pypi/django-datatables-view），按其安装步骤来就好，这样子就不用考虑JSON串几个值怎么拼的问题了，这个组件会做好。

改进后的前端代码：

$('#dtList').DataTable({
    "bPaginate": true, //翻页功能
    "bInfo": true,//页脚信息
    "ordering":true, //开启排序
    "searching": false, //搜索框，不显示
    "bLengthChange": true, //改变每页显示数据数量，不显示
    "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //每页显示记录菜单选项
    "iDisplayLength": 10, //每页默认显示数量
    "serverSide":true, //开启服务端请求模式
    'pagingType': 'full_numbers',
    "retrieve":true,

    "ajax": { //这边就不需要dataSrc属性来处理值了
     "type": "GET",
     "url": "{% url 'scheme_list_json' %}",
     "data":{
      'sSearch':'',
      'csrfmiddlewaretoken': '{{ csrf_token }}'},
     },
    "columns": [ //表格要显示的列定义
     { "data": 0,
      "visible":false,
      "render": function ( data, type, full, meta ) {
       //return '<input type="checkbox"/>';
       return data;
      }
     },
     { "data": 1
     "bSortable":false
     },
     { "data": 2,
      "bSortable":false, //此字段不排序
      "render": function ( data, type, full, meta ) {
       return '<div style="text-align:left">'+data+'</div>';
      }
     },
     //其余字段定义省略
     ......
     ],
    "aaSorting": [ //指定排序的列（索引从0开始）及规则
     [ 8, "asc" ],
     [ 9, "asc" ],
     [ 10, "desc" ]
     ],
    "drawCallback": function( settings ) { //绘制表格时的回调函数
     $("th").removeClass("sorting_asc"); //删除排序图标，升序样式
     $("th").removeClass("sorting_desc");//降序样式 
   });

排序成功，但问题来了：开启排序功能后，表头行中会有排序的图标，但我们不需要它（只是排序，不需要点击），所以加上上面代码中的drawCallback回调函数，去掉其样式就好。
PS：
有个坑-服务端的回传字段和排序字段的列数一定要一一对应，前端DataTables显示字段columns定义也要按这个顺序来，否则前端排序会乱，如：

 # 需要显示的字段
 columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz'] 

 # 排序
 order_columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz']

刚接触django-datatables-view，以为这两个集合值可以不同，所以。。。。多走了些路。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuer  # dataTables  # 分页  # Asp.net MVC 中利用jquery datatables 实现数据分页显示功能  # jquery DataTable实现前后台动态分页  # jquery dataTable 后台加载数据并分页实例代码  # jquery datatable服务端分页  # ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意  # jQuery DataTables插件自定义Ajax分页实例解析  # JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探  # jQuery实现Table分页效果  # 服务端  # 每页  # 不需要  # 就好  # 来了  # 回传  # 翻页  # 回调  # 官网  # 的是  # 都是  # 客户端  # 升序  # 几个  # 会有  # 有个  # 走了  # 第一个  # 是有 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  高端建站三要素：定制模板、企业官网与响应式设计优化  如何用景安虚拟主机手机版绑定域名建站？  如何在企业微信快速生成手机电脑官网？  郑州企业网站制作公司,郑州招聘网站有哪些？  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  如何在腾讯云服务器快速搭建个人网站？  重庆市网站制作公司,重庆招聘网站哪个好？  如何快速上传自定义模板至建站之星？  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  如何用AI帮你把自己的生活经历写成一个有趣的故事？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  如何在自有机房高效搭建专业网站？  如何在阿里云通过域名搭建网站？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何正确选择百度移动适配建站域名？  如何在阿里云虚拟主机上快速搭建个人网站？  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  bootstrap日历插件datetimepicker使用方法  Laravel Fortify是什么，和Jetstream有什么关系  Windows Hello人脸识别突然无法使用  高防服务器租用首荐平台，企业级优惠套餐快速部署  JavaScript如何实现音频处理_Web Audio API如何工作？  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  网站制作大概多少钱一个,做一个平台网站大概多少钱？  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  高端智能建站公司优选：品牌定制与SEO优化一站式服务  HTML 中动态设置元素 name 属性的正确语法详解  如何在阿里云ECS服务器部署织梦CMS网站？  西安专业网站制作公司有哪些,陕西省建行官方网站？  phpredis提高消息队列的实时性方法(推荐)  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  深圳网站制作平台,深圳市做网站好的公司有哪些？  网站优化排名时，需要考虑哪些问题呢？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  Android中AutoCompleteTextView自动提示  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Laravel如何使用Service Container和依赖注入？（代码示例）  高性能网站服务器配置指南：安全稳定与高效建站核心方案  如何快速搭建高效服务器建站系统？  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)