首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Datatables TableTools在同一页面上有多个表

在同一页面上有多个表格时,可以使用 DataTables 的 TableTools 插件来实现对每个表格的操作。以下是一些关于 DataTables 和 TableTools 的简要介绍和示例代码:

DataTables

DataTables 是一个用于 jQuery 的高度定制化的数据表格插件,它允许开发者轻松地将数据以表格的形式展示出来,并提供了丰富的功能和选项,例如分页、排序、搜索、固定列等。

TableTools

TableTools 是 DataTables 的一个扩展插件,它提供了一些额外的工具,例如导出表格数据为 CSV、Excel、PDF 等格式,以及打印表格等。

示例代码

以下是一个使用 DataTables 和 TableTools 的示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
   <title>DataTables with TableTools</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/tabletools/2.2.5/css/dataTables.tableTools.min.css">
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.5/js/dataTables.tableTools.min.js"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            // 初始化第一个表格
            $('#table1').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                    "sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
                }
            });

            // 初始化第二个表格
            $('#table2').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                    "sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
                }
            });
        });
    </script>
</head>
<body>
   <table id="table1" class="display">
       <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
            </tr>
        </tbody>
    </table>

   <table id="table2" class="display">
       <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在上面的示例代码中,我们使用了 DataTables 和 TableTools 插件来初始化两个表格,并且为每个表格添加了导出数据的工具栏。

需要注意的是,由于 TableTools 插件已经不再维护,因此需要使用一个替代的插件来实现类似的功能,例如 Buttons 插件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

datatables使用教程

各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免费开源 ( MIT license...原理介绍 对table进行渲染,前提table的数据源得有,如上面的是HTML页面本来就有一定的数据了,所以可以直接调用函数进行渲染; 但是大多数情况下,项目开发并不会采用这种做法,而是要结合服务端,...做法有很多,可以ajax异步拿到数据后,进行dom操作,把数据填入table中,进行datatables.ajax.reload() 这样当然可以,但是代码很乱,难看。...要求服务器接收到此参数后再返回(具体看 下面) start integerJS 第一条数据的起始位置,比如0代第一条数据 length integerJS 告诉服务器每页显示的条数,这个数字会等于返回的...中中需要显示的数据。这是一个对象数组,也可以只是数组,区别在于 纯数组前台就不需要用 columns绑定数据,会自动按照顺序去显示 ,而对象数组则需要使用 columns绑定数据才能正常显示。

7K20

DjangoWeb使用Datatable进行后端分页的实现

本人做的是一个表格监控页面,该页面中的table内容每5s刷新一次。.../js/dataTables.bootstrap.min.js' %}" </script 2.页面加载时本人对表格内容进行了初始化,下面的两种方式对表格都能进行初始化,但是获取到的var 对象是不一样的...3.因为同一页面可能使用多个表格,所以我要多个表格共用的部分提取出来,避免代码反复编写: 下面的方法定义了3个参数, lengthMenuParam:table表格左上角的分页列表“右侧”需要显示哪些内容...但是使用了get方式后,某页进行操作再进行上面的JS刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。...这个方法是将你的数据跟据你的页码,页面大小,分好页 def page(deploy_list ,limit,offset):#查询分页,调用此方法需要传获取的数据列表,页面大小,页码 # 取出该所有数据

4.9K20

datatables应用程序接口API

cell().data()API 获取/设置被选择的单元格的数据 cell().index()API 获取被选择的单元格的索引信息 cell().invalidate()API 废除被选中单元格保持DataTables...内部数据中的数据 cell().node()DT 获得选中单元格的dom cell().render()DT 获得渲染过的单元格数据 cell()DT 获取中一个单元格 cells().cache()...()DT Invalidate the data held in DataTables for the selected cells cells().nodes()DT 获得选中的多个单元格的dom cells...to$()DT 转为jquery实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique()DT 去重 unshift()DT 结果集里从头添加一个或多个项目...()API 获取该页面上所有的DataTables实例 $.fn.dataTable.util.escapeRegex()API 使用正则表达式转义特殊字符 $.fn.dataTable.util.throttle

4.4K30

【初学者指南】ASP.NET MVC 5中创建GridView

例如: DOM JavaScript的 Ajax Server-side processing 我最喜欢的选项之一是, jQuery 数据不但支持客户端搜索、分页、排序等,而且还提供了一个可以服务器端处理的选项...例如,一种情景是:因为数据库中有太多的数据,所以客户端的进行分页并不是一个好选择。表格中有百万行数据,如果用客户端分页功能来绑定,页面就会由于大量的数据行处理和HTML渲染而反应很迟钝。... nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...).Include( "~/Content/DataTables/css/dataTables.bootstrap.css")); 在为数据添加了脚本和 CSS 之后,我们需要在总体布局中添加它们...但是现在还有一个问题,那就是这是客户端处理的,当行为被调用时,所有数据会被视图渲染,这样就会造成当大量数据出现时,页面性能变慢或者页面载入时间增加。

