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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Node.js的特点详解
2017/02/03 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
幼儿园教学管理制度
2014/02/04 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
民事答辩状格式范文
2015/05/21 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技