调试问题：datatables进行搜索后，再次按下分页，表格数据无法改变

朱雀 2022-05-29 06:16 159阅读 0赞

问题分析：

这是一个复杂的问题。

既然是调用了datatables的框架，那么分页等框架内的工具都是按照表格内部属性进行操作的，也就是各种调用都是按照表格内部命名进行操作的。

所以，如果要自定义搜索框，那么，如何让表格与自定义的搜索框进行耦合呢？这就是今天的bug出现的问题。

问题现场重现：

1.页面加载完成效果：

（也就是没有按下“搜索"）

![Image 1][]

2.按下搜索之后：

第一页：

![Image 1][]

第二页：

![Image 1][]

第一页和第二页的表格数据没有改变。

解决方案：

最终目的：设置表格查询入参。

步骤：

1.获取搜索框值

**var** searchContent = $( '\#searchContent' ). val () ;

2.设置加载表格对应的ajax的data属性

"ajax" : \{

url : '[http://localhost:8080/message/query/queryPesonalMessageLikeTMBySearchContent][http_localhost_8080_message_query_queryPesonalMessageLikeTMBySearchContent]', //接口地址

type : "get" ,

data : \{

searchContent : searchContent

\} //数据参数    传递的参数

\}

3.编写按钮对应的js，操作表格中ajax对应的入参数据的值如下面的： oTable . fnSettings (). ajax . data . searchContent =$( '\#searchContent' ). val () ;

//搜索JS

$( '\#searchButton' ). click ( **function** ()\{

**var** table = $( '\#querylogTable' ). DataTable () ;

**var** searchContent =$( '\#searchContent' ). val () ;

oTable . fnSettings (). ajax . data . searchContent =$( '\#searchContent' ). val () ;

table. ajax . reload () ;

\}) ;

4.然后就是进行table.ajax.reload()进行重载表格数据

[Image 1]: 
[http_localhost_8080_message_query_queryPesonalMessageLikeTMBySearchContent]: http://localhost:8080/message/query/queryPesonalMessageLikeTMBySearchContent

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 datatable自定义搜索和导出按钮并解决在后端分页无法导出全部数据的问题

为了方便使用，即使是不懂datatable的人也能上手使用，所以还是自定义的好，按钮和搜索直接和往常一样根据html中定义按钮：分了两种，有一个特殊的类型colvis

妖狐艹你老母/ 2022年12月26日 14:29/ 0 赞/ 250 阅读

相关 java分页数据再次进行分页操作

前言分页数据操作以后再次分页 -------------------- 代码实现 PageHelper.startPage(page, pageSiz

￡神魔★判官ぃ/ 2022年11月04日 11:19/ 0 赞/ 278 阅读

相关插件介绍: DataTables 表格分页

官网：英文：[https://datatables.net/][https_datatables.net] 中文：[http://www.datatables.clu

Love The Way You Lie/ 2022年06月15日 12:19/ 0 赞/ 337 阅读

相关调试问题：datatables进行搜索后，再次按下分页，表格数据无法改变

问题分析：这是一个复杂的问题。既然是调用了datatables的框架，那么分页等框架内的工具都是按照表格内部属性进行操作的，也就是各种调用都是按照表格内部命名进行操作的

朱雀/ 2022年05月29日 06:16/ 0 赞/ 160 阅读

相关 layui 数据表格+分页+搜索+checkbox+缓存选中项数据

在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 　　主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 　　当选中一些数据的时

àì夳堔傛蜴生んèń/ 2022年03月22日 08:26/ 0 赞/ 246 阅读

相关 LayUI数据表格通用工具栏分页+搜索+排序

完成效果 1、接收和展示后端接口传来的数据； 2、分页和跳页；设置每页的数量； 3、工具栏：查看、修改、删除； 4、工具栏：筛选列、导出Excel、打印；

客官°小女子只卖身不卖艺/ 2021年12月11日 11:43/ 0 赞/ 1536 阅读

相关 JQuery.datatables只刷当前页面表格数据，保留分页页码

JQuery.datatable无刷新多种初始化表格的使用方式。 ajax.reload( callback, resetPaging ) 里面有二个参数： cal

朱雀/ 2021年10月24日 06:38/ 0 赞/ 641 阅读

相关 dataTable 分页事件下拉框改变事件以及搜索框触发事件

注：tablemachkanbandataTableScroll_length表示select 下拉框的name名称 table

朱雀/ 2021年10月08日 07:42/ 0 赞/ 644 阅读

相关同一个页面多个dataTable 分页搜索

![Center][]![Center 1][]![Center 2][]

拼搏现实的明天。/ 2021年10月08日 06:24/ 0 赞/ 486 阅读

相关 datatable组件后端分页

官网： [https://datatables.net/][https_datatables.net] [https://datatables.club/][https_d

系统管理员/ 2021年05月12日 11:55/ 0 赞/ 571 阅读