Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 list: 1.在第一列添加checkbox,实现全选功能: 全选框没有排序按钮 2.在最后一列添加操作按钮 3.隐藏.显示该列字段:字段默认排序 4.薪水千分位.小数点两位格式化 5.内容太多用....截取文字: 鼠标移上去显示详情 6.替换字符,男字体显示红色,女显示绿色 7.给文字添加超链接…

在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel"> <div class="input-group" id="id_search_date"> <span>按开站时间查询:</span> <span class="add-on input-group…

首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css&qu…

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),…

Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.浏览器兼容性: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 1.引入css和js文件 注意:分页样式用BootStrap 的,如果单独使用,请去BootStrap中把分页样式拷出来.jQuery版本需要1.8及以上. <lin…

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" /> <script type="text/javascript&…

    按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstrap2 <link href="bootstrap.css" rel="stylesheet"> <link href="bootstrap-switch.css" rel="stylesheet"> &l…

之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. 注意:js的导入顺序,jquery优先导入并且版本要2.x.中文乱码:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 其中:bootstrap-paginator.js下…

写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得比较不好分离.所以最后还是选择使用了基于bootstrap的一个对话框插件bootstrap-dialog(对bootstrap的模态框进行的封装).这里简单记录一下自己认为常用的功能吧. 还是来看看代码吧,下面的代码实现的功能是,点击按钮,以对话框的形式打开一个jsp页面,然后可以点击‘关闭按钮’…

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text…