基于bootstrap + php +ajax datatable 插件的使用
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 插件的使用的更多相关文章
- daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- 基于bootstrap的分页插件
之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...
- 基于Bootstrap的对话框插件bootstrap-dialog
写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
随机推荐
- Mybatis学习记录
参考资料: <深入理解mybatis原理> MyBatis的架构设计以及实例分析
- ubuntu实现ramdisk
1. linux内核提供了16个ramdisk供使用者使用,只需格式化,并挂在便可以使用.查看 ls /dev/ram* 2. 修改配置文件: sudo gedit /etc/default/grub ...
- Notif
<?php/** * 支付宝通知接口 * @author YinKu.Alan * @date 2016-03-06 */class NotifyAction extends CommonAct ...
- ios中调用友盟分享时qq可以分享但是微信失败,只显示文字,网页链接没有出现
问题如下,最后在老大各种替换的情况下,找到了原因,是因为图片失效了,友盟分享微信时必须需要图片才可以,如果服务器图片失效,则会失败: 注意下面的图片是否能够获取???????????????????? ...
- Nginx中FastCGI配置优化
FastCGI: FastCGI是从CGI发展改进而来的.传统CGI接口方式的主要缺点是性能很差,因为每次HTTP服务器遇到动态程序时都需要重新启动脚本解析器来执行解析,然后结果被返回给HTTP服务器 ...
- Linux用过的命令
-上传sudo -u b2b rz--创建文件夹sudo -u b2b mkdir--copysudo -u b2b cp /b2b/apache-tomcat-7.0.64/matt/DqN017S ...
- 解决OX10.11.4 不能授权的问题
Did apple server have some maintenance? Open your Terminal and put this command sudo mkdir -p /Users ...
- 转:HAR(HTTP Archive)规范
HAR(HTTP Archive),是一个用来储存HTTP请求/响应信息的通用文件格式,基于JSON.这个格式的出现可以使HTTP监测工具以一种通用的格式导出所收集的数据,这些数据可以被其他支持HAR ...
- oracle 解锁
解决方法如下: 1:查V$DB_OBJECT_CACHE SELECT * FROM V$DB_OBJECT_CACHE WHERE name='CRM_LASTCHGINFO_DAY' AND LO ...
- css3知识
一.box-sizing 属性 规定两个并排的带边框的框 二.align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 值: flex-start:弹性盒子 ...