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

如何捕获使用DataTables插件分页的复选框的值

DataTables是一个流行的jQuery插件,用于在网页上展示和操作表格数据。它提供了丰富的功能,包括分页、排序、搜索、过滤等。

要捕获使用DataTables插件分页的复选框的值,可以按照以下步骤进行操作:

  1. 在HTML页面中引入DataTables插件的相关文件,包括jQuery库和DataTables的CSS和JavaScript文件。
代码语言:html
复制
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
  1. 在HTML页面中创建一个表格,并在表格中添加复选框列。
代码语言:html
复制
<table id="myTable">
  <thead>
    <tr>
      <th></th> <!-- 复选框列 -->
      <th>列1</th>
      <th>列2</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td> <!-- 复选框 -->
      <td>值1</td>
      <td>值2</td>
      <!-- 其他单元格 -->
    </tr>
    <!-- 其他行 -->
  </tbody>
</table>
  1. 使用JavaScript代码初始化DataTables插件,并配置复选框列的相关选项。
代码语言:javascript
复制
$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [{
      orderable: false, // 禁止排序
      targets: 0 // 复选框列的索引
    }]
  });
});
  1. 编写JavaScript代码来捕获选中的复选框的值。
代码语言:javascript
复制
$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [{
      orderable: false,
      targets: 0
    }],
    select: {
      style: 'multi' // 允许多选
    }
  });

  $('#myButton').click(function() {
    var selectedValues = [];
    $('#myTable tbody input[type="checkbox"]:checked').each(function() {
      var value = $(this).closest('tr').find('td:eq(1)').text(); // 获取第二列的值
      selectedValues.push(value);
    });
    console.log(selectedValues);
  });
});

在上述代码中,我们通过$('#myTable tbody input[type="checkbox"]:checked')选择器选中所有被选中的复选框,然后使用.closest('tr').find('td:eq(1)').text()获取所在行的第二列的值,并将其存入selectedValues数组中。最后,我们可以通过console.log(selectedValues)打印选中的复选框的值。

这样,我们就可以捕获使用DataTables插件分页的复选框的值了。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

MyBatis分页插件PageHelper使用

搞清楚了分页插件执行情况,下面来总结下mybatis中PageHelper使用。 1....需要引入PageHelperjar包 如果没有使用maven,那直接把jar包导入到lib文件夹下即可,这个PageHelper插件在github上有开源,地址为:https://github.com...-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射用默认 --> <!...这说明PageHelper插件可以帮助我们实现分页功能,例如EasyUI中就会传到后台分页参数信息,后台就可以根据参数获取分页数据等等。 ...当然,我们自己可以修改这个PageHelper插件,使其支持条件查询,当然,我是修改不了……网上有修改过后PageHelper插件,可以支持条件查询,相对来说就比较强大了,可以在自己工程中依赖修改过后分页插件进行开发

81910

Mybatis分页插件-PageHepler使用

引入分页插件 引入分页插件一共有下面2种方式,推荐使用Maven方式,这种方式方便更新。 1)....场景四 如果你分页插件使用于类似分页查看列表式数据,如新闻列表,软件列表,你希望用户输入页数不在合法范围(第一页到最后一页之外)时能够正确响应到正确结果页面,那么你可以配置reasonable为...分页插件配置错误:请不要在系统中配置多个分页插件(使用Spring时,mybatis-config.xml和Spring配置方式,请选择其中一种,不要同时配置多个分页插件)!...如何在代码中使用 阅读前后请注意看重要提示 首先该分页插件支持以下两种调用方式: //第一种,RowBounds方式调用 List list = sqlSession.selectList...分页插件检测到使用了RowBounds参数时,就会对该查询进行物理分页

1K20

# Mybatis分页插件-PageHepler使用

