datatable使用介绍

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

1、支持分页：前台分页和后台分页

前台分页：后台一次把数据传过来，交给前端渲染。缺点：初次渲染时间长；优点：渲染完成后，搜索和排序速度很快

后台分页：前端把每页显示的条数、查询的页数、搜索的内容、排序列等信息传给后端，后端收到这些信息后，去数据库里查询指定页的信息，并统计出总共条数等信息，而后传给前端。缺点：每次排序、搜索、翻页都要去后台查库，耗时；优点：初次渲染快

共同点：随着数据量的增大，二者的查询时间都会变成。但是前台分页，需要网络传输大量的后台信息到前台，网络传输时间长，前端渲染压力大；后台分页每次只传输固定量的数据，网络耗时少，但是查库次数多。总得来看，对于数据量递增的情况，还是选用后台分页

2、其他功能见官网：举例、手册、插件、接口、论坛、博客等，一应俱全。看着样例，比葫芦画瓢总会的

中文官网：http://datatables.club/example/ 里面有大量的信息

英文官网：https://datatables.net/examples/server_side/post.html

3、1.10+版本前后，有些参数名字有调整，但是具有向下兼容性

4、后台分页的例子：https://datatables.net/examples/server_side/

JS代码

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,      //翻页或者搜索的时候，前端是否给出“正在搜索”等提示信息
        "serverSide": true,     // true表示使用后台分页
        "ajax": {
            "url": "scripts/post.php",  // 异步传输的后端接口url
            "type": "POST"      // 请求方式
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

html代码：添加一个table标签,表头和表尾信息，必须有表头信息<thead>; <tbody></tbody> 可以不用，dataTables.js可以动态加载

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

ajax调用后端接口，后端接口返回信息的格式

{
  "draw": 1,       //这个自己不要写，自己写会有问题，系统会默认附带这个参数，而起每次请求，值会自动加一；官方解释这个参数的目的是基于安全角度
  "recordsTotal": 57,  //总条数、总行数
  "recordsFiltered": 57,  //过滤出来的总行数、条数
//下面是前端展示的数据内容
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    }]
}

 

下面是数据表的初始化设置：控制前端界面展示情况

$(function () {
    $('#test-interface-table').dataTable(
      {
          "ajax": {
              "url": "/a/b",
              "type": "POST"
          },
          "processing": true,
          "serverSide": true,
          "bPaginate" : true,//分页工具条显示
          "bFilter" : true, //搜索栏
          "bSort" : false, //是否支持排序功能
          "order": [[3, "desc"]],//默认使用第几列排序
//中文化界面显示
          "language": {
              "lengthMenu": "每页显示 _MENU_条数据",
              "sSearch": "搜索: ",   //搜索框label
              "sSearchPlaceholder":"区域、项目名称、场景名字、执行人", //搜索框里的提示信息placeholder
              {#info: "当前是_PAGE_页，总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。#}
              "info": "第_PAGE_/_PAGES_页, 显示第_START_到第_END_, 搜索到_TOTAL_/_MAX_条",
              "infoFiltered":"", //过滤时的显示信息
              "sProcessing": "正在加载数据，请稍等",  //翻页、搜索时的前端提示信息
              "zeroRecords": "抱歉，没有数据",  //无数据时的前端信息

              paginate: {//分页的样式内容。
                        previous: "上一页",
                        next: "下一页",
                        first: "第一页",
                        last: "最后"
                    }
          }

      }
      );
});

5、dataTable还可以解释bootstrap定制css样式

6、option ajax data 根据参数查询表格数据

dataTables本身是可以把一些参数从前端传给后端的，初次之外，你可以增加从前端传给后端的参数

7、修改搜索框的触发事件：默认是只要键盘弹起(keyup)，就会开始搜索，比如你想搜索‘ab’，当你键盘输入完a再输入b时，会先搜索a，然后搜索ab。要么就把ab粘贴进去，就只会搜索ab，不会搜索a了。

但是我们可以根据下面文章的信息修改搜索触发事件为：回车

http://blog.csdn.net/u012088516/article/details/52423248

8、最后附一个前端搜索的后端执行的python代码：https://www.cnblogs.com/rgcLOVEyaya/articles/RGC_LOVE_YAYA_350days.html

使用sqlalchemy进行多表联合查询，对于搜索内容search_content进行数据库搜索，并对结果根据时间排序，然后根据页码和页面大小筛选

from sqlalchemy import desc, or_

search_result = s.query(Table1, Table2, Table3, Table4) \
                .filter(Table1.delete == False) \
                .filter(Table1.exec_Table4_id == Table4.Table4_id) \
                .filter(Table1.scene_id == Table3.id) \
                .filter(Table1.scene_id == OnlinePerfRelation.scene_id) \
                .filter(Table2.project_id == OnlinePerfRelation.project_id) \
                .filter(or_(Table1.scene_zone.like('%'+search_content+'%'),
                            Table2.project_name.like('%' + search_content + '%'),
                            Table3.scene_name.like('%' + search_content + '%'),
                            # Table1.create_time.like('%'+search_content+'%'),
                            Table4.realname.like('%'+search_content+'%'))).order_by(desc(Table1.create_time)).limit(page_size).offset(page_start).all()

 

参考：

1、http://blog.csdn.net/huaishuming/article/details/52211259

2、http://blog.csdn.net/shya_/article/details/55510480

3、http://blog.csdn.net/tomcat_2014/article/details/50177645

4、http://blog.csdn.net/KokJuis/article/details/53925783

5、https://github.com/ssy341/datatables-cn

6、http://blog.163.com/huajin_226/blog/static/1773512302014812256921/

7、http://www.datatables.club/manual/daily/2016/04/21/option-ajax-data.html