6.1K90

ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

模板页面,选择 MVC,如果编写了单元测试,请先做检查,然后点击确定。 我们的工程都是用基本的功能创建的。现在,我们开始创建数据库上下文类,这个类将会被Data Access实体框架使用。... nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...).Include( "~/Content/DataTables/css/dataTables.bootstrap.css")); 在为数据添加了脚本和 CSS 之后,我们需要在总体布局中添加它们...assetListVM.init(); }); 我们已经 init 函数中编写了数据初始化代码, init 函数中,我们设置 serverSide...requestModel.Length 将会告诉用户查看的页面有多少行数据,这个用户可以使用页面中的 combo 框来进行配置。

5.4K80

jquery.datatables 分页功能

官网链接:https://datatables.net/manual/server-side 有时候,从DOM读取数据的时间太慢或笨拙,特别是处理数千或数百万的数据行时。...因此,您可以轻松地显示由数百万行组成的。 当使用服务器端处理时,DataTables将在页面上的每个绘图(即分页,排序,搜索等)时向服务器发出一个Ajax请求。...columns[i] - 定义中所有列的数组。 在这两种情况下,i都是一个整数,它将改变以指示数组值。大多数现代化的服务器端脚本环境中,这些数据将作为数组自动提供给您。...data -- array // 要显示中的数据。这是一组数据源对象,每行一个,将由DataTables使用。请注意,该参数的名称可以使用ajax选项的dataSrc属性更改。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以jQuery请求中使用的选项,你也可以使用DataTables

4.8K20

动手实践:美化 Jenkins 报告插件的用户界面

这是一个高度灵活的工具,建立逐步增强的基础上,可将所有这些高级功能添加到任何 HTML 中: 上一页,下一页和页面导航 通过文本搜索过滤结果 一次按多列对数据排序 DOM、Javascript、Ajax...警告插件中,您将找到一个示例:小型设备上,有一张可见的卡片可以轮播中显示一张饼图。如果要在较大的设备上打开同一页面,则会并排显示两个饼图,并且轮播会被隐藏。...使用此基于 JS 的控件可免费提供其他功能: 通过文本搜索过滤结果 提供结果集的分页 一次按多列排序数据 使用 Ajax 调用获取行 根据屏幕分辨率显示和隐藏列 为了视图中使用 DataTables...为了 Jenkins 视图中创建,插件需要提供一个模型类,该类提供以下信息: 的 ID(因为视图中可能有多个) 列的模型(即列的编号,类型和标题标签) 表格的内容(即各个行对象) 您可以 Forensics...此关系是必需的,以便 Jenkins 可以自动创建和绑定 Ajax 调用的代理,该代理将在创建 HTML 页面后自动填充内容。

5.8K10

第三章:用户管理功能【基于Servlet+JSP的图书管理系统】

查询用户信息 1.1 流程分析   我们需要展示的数据是sys_user结构中的数据 然后对应的实现逻辑 1.2 代码结构   清楚了我们要操作的数据。我们就可以来创建相关的代码。...然后我们就需要通过JDBC来实现对数据库结构中数据的CRUD操作。为了简化操作我们通过Apache Dbutils来实现。那么我们定义一个公共的MyDbUtils工具类。...  数据展示页面我们通过sys/user/list.jsp来实现。...首先是点击添加按钮需要跳转到添加数据的页面。 然后我们userServlet中需要添加跳转的逻辑处理 然后添加addOrUpdate.jsp页面页面中添加数据的表单信息。...更目录下创建一个common/commonPage.jsp页面 <%-- weChat:boge_java QQ:279583842 --%> <%@ page contentType="text