Mybatis分页插件-PageHepler使用 使用方法 1. 引入分页插件 引入分页插件一共有下面2种方式,推荐使用Maven方式,这种方式方便更新。 1)....场景四 如果你分页插件使用于类似分页查看列表式数据,如新闻列表,软件列表,你希望用户输入页数不在合法范围(第一页到最后一页之外)时能够正确响应到正确结果页面,那么你可以配置reasonable为...分页插件配置错误:请不要在系统中配置多个分页插件(使用Spring时,mybatis-config.xml和Spring配置方式,请选择其中一种,不要同时配置多个分页插件)!...如何在代码中使用 阅读前后请注意看重要提示 首先该分页插件支持以下两种调用方式: //第一种,RowBounds方式调用 List list = sqlSession.selectList...分页插件检测到使用了RowBounds参数时,就会对该查询进行物理分页

78240

MyBatis分页插件PageHelper使用

搞清楚了分页插件执行情况,下面来总结下mybatis中PageHelper使用。 1....-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射用默认 --> <!...当然,我们自己可以修改这个PageHelper插件,使其支持条件查询,当然,我是修改不了……网上有修改过后PageHelper插件,可以支持条件查询,相对来说就比较强大了,可以在自己工程中依赖修改过后分页插件进行开发...作者:陌晴 版权所有:《电光石火》 => MyBatis分页插件PageHelper使用 本文地址:http://www.ilkhome.cn/?post=338 欢迎转载!...复制或转载请以超链接形式注明,文章为 陌晴 原创,并注明原文地址 MyBatis分页插件PageHelper使用,谢谢。

1.7K10

Mybatis分页插件-PageHelper使用

大家好,又见面了,我是你们朋友全栈君。 #Mybatis分页插件-PageHelper使用 怎样配置mybatis这里就不提了,我来说说我配置这个分页插件过程吧。...下载JAR包 分页插件pagehelper.jar: https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper...当然,我这只是一个小demo,没做那么麻烦,真正使用,是需要条件查询。 现在来讲讲用了PageHelper之后好处: 那就是查询语句可以不用limit,但是就一点好处吗?自然不是。...PageHelper.startPage(page, pageSize); 这段代码表示,程序开始分页了,page默认是1,pageSize默认是10,意思是从第1页开始,每页显示10条记录。...PageInfo这个类是插件类,这个类里面的属性还是值得看一看: //当前页 private int pageNum; //每页数量 private int pageSize

68830

【MyBatis】MyBatis分页插件PageHelper使用

,这周末学习了MyBatis一个分页插件PageHelper,虽然没有那么强大(我在最后会说明它缺点),但还是挺不错。...这篇博文主要来总结下如何使用PageHelper。    我们知道,在MySQL中,分页sql是使用limit来做,如果我们自己写sql,那分页肯定是没有任何问题。...可能有人会说,我可以修改生成文件,没错,这是可行,但是一般我们通过逆向工程生成文件,都不会去动它,所以这个时候,就需要使用分页插件来解决了。...在介绍如何使用这个分页插件之前,先介绍一下mybatis中插件如何工作,主要作用在哪个环节。我之前有写过一篇mybatis一篇入门文章:宏观上把我mybatis框架。...搞清楚了分页插件执行情况,下面来总结下mybatis中PageHelper使用。 1.

76120

拿来主义:layPage分页插件使用

瞎哔哔了这么多,博主只想说,我虽没有造轮子能力,但力所能及,就是尽量将自己技术积累以博客形式记录、分享,自己成长为大菜鸟同时,也期望能帮到更多小菜鸟——造车轮子咱不会,但告诉别人如何使用,也算是功德一件...layPage分页插件使用   分页是项目中比价常见功能,所以网上分页插件也很多,功能都大同小异,也都很好用,只是页面风格不同而已,在实际项目中根据自己项目的界面风格选择合适一款就好。...页面插件使用离不开js和css支持,所以先去官网下载压缩包,解压获取其中js和css导入自己前端页面。...我们在使用第三方插件时,肯定先要根据官方文档结合demo去学习,这些样例包含有各种样式可供选择,总有一款适合你—— ?   结合官方示例代码,我们就可以根据自己界面效果来应用插件了。...上面js 中要重点利用就是切换分页回调函数 jump ,该函数在分页或者每页显示条数发生改变时触发,函数返回两个参数:obj(当前分页所有选项)、first(是否首次,一般用于初始加载判断)。

1.4K30

jQuery插件DataTables环境搭建及简单使用

