bootstrap Datatable自定义表格工具栏

Bootstrap DataTable提供的表格样式是这样的：

但是如果想实现如图的效果：

需要在jquery函数中修改成如下：

$(document).ready(function() {
$('#dataTables-example').dataTable( {
"dom": '<"top"fl><"toolbar">rt<"bottom"ip><"clear">'
} );
$("div.toolbar").html('<select><option>All</option><option>Archive</option><option>No-Archive</option></select>').addClass("select");
} );

其中fl中的f是搜索框，l是每页显示的条数，r暂时还没发现，t应该是控制格局的，i是表格下面的总数据条数，p是翻页的按钮。想起DataTable中有写到。

如此一来，'<"top"fl><"right"><"toolbar">rt<"bottom"ip><"clear">'的意思是：<top>即表格的上方放置搜索框和每页显示的条数，接着右边放置我们自定义的东西，如例子中的下拉列表。以此类推。具体DataTable提供给我们的这些配置是怎么实现还是需要深究，我还不能完全理解这样的写法，毕竟我还是菜鸟。

<"xxx">的用法应该是说，创建一个class名为xxx的div，若要在DIV中放东西，就是上面写的那样，<"xxx"fl>，要能想象成div跟div的样子，用起来就会舒服多了

记录下来，作为笔记之用！

bootstrap Datatable自定义表格工具栏相关推荐

Bootstrap DataTable自定义表格设置某列不排序
很多情况下,我们使用外来插件不一定满足自己的业务需求.所以一般插件都会提供自定义的功能给用户做出自己想要的效果. DataTable提供的表格样式里面,第一行都是会有排序功能的,但是如果遇到我们想将第 ...
如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮
如下图所示,这是 SAP Fiori Elements List Report 一个例子,我们想在表格工具栏里,新增一个自定义按钮: 实现方式在 SAP Fiori Elements 项目工程里,修 ...
【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
BootStrap Table：表格参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 引入BootStrap Table 引入 bootstrap.c ...
Innovasys实用教程（新手教学实用教程）：如何在软件当中自定义表格边框
Innovasys是一家成立于1997年的文档和帮助创作工具提供商,致力于使广大开发人员和技术方面的作家能够生成专业质量的文档.帮助系统和程序.本系列教程主要讨论Innovasys的实用性提示 ...
IOS自定义表格UITableViewCell
在UITableView中,自定义表格,最原始是继承UITableViewCell,然后通过写代码方式去搞,但是这个费事了. 1.在storyboard中给一个ViewController的tabi ...
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gtExtras包添加一个图，显示表中某一列中的数字、并自定义表格数据显示的主题格式、并自定义数值数据的格式（例如百分比）
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gtExtras包添加一个图,显示表中某一列中的数字.并自定义表格数据显示的主题格式.并自定义数值数据的格式(例如百分比) 目录
html生成自定义表格,自定义js的表格插件
场景:指定元素,生成自定义表格. 目的:了解js的插件开发. html代码: 自定义表格插件 var test = new MyTable({ elid:"mytable",//定 ...
如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器
by Prashant Yadav 通过Prashant Yadav 如何使用HTML5,JavaScript和Bootstrap构建自定义文件上传器 (How to build a custom f ...

bootstrap Datatable自定义表格工具栏

bootstrap Datatable自定义表格工具栏相关推荐

最新文章

热门文章