码迷,mamicode.com
首页 > 其他好文 > 详细

datatables插件的一些问题汇总

时间:2019-03-13 12:02:19      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:class   下拉框   控件   inpu   相关信息   自定义   .com   font   code   

一、如何自定义布局,让分页组件,页码筛选长度的下拉框,以及表格信息位置自定义

这个依赖的是sDom属性,这个有点不容易懂,它有自己的一个编码方式,最后会转换成html代码。

未做任何修改时,datatables插件默认显示方式为

技术图片

但是项目中经常会遇到各种各样的布局,所以需要sDom属性来设置页面,修改各组件的显示位置。可参考:http://www.datatables.club/reference/option/dom.html

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>

 运用方法如下:

若我要使页面大小的下拉框显示在底部,则设置

$("#datatable").dataTable({
  "sDom": "<t><‘bottom‘<‘col-sm-2‘i><‘col-sm-2‘l><‘col-sm-8‘p>"
})

 转化成html代码则为:

<div>t</div>

<div class="bottom">

  <div class="col-sm-2">i</div>

  <div class="col-sm-2">l</div>

  <div class="col-sm-8">p</div>

</div>

t :表示表格

i :表示表格信息

l :表示页面长度

p:表示页面分页

结果如下图:

技术图片

 

datatables插件的一些问题汇总

标签:class   下拉框   控件   inpu   相关信息   自定义   .com   font   code   

原文地址:https://www.cnblogs.com/plb2307/p/10522180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!