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

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

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

2、在最后一列添加操作按钮

3、隐藏、显示该列字段;字段默认排序

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

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

6、替换字符,男字体显示红色,女显示绿色

7、给文字添加超链接

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

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

10、自定义搜索条件 【时间的处理,关键字的模糊查询(前者没有实现,只是展示双日历的使用,后者实现了功能,前者功能实现类似)】

11、行内编辑...

  已实现大体功能,解决操作过程中存在的问题,

  1、整合操作;操作里面行内编辑,打开页面242行,即可打开删除逻辑(行内编辑会有影响);当然要实现操作  有编辑、有删除等等,需在整合下行内编辑的操作。做稍微处理即可.

  2、整合排序按钮;引用jquery-datatable   bootstrap-datatable(三角形状) 会导致排序按钮不同的样式,然后自己整合 bootstrap-datatable.css实现分页。

  3、修复模糊查询匹配失败;在实现模糊搜索的时候出现一个问题,就是当条件是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

基于bootstrap + php +ajax datatable 插件的使用的更多相关文章

  1. daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

    在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...

  2. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  3. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  4. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  5. 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  6. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  7. 基于bootstrap的分页插件

    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...

  8. 基于Bootstrap的对话框插件bootstrap-dialog

    写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...

  9. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

随机推荐

  1. ssh的原理和流程

    一.strtus:第1步:把上面的jar包下载完成后,先在eclipse中新建一个web工程,新建工程的同时最好选上创建的同时添加web.xml文件 第2步:找到下载并解压好的strtus文件中找到a ...

  2. Google内部邮件:如何进行高效的时间管理能量波动图

    Google内部邮件:如何进行高效的时间管理能量波动图 发布时间: 2015-12-16 22:16:50| 阅读数:462 views 最近,我给团队内部写了一封简单的邮件.主要内容是征询他们,如何 ...

  3. Android Unable to instantiate activity: Didn't find class on path

    Android Unable to instantiate activity: Didn't find class on path After i spend a while on this prob ...

  4. js获取cookie 和 模仿php的&_GET方法

    //获取get参数 function _get(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)( ...

  5. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  6. C++中为什么要将析构函数定义成虚函数

    构造函数不可以是虚函数的,这个很显然,毕竟虚函数都对应一个虚函数表,虚函数表是存在对象内存空间的,如果构造函数是虚的,就需要一个虚函数表来调用,但是类还没实例化没有内存空间就没有虚函数表,这根本就是个 ...

  7. Windbg调试命令详解

    作者:张佩][原文:http://www.yiiyee.cn/Blog] 1. 概述 用户成功安装微软Windows调试工具集后,能够在安装目录下发现四个调试器程序,分别是:cdb.exe.ntsd. ...

  8. Windows下安装Python lxml库(无废话版)

    python官网:python-2.7.12.amd64.msihttps://pypi.python.org/pypi/setuptools:setuptools-28.6.0.zipsetupto ...

  9. spdk intel

    前言 继为SDN和NFV领域带来福音的DPDK之后,英特尔于2015年9月开始,逐步将为NVMe等新一代存储规范优化的Linux性能工具包SPDK(Storage Performance Develo ...

  10. android开发中的问题总结(一)

    1.设置sdk路径 window->preferences->android->SDK location 中进行修改,如果出现红叉,就说明不正确,选择的路径必须包含tools的那个目 ...