之前我已经简单介绍了这款插件,我把此类文章归类为“Web前端”,不是很正确,这款神奇插件不仅支持客户端,也支持服务器端。通过ajax向服务器请求json数据,并展示到表格中。...搭建环境 1.下载DataTables插件,下载地址:http://datatables.club/ 2.下载完成后,我们只需要media文件夹下 css , js 和 images 文件夹.../jquery.dataTables.min.css 文件 如何使用DataTables 1.在需要插入表格地方,插入如下 html 代码 ...id'}, {'data':'title'}, {'data':'ctime'}, {'data':null}, ], //定义最后一列默认...会自动在客户端实现本地分页,本地分页适用于数据量小(建议1000条数据一下,非专业测试,仅做参考),在数据量大,请求时间过长情况下,建议开启服务器模式,在服务器端分页

2.7K20

Mybatis分页插件PageHelper配置和使用方法

Mybatis分页插件PageHelper 在使用Java Spring开发时候,Mybatis算是对数据库操作利器了。...不过在处理分页时候,Mybatis并没有什么特别的方法,一般需要自己去写limit子句实现,成本较高。好在有个PageHelper插件。 1、POM依赖 Mybatis配置就不多提了。...如果你没有加载Mybatis配置文件,那么使用是Mybatis默认配置。如何加载Mybatis配置文件呢? 到你dataSrouce配置中。...实现方式是以插件形式,对Mybatis执行流程进行了强化,添加了总数count和limit查询。属于物理分页。...,null时用默认配置 5)、默认     //RowBounds参数offset作为PageNum使用 - 默认不使用     private boolean offsetAsPageNum = false

4.8K40

Mybatis分页插件: pageHelper使用及其原理解析

因此,我们需要一个简单易用分页工具来帮我们完成这个工作了,需求明确,至于如何实现则各有千秋。...而我们要说 pageHelper则是这其中实现比较好一件组件了,我们就一起来看看如何使用它进行提升工作效率吧!...3. pagehelper 使用 使用时候,只需在查询list前,调用 startPage 设置分页信息,即可使用分页功能。...那么, 用户如何获取其他分页信息呢? 比如count去了哪里?...虽然是这样, 但假设我们没有使用分页插件, 那么你会发现, 各个同学实现count和分页查询相差甚大, 这必将给以后改造带来许多麻烦, 这就没必要了. pagehelper 支持几个方言如下: ?

25.2K46

Mybatis-PageHelper分页插件使用与相关原理分析

留言 前言 今天使用分页插件,并将其整合到SpringBoot中。各种遇到了个别问题,现在记录下。吃一垫长一智。 整合 与SpringBoot整合 1. 引入依赖 com.github.pagehelper...配置拦截器(这是核心,如果不配置则分页不起作用) 在Spring配置文件中配置拦截器插件 <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean...countsql<em>的</em>生成逻辑说完之后,接下来我们看看<em>分页</em>过程。 2. 对sql进行<em>分页</em> 对sql 进行<em>分页</em><em>的</em>入口逻辑还是在PageInterceptor类<em>的</em>intercept方法中。...总结 首先感谢liuzh同志开发出了这款好用<em>的</em><em>插件</em>,代码很规范,<em>插件</em>很好用。本文首先介绍了Mybatis-PageHelper<em>插件</em><em>的</em>整合与<em>使用</em>,接着介绍了相关原理,主要是统计总条数<em>的</em>实现原理。

61720

jquery.datatables 分页功能

Datatables 插件基本用法就不再介绍了,这里主要分享一下使用它实现服务器端获取数据时分页处理。...在后端不管是使用什么技术,按下面API中参数封装对象即可,分页,排序,搜索都不需要手动去维护这些信息,方便、方便、太方便!...因此,您可以轻松地显示由数百万行组成表。 当使用服务器端处理时,DataTables将在页面上每个绘图(即分页,排序,搜索等)时向服务器发出一个Ajax请求。...} 除了控制整个表上述参数之外,DataTables还可以对每个行数据源对象使用以下可选参数,为您执行自动操作: { DT_RowId -- str // 将tr节点ID属性设置为此...' } ); 通过该ajax选项配置DataTables如何配置Ajax请求。

4.8K20
领券