BootStrap-DataTables教程

最新推荐文章于 2024-05-23 11:57:15 发布
最新推荐文章于 2024-05-23 11:57:15 发布
阅读量1w 收藏 3
点赞数
分类专栏： java javaweb 文章标签： bootstrap DataTables jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajavaer/article/details/78949275
版权

本文3个部分

一：什么是DataTables

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 （ MIT license ）！ 商业支持

Bootstrap整合DataTables

Bootstrap原生Table：

Bootstrap Table

DataTables表格：

这里写图片描述
这里写图片描述

显而易见的是，添加了搜索功能，分页、翻页功能，显示记录数，包括按指定属性排序，内部还支持延迟加载功能。

二：如何使用DataTables

这里写图片描述

①创建一个Table，自定义一个ID

②发送ajax请求，向Table tbody中添加数据
这里写图片描述

③重新加载DataTables

$('#dataTables-example').DataTable();

④因为本人将DataTables放到了一个Bootstrap标签页里，因此这里设置了一个Boolean变量，用来确定是否已经发送请求，如果已发送，下次切换时不再发送ajax请求，以免卡顿，当需要加载时，将此变量设置为Fasle即可。

这里写图片描述

这里注意，选取一个不变的父类使用on函数动态绑定，如果使用onclick，会导致新添加的控件点击无效。

之后将每一列的值设置到modal中，可以实现点击修改

这里写图片描述

三：注意事项

1.如果想修改DataTables的默认值，可以到DataTables的js文件里修改。
2.将ajax请求返回的属性数量与行数对应，否则会报错。
3.如果遇到问题，或者想掌握更多，请到DataTables官网学习研究。

DataTable官网：https://www.datatables.net/

DataTables中文网：http://datatables.club/

