datatables 配套bootstrap3样式使用小结(1)
今天介绍汇总一下datatables。
网址: www.datatables.net
公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。
先上一个基本的效果图.
(图片太宽了,换了另一个模板)
介绍一下这个demo的实现。
首先是引用 js+css。
js有4个,①jquery,②bootstrap3,③datatables的js,④datatables对应bootstrap样式时用的。
为了说明问题,就不放bundle里面了。
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Content/datatables/js/jquery.dataTables.js"></script> <script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>
然后是css。
有2个,①bootstrap3,②datatables对应bootstrap样式(要用这个替换datatables默认的样式,否则会出现右下角的分页样式margin很大的情况。)
<link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
下面是html
<div class="panel panel-default"><div class="panel-heading"><div class="panel-title">基本的datatables</div></div><div class="panel-body"><table id="table_local" class="table table-bordered table-striped table-hover"><thead><tr><th>ID</th><th>FirstName</th><th>LastName</th><th>EnrollmentDate</th><th>Discriminator</th></tr></thead>@if(Model.Count() > 0) {<tbody>@foreach(var p in Model) {<tr><td>@p.PersonID</td><td>@p.FirstName</td><td>@p.LastName</td><td>@p.EnrollmentDate.GetValueOrDefault().ToString("yyyy-MM-dd HH:mm:ss")</td><td>@p.Discriminator</td></tr>}</tbody>}</table></div> </div>
然后是js
<script type="text/javascript">$(function () {$("#table_local").dataTable({//lengthMenu: [5, 10, 20, 30],//这里也可以设置分页,但是不能设置具体内容,只能是一维或二维数组的方式,所以推荐下面language里面的写法。paging: true,//分页ordering: true,//是否启用排序searching: true,//搜索language: {lengthMenu: '<select class="form-control input-xsmall">' + '<option value="1">1</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。search: '<span class="label label-success">搜索:</span>',//右上角的搜索文本,可以写html标签paginate: {//分页的样式内容。previous: "上一页",next: "下一页",first: "第一页",last: "最后"},zeroRecords: "没有内容",//table tbody内容为空时,tbody的内容。//下面三者构成了总体的左下角的内容。info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。infoEmpty: "0条记录",//筛选为空时左下角的显示。infoFiltered: ""//筛选之后的左下角筛选提示,},paging: true,pagingType: "full_numbers",//分页样式的类型});$("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框,不写这个就超出去了。});</script>
执行js之后,如果没有报错,那就会得到最上面的效果图。四个编号上的内容都是可以通过传入datatable()方法控制的。其中要注意,方法名是dataTable而不是DataTable,后者用于api的操作。
通过浏览器的开发者工具可以看到,四个控制块的id分别为table的id 加上 length,filter,info,paginate,所以如有需要,可以直接用js来强制控制。
编号②中的搜索框是输入内容后自动搜索表格上的所有列(当然可以通过他的api来实现搜索特定的列,比如某些隐藏列的筛选)。
图如下:
通过以上4个控制,基本可以满足大部分table列表的需求。
这样的table属于一次性加载完所有数据,然后再调用js格式化。
晚上再写用ajax异步加载数据datatable。
转载于:https://www.cnblogs.com/telwanggs/p/7214241.html
datatables 配套bootstrap3样式使用小结(1)相关推荐
- datatables 配套bootstrap样式使用小结(2) ajax篇
距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...
- html input type=quot;filequot;,科技常识:关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
- html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结,优先级:由高到低(从上到下)- phpStudy...
CSS中的各种选择器与样式优先级小结 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性 元素:(0,0,0,1 ...
- html input选择框样式修改,关于type=file的input框样式修改小结
关于type="file"的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了. 上传按钮 ...
- 前台CSS样式使用小结
最近做Vue前台相关的项目, 使用了一些前台CSS的知识, 作为笔记mark一下吧 1. 关于定位 **水平居中:** 文字(text-align: center;); 元素: (margin: 0p ...
- css常用样式个人小结
常用的css 1.css的书写方式 选择标签{ 书写样式 每一个样式结束,必须加分号 所有符号都是英文 k:v; k:v } 外联(外链):link 工作中需要使用 ...
- JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
- bootstrap-干货小结
190710-初识bootstrap-容器与按钮 样式名,响应式容器 container样式名,流体容器 container-fluid响应式查询区间,三个区间对应四个响应,写出模型 100% [76 ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
最新文章
- java数据类型转化_JAVA基本数据类型及其转换
- android 之开关控件的使用
- 传到虚拟主机在线人数不显示的解决办法
- 校外分散实习(14)
- php 连接oracle乱码,PHP查询oracle数据显示乱码问题
- pygame精灵组有哪些方法_利用 pygame 开发一款游戏:「跳跳兔」(六)
- servlet3.0理解
- redis入门(转)
- Padavan完整编译教程
- cherry 键盘失灵记录
- JavaScript的document对象详解
- 使用 CSS 创建自定义鼠标光标
- [激光原理与应用-59]:激光器 - 光学 - 脉冲激光器的参数解析(能量、脉冲、周期、功率)
- 弗兰克赫兹实验计算机仿真实验报告,大学物理实验
- 腾讯视频怎么下载 qlv视频怎么转换为MP4格式
- conv、deconv、fractional-strided conv
- 电脑的dns服务器未响应怎么解决,电脑DNS服务器未响应怎么解决
- 可重入锁/不可重入锁,公平锁/非公平锁,乐观锁/悲观锁,独享锁/共享锁,偏向锁/轻量级锁/重量级锁,分段锁,自旋锁
- 基于Java的航空售票管理系统
- 角膜炎是由什么引起的?
热门文章
- 网络协议:ARP协议
- Spark源码分析之Master注册机制原理
- 留言系统 php 防攻击,php 留言板防刷新
- (14)Verilog HDL参数:parameter
- 做形态学方法的团队_做好形态学实验教学准备工作的几点体会
- php一个入口 nginx 自动带斜线,Nginx 自动加斜杠
- httpclient依赖_.NetCore 3.1高性能微服务架构:封装调用外部服务的接口方法HttpClient客户端思路分析...
- 线程:信号量 sem_wait sem_post
- c语言左(<<)右(>>)移
- 【LeetCode】【HOT】101. 对称二叉树(BFS+队列/递归)