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

DataTables分页阻止$_POST获取所有复选框值

DataTables是一个流行的jQuery插件,用于在网页上展示和操作大量数据。它提供了丰富的功能,包括排序、搜索、分页等,使得数据的展示更加灵活和易于操作。

在使用DataTables进行分页时,如果页面中存在复选框,并且想要获取所有被选中的复选框的值,可以通过以下步骤实现:

  1. 在HTML页面中,为每个复选框元素添加一个相同的class属性,例如"checkbox-item"。
  2. 在JavaScript代码中,使用DataTables提供的事件回调函数来获取被选中的复选框值。

下面是一个示例代码:

代码语言:html
复制
<table id="myTable">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox-item"></td>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox-item"></td>
      <td>Jane</td>
      <td>30</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox-item"></td>
      <td>Mike</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  var table = $('#myTable').DataTable();

  $('#myTable').on('change', '.checkbox-item', function() {
    var selectedValues = [];
    $('.checkbox-item:checked').each(function() {
      selectedValues.push($(this).closest('tr').find('td:eq(1)').text());
    });
    console.log(selectedValues);
  });
});
</script>

在上述代码中,我们首先初始化了一个DataTables实例,并为每个复选框元素添加了相同的class属性。然后,我们使用jQuery的事件委托机制,在复选框元素的change事件中获取被选中的复选框值,并将其存储在一个数组中。最后,我们通过控制台输出选中的复选框值。

这样,当用户在页面中选择或取消选择复选框时,就可以通过上述代码获取到所有被选中的复选框值。

关于DataTables的更多信息和使用方法,可以参考腾讯云的产品介绍页面:DataTables产品介绍

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

相关·内容

jquery.datatables 分页功能

