基于bootstrap + php +ajax datatable 插件的使用

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

下面是我学习datatables写的一个服务器端（php）分页例子，该功能包含的功能 list:

一、在第一列添加checkbox，实现全选功能；　　全选框没有排序按钮

二、在最后一列添加操做按钮

三、隐藏、显示该列字段；字段默认排序

四、薪水千分位、小数点两位格式化

五、内容太多用。。。。截取文字；　　鼠标移上去显示详情

六、替换字符，男字体显示红色，女显示绿色

七、给文字添加超连接

八、同时显示、隐藏多个列的内容

九、单元格所在的行、列高亮显示

十、自定义搜索条件 【时间的处理，关键字的模糊查询（前者没有实现，只是展现双日历的使用，后者实现了功能，前者功能实现相似）】

十一、行内编辑...

 

　　已实现大致功能，解决操做过程当中存在的问题，

　　一、整合操做；操做里面行内编辑，打开页面242行，便可打开删除逻辑（行内编辑会有影响）；固然要实现操做  有编辑、有删除等等，需在整合下行内编辑的操做。作稍微处理便可.

　　二、整合排序按钮；引用jquery-datatable   bootstrap-datatable（三角形状） 会致使排序按钮不一样的样式，而后本身整合 bootstrap-datatable.css实现分页。

　　三、修复模糊查询匹配失败；在实现模糊搜索的时候出现一个问题，就是当条件是createtime的时候，搜索有问题，数据库所有匹配（数据库该字段存的是 2016-12-27 11:50:44的值）。最后发现该字段不作模糊搜索条件时，能够正确匹配。。。（找了大半天。。）

效果如图：

 

 

 

详细学习请参考其官网：http://datatables.net/中文网：http://dt.thxopen.com/

学习datatable以前 能够参考下 常见问题   ，能够 加深 对datatable使用的一些理解。好比：$("#example").dataTable({...}) 和 $("#example").DataTable({...}) 的区别；以及1.10.x与1.9.x参数名对照表 这样在写参数的时候本身写的不会混乱，也易于别人看懂。

而后，附上代码包下载地址（包含sql文件，后台脚本数据库test，用户名root,密码为空）：

连接：http://pan.baidu.com/s/1slOw0Cd 密码：94tg