Jquery.Datatables dom表格定位
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角。 这些控件在给大家带来便利的同时,也可能出现困惑。比如我想把l放在i的后面,我想表格的上下都有p,我想加入自己的控件放在l的后面……这些太多了,那么下面就给大家介绍怎么去使用dom属性配置已经自定义。
上面我已经用了一些英文字母标注在每个控件的后面,开始看肯定会有些疑惑,或者不熟悉,不要着急,我来告诉大家这些到底是什么
作者为了适应我们所说的这些情况,已经考虑到了,所以有这么强大的dom属性。那么作者定义了如下字母:
l - Length changing 改变每页显示多少条数据的控件
f - Filtering input 即时搜索框控件
t - The Table 表格本身
i - Information 表格相关信息控件
p - Pagination 分页控件
r - pRocessing 加载等待显示信息
< > - div elements 代表一个div元素
<div><div>
<"#id" > - div with an id 指定了id的div元素
<div id='id'><div>
<"class" > - div with a class 指定了样式名的div元素
<div class='class'><div>
<"#id.class" > - div with an id and class 指定了id和样式的div元素
<div id='id' class='class'><div>
这些字母你可以理解为一个标签,dt会自动把这些字母替换成相应的控件,就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次,其他的均可多次指定。
下面还有两个字母是应用到jQueryUI上的,不过作者推荐在1.10甚至1.11版本中不去使用他,通过使用 jQueryUIDT
来分离开
H - jQueryUI'header'classes (
fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix
)F - jQueryUI'footer'classes(
fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix
)
最后,你也可以添加插件给Datatables,指定新的字母。比如 TableTools就是添加了 T
来表示。在dom里指定之后,相应的按钮就添加到表格上了
注意:dom的用法可能还不是很简单,希望在1.11版本的计划中更加优化这个参数的使用,让表格定位更简单
转载于:https://www.cnblogs.com/tangge/p/5256447.html
Jquery.Datatables dom表格定位相关推荐
- JQuery datatables 给表格添加加载中效果
JQuery datatables 中如果有很多数据的话,加载就会很慢,这时候就需要使用加载中的效果,而datatables是提供了加载中的属性的:processing,加载中的style样式也是 可 ...
- JQuery Datatables Dom 和 Language 参数详细说明
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Dom说明 定义表格控件在页面的显示顺序. 每个控件元素在数据表都有一个关联的单个字母. l - 每 ...
- jQuery DataTables
jQuery DataTables 数据表格控件 资料地址如下:http://www.datatables.net/
- Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能 一.部分技术选型 二.项目结构 三.功能需求和效果展示 四.关键代码 4.1页 ...
- jQuery - (JQuery datatables api 使用解读)
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解 学习可参考:http://www.g ...
- JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
- 前端控件JQuery Datatables使用——常用功能初始化
本文用于自己记录,忘记时可以用来回顾.点击这里进入JQuerydatatable官网API地址 JQuery Datatables初始化 个人比较喜欢JQueryDatatables的Bootstra ...
- JQuery Datatables 服务端分页简单应用学习
背景介绍 最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
最新文章
- 2014-04-03研究笔记整理
- 由多线程引起的map取值为null的分析
- 提的最多的数据库“索引”,先来简单了解一下
- Struts2面试问答
- STL 源码剖析 空间配置器
- 作者:​那旭(1990-),女,中国医学科学院医学信息研究所研究实习员。
- 遇见好链接(我还并没有看)
- php 工商银行公众号支付代码_微信支付PHP SDK之微信公众号支付代码详解
- 关于项目IIS CPU100%故障临时解决方案
- python 调用 C++ code
- day10--Matplotlib--条形图与散点图
- 利用TTL转USB串口在两台PC机间进行文件传输
- 使用AIDL挂断电话
- 内存取证-volatility工具的使用
- 设计模式之观察者模式详解(附应用举例实现)
- python有哪些细节描写_2019中考作文指导-细节描写.ppt
- 硬盘分区MBR和GPT选哪个好?原来分个区还有这么多讲究!
- [Luogu P2057] 善意的投票
- oracle数据库中的回收站,Oracle 10G 中的"回收站"-数据库专栏,ORACLE
- layer日期和时间组件限制最大日期和 js获取昨天日期
热门文章
- drupalchina--如何翻译及如何上传翻译的内容?
- AJAX淋漓尽致的发挥(Google个性化主页 VS. Windows Live.COM)站在互联网浪尖上窃喜...
- java udp包_基于UDP协议的数据包收发程序(代码+报告)Java
- python开发面试笔试题_python集合面试笔试题
- [k8s]kubelet重启后无法启动
- market1501 data_manager.py
- 数据科学入门与实战:玩转pandas之二
- java的循环条件_Java循环和条件
- C# break ,continue, return
- 中移4G模块-ML302-OpenCpu开发-串口开发