python3 安装datatable_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标签,表头和表尾信息，必须有表头信息;

可以不用，dataTables.js可以动态加载

First nameLast namePositionOfficeStart dateSalary

First nameLast namePositionOfficeStart dateSalary

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样式

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