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

Datatables,单击(Function)和on(submit)在第一页后不工作

Datatables是一款强大的JavaScript表格插件,用于在网页上展示和操作大量数据。它提供了丰富的功能和灵活的配置选项,使得数据的展示和交互变得更加简单和高效。

单击(Function)和on(submit)在第一页后不工作可能是由于以下原因:

  1. 事件绑定问题:可能是因为事件绑定的时机不正确或者绑定的元素在第一页后被重新加载导致事件失效。可以尝试使用事件委托的方式绑定事件,或者在Datatables的回调函数中重新绑定事件。
  2. 分页导致的DOM元素变化:当切换到第二页或其他页时,Datatables会重新渲染表格,可能导致之前绑定的事件失效。可以尝试使用Datatables提供的回调函数来重新绑定事件,例如drawCallback。
  3. 异步加载数据:如果表格数据是通过异步请求加载的,可能是因为数据加载完成后没有重新绑定事件。可以在数据加载完成后重新绑定事件,或者使用Datatables提供的ajax事件来处理。

为了解决这个问题,可以尝试以下方法:

  1. 使用事件委托:将事件绑定到表格的父元素上,通过事件冒泡的方式来处理单击和提交事件。这样无论表格如何变化,事件都能被正确处理。
  2. 使用Datatables的回调函数:例如drawCallback,在每次表格重绘完成后重新绑定事件。
  3. 使用ajax事件:如果数据是通过异步请求加载的,可以使用Datatables提供的ajax事件,在数据加载完成后重新绑定事件。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性、可靠的云服务器实例,可满足不同规模和业务需求。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于各种场景下的数据存储和管理。详情请参考:腾讯云对象存储

请注意,以上答案仅供参考,具体解决方法可能需要根据具体情况进行调试和调整。

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

相关·内容

Datatables表格插件,你用过吗?

分页,即时搜索排序 几乎支持任何数据源:DOM, javascript, Ajax 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...并且给form表单禁止submit提交。...ajax请求中利用data属性动态实时获取用户输入的数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要的字段值; <form...第一种实现方法是前端处理, createdRow:function (row, data, dataIndex) {}回调方法中获取到当前所在行的最后一列,然后把html添加进去。...可以模型中定义一个字段(我这里叫action)只要和你的colums:[{data:'action'}]对应就可以。使用laravel的模型属性方法去实现。 <?

6K30

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

从该对话框中,跳转到 Web,并选择 ASP.NET Web 应用程序项目,然后单击确定。 ? 模板页面,选择 MVC,如果编写了单元测试,请先做检查,然后点击确定。...现在,控制器文件夹中添加一个空的名为 AssetController 的控制器,这个控制器件将用于所有 Asset 的相关工作。... nugget 包安装成功,我们需要在视图中引入 jQuery DataTables 的必要的 JS CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...属性为 true,这也就告诉表格会在服务器端进行分页,过滤排序,现在所有的数据不会立刻加载,而是第一页数据会默认展示出来,更多的数据会当用户触发时才加载,处理的属性会在检索行为中显示这个加载过程。...表格控件是项目开发中经常用到的控件,其中以性能著称的是FlexGrid表格控件,这是一款轻量级的高性能表格控件,加载滚动速度比竞争对手快10倍以上,能提供丰富的功能集,而膨胀核心控件。

5.4K80

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

我们将会实现一个具有搜索、排序分页功能的工作表,正如下图中我们看到的: ?...从对话框中跳转到 Web,选择 ASP.NET Web 应用程序项目,然后单击确定。 ? 模板中选择 MVC,如果编写了应用的单元测试,请先做检查,并点击 OK。 我们的工程都是用基本的功能创建的。...现在,控制器文件夹中添加一个空的名为 AssetController 的控制器,这个控制器件将用于所有 Asset 的相关工作。... nugget 包安装成功,我们需要在视图中引入 jQuery DataTables 的必要的 JS CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...表格控件是项目开发中经常用到的控件,其中以性能著称的是FlexGrid表格控件,这是一款轻量级的高性能表格控件,加载滚动速度比竞争对手快10倍以上,能提供丰富的功能集,而膨胀核心控件。

6.1K90

instantclick实现的全站无刷新