23840

SpringBoot2----MyBaits-Plus完成CRUD操作

整合MyBatis-Plus----导入依赖 自动配置 使用plus的步骤 1.创建Dao接口继承BaseMapper,里面有默认的增删改查方法 2.封装数据库对应字段的实体类 3.测试 默认查询的名就是对应实体类的名字...2.创建Page对象,规定显示第几页的数据,当前页显示几条记录 3.调用service实现类的page方法,将创建的Page对象传入,返回page是分页查询的结果 4.给容器中注入一个分页插件 5.页面分页显示结合...thymeleaf模板引擎,取出值显示页面上 thymeleaf 内置工具用法示例和手册 CRUD删除功能实现 thymeleaf模板引擎的具体语法参考下面链接 重定向携带参数,是将参数作为请求参数的形式拼接在...queryWrapper); } ---- 2.封装数据库对应字段的实体类 @Data public class UserDao { //注意:所有属性都应该在数据库中 //表明该字段中不存在...thymeleaf模板引擎,取出值显示页面上 <table class="display table table-bordered table-striped" id="dynamic-table

50610

模仿天猫实战【SSM版】——后台开发

: 前端页面统一【WEB-INF/views】下,后端页面统一【WEB-INF/views/admin】下 分类管理 正式开始编写我们的代码,以 Category 为例。...param category * @return */ void update(Category category); } 编写 CategoryServiceImpl : 同一包下编写实现类.../assets/js/dataTables/jquery.dataTables.js"> <script src=".....开发过程中遇到的一些问题 PropertyValue 遇到的麻烦 PropertyValue 属性值<em>表</em>,这个<em>表</em>关联了两个外键,一个指向 Product ,另一个指向 Property ,当我按照之前的设计把...<em>在</em>删除顶层数据库数据的时候,要注意删除其下的有外键关联的数据,特别是 product_id 这个东西,是很多表的外键,删除 product 之前需要先清空有关联的其他<em>表</em>的数据....

2.1K60

JQuery 表格插件介绍:Flexigrid 和 DataTables

Flexigrid 和 DataTables 是我最近使用的,并且功能比较强大,在这里介绍一下。如果你寻找前端绘制表格的插件,可以考虑它们。...比较遗憾的地方在于,它只提供了这种基于 row 的行(即表头第一行),而不支持基于 column 的列表(即表头第一列)的列定义和数据集合表示。...如果要表格使用纯 JavaScript 的 JSON 数据,绘制表格本身的原始方法 “flexigrid” 无法支持,需要额外地页面加载完成后调用 API 来实现,这也是插件设计上一个不够好的地方:...document).ready(function(){ grid.addData(totalNumber, dataRows); }); 最后我想说的是,在数据量比较大时,我发现这个插件的性能不够好,拖动表格的...DataTables DataTables 相较而言,功能上要多得多了,官方的特性展示: 可定制分页 即时数据过滤 多列排序 列宽自动调整 支持各种数据源 国际化支持 插件支持 表格当前状态保持 ……

2.3K20

我的python学习--第十一天

表单验证插件 锁定用户禁止登录----逻辑端对用户状态判断 更优雅的显示仪表盘----使用jinja2模板{%if ...%}在前端判断 密码加密 包结构 总结 ---- 插件调用步骤: 下载插件包 html...页面中引入下载好的插件文件(css,js) 具体操作----查看官方文档 ---- 一、bootstrap-multiselect插件 Bootstrap Multiselect是个jQuery基础插件...,提供一个很直观的用户界面,使用选项输入多个属性。...这个插件代替了Bootstrap的按钮,提供一个下拉菜单,里面包含多个选项复选框。...格式 swal(标题,提示内容,事件类型) #标题和事件类型可缺省 学习地址:http://t4t5.github.io/sweetalert/ ---- 三、datatables表格插件 //引入datatables

1.6K10
领券