datatables默认会打开部分特性,比如搜索框,分页显示等等,或许你不喜欢datatables这样去布局,可能你想把分页按钮放在底部的中间,搜索框放在顶部的左上角,不用担心datatables考虑到这个问题,使用dom选项就可以灵活配置各个特性的位置

datatables定义了10个字符表示不同的组件

  • l - Length changing 每页显示多少条数据选项
  • f - Filtering input 搜索框
  • t - The Table 表格
  • i - Information 表格信息
  • p - Pagination 分页按钮
  • r - pRocessing 加载等待显示信息
  • < and > - div elements 一个div元素
  • <"#id" and > - div with an id 指定id的div元素
  • <"class" and > - div with a class 指定样式名的div元素
  • <"#id.class" and > - div with an id and class 指定id和样式的div元素
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
} );

  

DataTables DOM定位的更多相关文章

  1. Jquery.Datatables dom表格定位

    Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...

  2. Jquery.Datatables dom表格定位 (转)

    Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...

  3. JQuery Datatables Dom 和 Language 参数详细说明

    http://linleizi.iteye.com/blog/2086435 *********************************** Data Tables: http://datat ...

  4. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  5. dom定位的三种元素

    1.通过id #XXX 2.通过标签  xxx 3.通过类  .xxx

  6. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  7. vue+vux页面滚动定位(支持上下滑动)

    接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...

  8. Angular使用总结 --- 如何正确的操作DOM

    无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了.那么如何优雅的使用Angular的方式来操作DOM呢? 获取元素 1.ElementRef  ...

  9. selenium元素定位(Java)

    1.使用findElement方法定位元素   findElement()方法:当开始寻找符合指定条件的元素时,它将查询整个DOM,然后返回第一个找到的匹配元素.   By id:通过元素ID属性定位 ...

随机推荐

  1. BZOJ3538: [Usaco2014 Open]Dueling GPS

    3538: [Usaco2014 Open]Dueling GPS Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 59  Solved: 36[Subm ...

  2. 黑马程序员_Java泛型

    泛型 概述: ClassCaseException:类型转换异常. 代码中不加泛型,编译没问题,运行可能会发生异常.但是用户解决不了,这样程序就存在安全隐患.所以我们希望在编译时期就能看出问题,程序员 ...

  3. Sum

    Problem Description XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are ...

  4. 大型分布式C++框架《二:大包处理过程》

    本来这一篇是打算写包头在分布式平台中的具体变换过程的.其实文章已经写好了.但是想了这个应该是不能随便发表的.毕竟如果知道了一个包的具体每个字节的意义.能伪造包来攻击系统.其次来介绍一个包的具体变换过程 ...

  5. I/O多路转接 --- UNIX环境高级编程

    I/O多路转接技术:先构造一张有关描述符的列表,然后调用一个函数,知道这些描述符中的一个已准备好进行I/O时,给函数才返回.在返回时,它告诉进程哪些描述符已准备好可以进行I/O. poll.selec ...

  6. Spring MVC 注解[转]

    [学习笔记]基于注解的spring3.0.x MVC学习笔记(九) 摘要: 本章节,仅为@SessionAttributes的功能扩展介绍介绍,结合@requestparam注解进行简易无数据库分页. ...

  7. [Node.js] node-persist: localStorage on the server

    // Save data var storage = require('node-persist'); storage.init(); var people= require('./people.js ...

  8. DC综合环境的一些概念

    DC综合环境的一些概念 启动文件 .synopsys_dc_setup 采用Tcl格式,包含工艺库的路径信息和其他环境变量 不同位置启动顺序 1.Synopsys安装目录 2.用户家目录 3.项目工作 ...

  9. MySQL的MyISAM和InnoDB对比及优化(转)

    MyISAM和InnoDB是在使用MySQL最常用的两个表类型,各有优缺点,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是 ...

  10. easyui-form添加自定义表单验证

    easyui自定义表单验证规则其实不是很复杂,只要重写一下重写 $.fn.validatebox.defaults.rules 自定义示例 $.extend($.fn.validatebox.defa ...