jQuery插件DataTables分页开发心得体会


Posted in jQuery onAugust 22, 2017

写Blog目的:不是为人气,只是留份笔记;??虏灰?簦?慌掠幸怕??院笙氩黄鹄础?/p>

官网: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,以为这两个集合值可以不同,所以。。。。多走了些路。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
You might like
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
详解js的六大数据类型
2016/12/27 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python查看模块安装位置的方法
2018/10/16 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python如何实现定时器功能
2020/05/28 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
python实现三种随机请求头方式
2021/01/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
应征英语教师求职信
2013/11/27 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
四年级小学生评语
2014/12/26 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Python如何将list中的string转换为int
2022/07/15 Ruby