datatable的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只能指定一次,其他的均可多次指定。
例子:
"dom":
"<'downloadExcel'B>" + "<'row'<'col-xs-3 font1'l><'#mytool.col-xs-4'>r>" + "t" +
"<'row'<'col-xs-6'i><'col-xs-6'p>>",
1、此处B为button标签,举例如下:
此功能是点击按钮导出为当前分页的Excel
若是前台分页可以导出全部,若是后台分页则有两个选择:1、通过前提ajax调用查询后台所有数据,在后台封装转为Excel;2、datatable中通过对
"lengthChange": true,"lengthMenu": [ [5, 10, 15, 20, 25, 50, 100, 5000], [5, 10, 15, 20, 25, 50, 100, "所有"] ]的配置,然后导出Excel。
PS:5000可以改成任意大,因为我的后台是WHERE ROWNUM <= ?
"buttons": [
{
"extend": "excelHtml5",
"text": "导出",
"className": "btn btn-primary btn-sm local",
"customize": function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]',sheet).attr('s','2');
}
}
],
2、小写的L:代表 改变每页显示多少条数据的控件
r:代表 加载等待显示信息
t:代表 Table 表格本身
i:代表 表格相关信息控件
p:代表 Pagination 分页控件
<>:代表一个div
downloadExcel,row,col-xs-3...为class,可以在style中写
不足之处,请指点,不胜感激。
datatable的dom配置的更多相关文章
- jquery.dataTable.js 基础配置
$(document).ready(function () { $('#dataTables-example').DataTable({ responsive: true, "bPagina ...
- 操作dom获取datatable中的某一行的某一列的数据
需求描述:编辑的时候,点击的那一行,进入后台的验证方法,验证通过后,再进入编辑页面,进入的时候需要把本行<tr>数据中的某一列<td>的值传递过去 思路表述:之前我想的是,给列 ...
- datatable的部分问题处理(动态定义列头,给某行添加事件,初始显示空数据)
一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...
- datatable动态列处理,重绘表格(敲黑板,划重点!!!我肝了一天半才彻底弄懂这个东西,TAT)
datatable动态列处理,重绘表格 前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新 ...
- 如何利用【DataTable】结合自己本地数据库,使用表格
如何利用[DataTable]结合自己本地数据库,使用表格我们都知道DataTable的使用与配置,平时我们都是用一个json文件来代替后台,但是实际上我们在与后台交互的时候,后台先取到数据库里面的信 ...
- MutationObserver DOM变化的观察
简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...
- JavaScript之HTML DOM Document 对象
文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...
- datatables中的Options总结(2)
datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...
- Datatables 在asp.net mvc中的使用
前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...
随机推荐
- python做单因素方差分析
方差分析的主要功能就是验证两组样本,或者两组以上的样本均值是否有显著性差异,即均值是否一样. 这里有两个大点需要注意:①方差分析的原假设是:样本不存在显著性差异(即,均值完全相等):②两样本数据无交互 ...
- Jmeter查看结果树之查看响应的13种方法[详解]
查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1.Text 查看结果树中请求的默认格式为text,会显示请求的取样器结果.请求.响应数据3个部分内容. 取样器结果: 默认Raw视图, ...
- 【Maven】聚合
[Maven]聚合 转载: 使用聚合一次能为多个 maven 项目执行命令,而不用到每一个项目下去执行命令. 聚合 pom 的特殊之处 1.packaging 配置 pom <packaging ...
- poj 1062 昂贵的聘礼 (有限制的最短路)
昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 56594 Accepted: 17083 Descripti ...
- 《Java知识应用》Java Json说明和使用(fastjson)
工具包下载:链接: https://pan.baidu.com/s/1dn5uNwiJ1ICkbPknlMmkHQ 提取码: ayzn 复制这段内容后打开百度网盘手机App,操作更方便哦 1.JSON ...
- 02-EF Core笔记之保存数据
EF Core通过ChangeTracker跟踪需要写入数据库的更改,当需要保存数据时,调用DbContext的SaveChanges方法完成保存. 基本的添加.更新.删除操作示例如下: using ...
- C语言程序设计-现代方法(笔记1)
第一章 C语言概述 1.C语言的历史(1.1) 起源:贝尔实验室开发的UNIX操作系统的副产品.标准化:C89和C99.基于C的语言:C++,Java,C#,Perl. 2.C语言的优缺点(1.2) ...
- Another git process seems to be running in this repository
今天在推送项目的时候git突然报如题的错误.查了一下是由于git被另外一个程序占用,产生原 原因在于Git在使用过程中遭遇了崩溃,部分被上锁资源没有被释放. 解决方案也很简单,在git中找到对应的in ...
- python错误调试print、assert、logging、pdb、pdb.set_trace()
世界人都知道,程序总会有bug存在.复杂点的bug一般人不能一眼看出,这就一要一套调试程序的手段. 方法一:使用print()函数直接打印: >>> def foo(s): ... ...
- vue-其他
vue-resource // 2.1 导入 vue-resource import VueResource from 'vue-resource' // 2.2 安装 vue-resource Vu ...