Datatables 插件的基本用法就不再介绍了,这里主要分享一下使用它实现服务器端获取数据时的分页处理。...当使用服务器端处理时,DataTables将在页面上的每个绘图(即分页,排序,搜索等)时向服务器发出一个Ajax请求。...请注意,这可以是-1,表示应该返回所有记录(尽管这取消了服务器端处理的任何好处!) search[value]-- str // 全局搜索。...columns[i] - 定义表中所有列的数组。 在这两种情况下,i都是一个整数,它将改变以指示数组。在大多数现代化的服务器端脚本环境中,这些数据将作为数组自动提供给您。...对象键用作属性键,作为对应的属性。这是使用jQueryparam()方法执行的。请注意,此选项需要DataTables 1.10.5或更高版本。

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

    /js/dataTables.bootstrap.min.js' %}" </script 2.页面加载时本人对表格内容进行了初始化,下面的两种方式对表格都能进行初始化,但是获取到的var 对象是不一样的...,full_number会把所有页码显示出来 searching: false,//搜索 ordering: false,//是否启用排序 bProcessing: true, //是否显示加载...开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的。...post请求, 因为分页的时候需要向服务端传递很多参数,使用get请求的话,这里就很难受了。...这个方法是将你的数据跟据你的页码,页面大小,分好页 def page(deploy_list ,limit,offset):#查询分页,调用此方法需要传获取的数据列表,页面大小,页码 # 取出该表所有数据

    5K20

    jquery datatable 参数

    当这个标志为true的时候,分页器就默认关闭 bSort true or false, default true 开关,是否让各列具有按列排序功能 bSortClasses true or false,...bRegex": false, "bSmart": true } 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前 sAjaxDataProp 字符串,default 'aaData' 指定当从服务端获取表格数据时...,数据项使用的名字 sAjaxSource URL字符串,default null 指定要从哪个URL获取数据 sCookiePrefix 字符串,default 'SpryMedia_DataTables...sScrollXInner string default 'disabled' 又是水平滚动相关的,没搞懂啥意思 DataTable支持如下回调函数 回调函数名称 参数 返回 默认 功能 fnCookieCallback...1.object:oSettings - DataTables settings object Boolean 无 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它,draw

    23910

    datatables使用教程

    简单使用 设置language 选项 设置开发常用选项 ajax异步带参数获取数据源,结合Java服务端模式 搜索条件,整合服务端,利用mybatis动态sql bootstrap-datatables...分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...,结合Java服务端模式 服务端采用springboot 的 ssm框架 + freemarkder视图(新手提示:类似jsp的东东)+pagehelper分页 步骤 前端的步骤 开启datatables...具体查看代码仓库:datatables使用教程分支的 ajax异步带参数获取数据源 效果截图 ? 分页和数据展示都做好了,那么现在就来做一个搜索条件吧,项目来讲,搜索这个功能是必不可少的。...搜索条件,整合服务端,利用mybatis动态sql 步骤 前端步骤: 添加搜索条件输入框和搜索框 获取搜索条件输入 添加datatables的额外参数,传给服务端接口 服务端步骤: 编写controller

    7.1K20

    datatables应用程序接口API

    Ajax请求提交的参数 ajaxAPI ajax方法的命名空间 clear()API 清除表格里所有数据 data()API 获得表格中所有数据 destroy()API 销毁当前上下文中的datatables...page.len()API 获得或者设置表格的分页长度 search()API 搜索表格里的数据 settings()API 获得表格的settings对象 state()API 得到表格最新存储的状态...cell()DT 获取表中一个单元格 cells().cache()DT 从缓存里获取选中多个单元格的数据 cells().data()DT 获取选中的多个单元格 cells().indexes()...column().data()DT 获取选中列单元格的 column().dataSrc()DT 获取选中列数据源的属性名 column().footer()DT 获得选中列footer的node...实例 $.fn.dataTable.tables()API 获取该页面上所有DataTables实例 $.fn.dataTable.util.escapeRegex()API 使用正则表达式转义特殊字符

    4.4K30

    推荐 11 个 GitHub 上比较热门的 Java 项目

    3 面试指南interviews https://github.com/kdn251/interviews Star 18301 Java工程师面试指南,里面涵盖几乎所有软件工程师面试时会碰到的问题以及答案...SmartTable 是一套数据源使用 Ajax 获取数据,并展现成表格与图像的形式,并且支持下载(思路源于talkingdata)的智能表格。...开源引入:Bootstrap 3.0,Bootstrap respond (IE解决方案),Jquery 11.02,dataTables,echarts,table2CSV 7 rejoiner https...GraphQL模式 ● 可灵活定义GraphQL模式并组成共享组件 ● 从Proto定义生成GraphQL类型 ● 基于GraphQL查询参数填充请求Proto ● 提供一个DSL来修改生成的模式 ● 通过注释获取数据的方法来加入数据源...,可对表格中的数据集进行客户端分页,亦可对表格中的数据集进行客户端排序,JavaScript 控件: ● TableView(数据表格控件), 可配置标题, 计数, 行复选框, 过滤器, 分页, 排序,

    1.1K20

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

    服务器端和客户端有许多可用的第三方库,这些库能够提供所有必需的功能,如 Web 表格中的搜索、排序和分页等。是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务器端提供搜索或其它功能的需求等。...它具有高度的灵活性,支持分页,即时搜索,多列排序;它也支持几乎所有可以被绑定的数据源。...例如,一种情景是:因为数据库中有太多的数据,所以在客户端的进行分页并不是一个好选择。表格中有百万行数据,如果用客户端分页功能来绑定,页面就会由于大量的数据行处理和HTML渲染而反应很迟钝。...我们将会实现一个具有搜索、排序和分页功能的工作表,正如下图中我们看到的: ?...在检索行为中,我们将简单地获取该表中的所有行,并将其传递给 view: public ActionResult Index() { return View(DbContext.Assets.ToList

    6.2K90

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

    通过前文,我们已经了解到使用 jQuery 插件的数据表可以很容易地实现具有搜索、排序和分页等重要功能的表格。 ?...前文中需要注意的是,所有通过插件实现的特性都是客户端的,这意味着所有的数据都首先在页面载入,然后由插件来处理客户端搜索、分页和排序的数据。...现在,在控制器文件夹中添加一个空的名为 AssetController 的控制器,这个控制器件将用于所有 Asset 的相关工作。...我们正在获取 Assets 的引用,以便能够链接到实体框架请求数据,我们可以通过 Count()函数来获取数据集表的数据数目,这个数据将会传递到 DataTablesResponse 构造函数中,成为行为方法的最后一行...在服务器端实现表格的过滤、分页和排序等功能,能够减少客户端数据处理的任务量,方便更好更快的加载并显示数据。

    5.4K80

    推荐11个GitHub上比较热门的Java项目

    3 面试指南interviews https://github.com/kdn251/interviews Star 18301 Java工程师面试指南,里面涵盖几乎所有软件工程师面试时会碰到的问题以及答案...SmartTable 是一套数据源使用 Ajax 获取数据,并展现成表格与图像的形式,并且支持下载(思路源于talkingdata)的智能表格。...开源引入:Bootstrap 3.0,Bootstrap respond (IE解决方案),Jquery 11.02,dataTables,echarts,table2CSV 7 dubbo https...GraphQL模式 ● 可灵活定义GraphQL模式并组成共享组件 ● 从Proto定义生成GraphQL类型 ● 基于GraphQL查询参数填充请求Proto ● 提供一个DSL来修改生成的模式 ● 通过注释获取数据的方法来加入数据源...,可对表格中的数据集进行客户端分页,亦可对表格中的数据集进行客户端排序,JavaScript 控件: ● TableView(数据表格控件), 可配置标题, 计数, 行复选框, 过滤器, 分页, 排序,

    1.1K20

    tp5框架无刷新分页实现方法分析

    跳转到对应的页面,并get传 page=’1′ or ‘2’; 所以无刷新需要做到两点,阻止页码 a链接跳转 和 传post 和 get都可以】,ajax传到后端控制器时,接收并存入page即可,...一定要存入page,不能是其他变量名(因为框架封装的类里面获取当前页就是从 具体做法是: 1.进入首页面(带分页的页面),用js或jQuery 给页码a标签阻止跳转; $('#pag ul li a')....attr("href",'javascript:void(0);'); 2.给各页码元素绑定点击事件,所做的逻辑就是当页码被点击时,计算或获取到要跳转的页面值。...3.确定了要跳转的页面值后,然后ajax传到后端(传递的就是page ,post get方式都可以)。...4.后端控制器获取到传,并存入$page ,其他分页的逻辑按照正常做法查询即可,只是查询出来的数据需要组装成字符串返回去。

    5.2K21
    领券