这里不着重讲instantclick的使用方法,建议去官网查阅 搜索功能这样的非超链接怎么实现刷新 香菇的点拨之下,我们强行将搜索功能表单模式变成了超链接,效果如下 搜索功能.jpg 因为搜索结果地址一般为是站点地址加...随后事实获取输入框的内容B,然后将AB拼接,就获得了最终地址C,然后将地址C添回图标的超链接地址上,这是我们点击图标就可以预加载的条件下实现搜索内容了,代码如下: var bb=$("#soux"...==13){ $('#soux').get(0).click(); } }, }) 至此结束 评论也兼容呢 然后找到了个可用的ajax评论的js,自己改了改就用上了, 然后友人C的帮助下...,修复了评论嵌套的问题,然后他又提出个问题 如果你启用了评论分页功能,由于typecho显示最新评论总是第一页,所以当用户不在第一页发出了母评论,用户是看不到评论的,因为评论是第一页 最后我根据上边搜索功能的原理...= '.submit', new_id = '', parent_id = ''; click_bind(); $(comment_form).submit(function

1K10

基于RequireJSJQuery的模块化编程——常见问题解析

关于AMDCMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块定义)的典型是淘宝的seajs。 他们的相同点是,都会异步的加载js。...首先需要添加jquery插件的依赖,这里用两个插件举例子——jquery-uijquery-datatables requirejs.config({ baseUrl: './', paths...'] } }); requirejs(['jquery','jquery-ui','jquery-dataTables'], function ($){ .... }); 由于jquery...比如,你的模块加载,对页面的某个元素$('#test')绑定了click事件。但是使用了某个UI插件,这个插件会重新渲染DOM元素,test对应的click事件就失效了。...解决办法: 把事件绑定推迟到DOM元素渲染完再手动触发绑定; 也可以使用事件捕获代替DOM元素的事件绑定(太麻烦了...推荐)。

2.9K100

jquery.datatables 分页功能

官网链接:https://datatables.net/manual/server-side 有时候,从DOM读取数据的时间太慢或笨拙,特别是处理数千或数百万的数据行时。...columns[i][orderable] -- 布尔 // 标记以指示此列是否可以(true)或(false)。这是由columns.orderable。...} order[i]columns[i]被发送到服务器的参数的信息数组: order[i] - 是一个定义有多少列的数组 - 即如果数组长度为1,则执行单列排序,否则正在执行多列排序。...recordsTotal -- int // 过滤前的总记录(即数据库中的记录总数) recordsFiltered -- int // 过滤的总记录(即应用过滤的记录总数)不仅仅是该数据页面返回的记录数...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以jQuery请求中使用的选项,你也可以使用DataTables

4.8K20

Cypress录制自动化脚本

{  "experimentalStudio": true } 我们以登录案例,以演示Cypress测试方法、模式工作流的真实使用。它将用于演示下面Cypress Studio的功能。...image.png 测试完成运行,将鼠标悬停在命令日志中的测试上方,以显示“将命令添加到测试”按钮。单击“添加要测试的命令”将启动Cypress Studio。 image.png 2....生成的测试代码 查看我们的测试代码,我们可以看到单击“ Save Commands”(保存命令)更新了测试,并使用了我们Cypress Studio中记录的操作。...添加新测试 您可以通过我们定义的块上单击“添加新测试”,将新测试添加到任何现有describe或块中。...image.png 最后,查看我们的测试代码,我们可以看到单击“ Save Commands”(保存命令)更新了测试,并使用了我们Cypress Studio中记录的操作。

2.2K32

java表单提交方法_表单提交的几种方式

使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。...一般来说,表单数据无效而不能发送给服务器时,可以使用这一技术。 5、JavaScript中,以编程方式调用submit()方法也可以提交表单。...submit事件,因此要记得调用此方法之前先验证表单数字据。...第一次提交表单,如果长时间没有反映,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。结果往往很麻烦(因为服务器要处理重复请求),或者造成错误(如果是下了订单,那么可能会多定好几份)。...解决这一问题的办法有两个: 第一次提交表单就禁用提交按钮; 利用onsubmit事件处理程序取消后续的表单提交操作。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

4.9K40

datatables使用教程

分页,即时搜索排序 几乎支持任何数据源:DOM, javascript, Ajax 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...做法有很多,可以ajax异步拿到数据,进行dom操作,把数据填入table中,进行datatables.ajax.reload() 这样当然可以,但是代码很乱,难看。...要求服务器接收到此参数再返回(具体看 下面) start integerJS 第一条数据的起始位置,比如0代表第一条数据 length integerJS 告诉服务器每页显示的条数,这个数字会等于返回的...你可以定义一个错误来描述服务器出了问题的友好提示 service层 UserServiceImpl.java 这里我使用的tk.mybatis做通用service通用mapper。...把datatables传过来的参数start length 作为pagehelper的offset pageSize.

7K20

教程 | 如何在浏览器使用synaptic.js训练简单的神经网络推荐系统

为什么呢! 项目概览 我们将构建一个基于人工神经网络的简单 Web 应用程序推荐系统。该应用程序包含两页,第一页显示书籍,第二页显示电影。...第一页中选择感兴趣的书籍 ? 第二页中选择感兴趣的电影 ?...这些权重需要训练,来达到使神经网络正常工作的要求。假设我们有一个数据表,其中包含 1000 对输入相应的输出。我们首先产生 0 1 之间的随机数给出所有权重,然后遍历所有数据对。...然后该模型展示 20 张含有电影信息的卡片,让用户选择他/她感兴趣的项目,用户完成选择并单击下一步,网络实例将调用激活函数,并给出该用户可能想要的书籍的预测值(基于 20 种书籍选项)。...当用户第一页单击「下一页」按钮,我们「onClick」功能中调用激活函数,并将其作为预测结果保存在 Vue 组件的数据中。然后在用户选择他/她感兴趣的电影之后,调用重新训练函数。

1.3K40
领券