正熵
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
bootstrap dataTables使用方法
07-31
bootstrap dataTables使用方法 datatables常用API 文档整理很方便
Laravel-Bootstrap-4-DataTables-Example
05-24
命令安装命令作曲者需要yajra / laravel-datatables-oracle：^ 9.0 PHP工匠供应商：发布--tag = datatables [removed][removed]</li><li>[removed][removed]</li><li>[removed][removed]</li><li><link rel=...
Bootstrap框架----DataTables列表示例
直到世界的尽头
01-30 1万+
简介 DataTables是一款比较好用的可以在bootstrap中使用的jquery表格插件。 它是一个高度灵活的工具，可以为任何HTML表格添加高级的交互功能。 DataTables特点 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Founda...
Bootstrap Table数据表格的使用指南
最新发布
2301_82243979的博客
05-23 744
数据源得到了，就可以看到渲染表格的效果了，如图。单表的基本数据显示是没有问题了，但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。在渲染表格的JS中的columns属性值中添加如下代码。title: ‘班级’,formatter属性值对应的是一个方法名，此方法返回需要显示关联表中的数据。其中参数value表示field对应实体类中的值，row为当前行的数据，index为当前行的索引。因为tbClass为实体类中关联的班级表，索引直接通过value.name就可以得出班级名称。
Bootstrap的Datatable详解
mingtianhaiyouwo的博客
11-24 3万+
$('#scenerytable').dataTable({ "sDom": "r>>", "bProcessing": true,//显示正在处理 "bServerSide": true,//延迟加载 "bPaginate": true,//显示（使用）分页器
bootstrap-dataTable的使用
u010652906的专栏
08-13 9665
上代码 数据 js代码 $(&amp;amp;quot;#gzTables&amp;amp;quot;).dataTable({ //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。 lengthChange: false, destroy: true,//允许销毁替换 ...
bootstrap对表格datatable的应用
光羽住一
06-19 3378
接上一篇文章，做好表格后的效果图：问题是表格过长，而且未来还有可能增加更多的显示。怎么做才能更好的展示呢？bootstrap里有一个advance table的一个东西，官方范例使用：https://datatables.net/使用后的效果：可以看到最大的优点是有了可折叠的表框，支持缩放。同时还能控制页数、支持搜索。真的很棒这里分享一个在使用中遇到的问题：这个表单的优化很好做，就是事先有一个表单...
Datatables样式
夜飞鼠的专栏
12-28 2041
dataTables.bootstrap.min.js脚本以及相应的bootstrap.min.css、dataTables.bootstrap.min.css样式。，DataTables的Bootstrap集成还为DataTables中的分页控件提供了一个渲染器，以确保表的分页也由Bootstrap统一样式。此示例显示指定了order列类的DataTables，每一列的行数据都按照字符顺序排序。此示例指定了stripe类的DataTables，行使用不同的颜色交替显示。
bootstrap3-datatables-editable:此插件的积极开发位于 https
06-22
bootstrap3-datatables-editable 此插件的积极开发位于
Dist-DataTables-SearchBuilder-Bootstrap4
02-12
也可以通过在包名称后添加后缀来获得Bootstrap，Foundation和其他样式库的样式包。 请参阅DataTables 安装页面以获取更多信息。 还包含有关如何将软件包管理器与DataTables一起使用的详细信息。基本用法通过将Q放入...
Dist-DataTables-RowReorder-Bootstrap
05-18
具有样式的DataTables的RowReorder 该软件包包含分发文件，该分发文件用于为设置样式，为样式。 通过单击并拖动鼠标和触摸操作，RowReorder添加了最终用户对数据表中行的重新排序。 RowReorder为Editor提供全面...
vue-datatables-net：Vue jQuery DataTables.net包装器组件
02-03
vue-datatables-net Vue jQuery DataTables.net包装器组件 该库是的Vue 2包装器。 这是一个很小的包装程序，不包含任何内容，甚至不包含datatables.net核心库。 注意：之所以找到该库，是因为您想在应用程序中使用...
Datatables + Bootstrap 完整增删改查功能实现示例
悟世君子的博客
08-07 2139
前端使用Datatables + Bootstrap +JQuery，后台使用 SpringBoot + Mybatis 本代码旨在将Datatables 的各个细节用法串联起来，因此前后端都没做非空验证。后台使用SpringBoot + Mybatis，这里关于SpringBoot + Mybatis的整合就不详细说了，不懂的朋友可以参考：https://blog.csdn.net/wsjzzcbq/article/details/81563515 由于本文讲解的项目使用了本地静态资源，为方...
bootstrap datatable使用详解
DearYumu的博客
01-27 2552
var table = null; $(document).ready(function() { table = $(‘#whhtable’).DataTable({ "bProcessing": true,//显示正在处理 "bServerSide": true,//延迟加载 "bScrollCollapse": false, //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false) "bPagin
强大的表格控件-Datatables
陌上花开，可缓缓归矣
02-27 2万+
背景介绍是不是习惯了EasyUI封装的DataGrid表格，传入一个json串，就可以自动加载数据，显示分页，还能实现一些特殊需求，如行内编辑，操作列等。而使用bootstrap表格的话，则需要完全自己手写table和分页控件，并且将两者组合到一起，才是个完整的表格，代码量大不说，如果需要实现一些特殊的需求，行内编辑等那就更加繁琐了。 Datatables所以我寻找到了一款bootstrap风格的第
Bootstrap Table 表格参数详解
weixin_30556161的博客
08-02 344
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 classes data-classes String 'table table-hover' 表格的类名称。默认情况下，表格是有边框的，你可以...
datatables和bootstrap
weixin_59263248的博客
04-12 1126
bootstrap是对HTML的表格做简单的样式设置，可以改变行宽行高和背景颜色。bootstrap的主要作用是在于原色的排版且可以自适应屏幕大小。而datatables更专注于给表格增加一些衍生功能，如翻页，搜索和排序。它整合了bootstrap对于表格的操作。 datatables注重dom的理解与操作，因为功能插件都是根据dom来定位添加 使用步骤： 1 导入js和css的包，2 初始化 $(document).ready( function () { $('#table_id_exa..
Bootstrap框架----DataTables列表折叠列
直到世界的尽头
01-31 2万+
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例 本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。 官网例子参考 行详细内容的展开与折叠 http://datatables.club/example/user_share/row_details.h...
Bootstrap-table 使用总结
热门推荐
菜鸟逆袭之路
06-29 5万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="<%=basePath%>js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="<%=basePath%>js/metisMenu.min.js"></script> <!-- DataTables JavaScript --> <script src="<%=basePath%>js/jquery.dataTables.min.js"></script> <script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script> <!-- Custom Theme JavaScript --> <script src="<%=basePath%>js/sb-admin-2.js"></script>
06-01
5. dataTables.bootstrap.min.js：这是DataTables插件的Bootstrap风格扩展，提供了一些额外的CSS样式和JavaScript功能，使表格更加美观和易用。 6. sb-admin-2.js：这是一个自定义的JavaScript文件，包含了一些网站...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值