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

最新推荐文章于 2023-09-22 14:17:18 发布

qq_34244429

最新推荐文章于 2023-09-22 14:17:18 发布

阅读量1k

点赞数

分类专栏： js dataTables 文章标签： bootstrap dataTables分页搜索

本文链接：https://blog.csdn.net/qq_34244429/article/details/79607775

版权

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

dataTables

1 篇文章

订阅专栏

在使用datatables框架时遇到一个问题，即在自定义搜索后进行分页，表格数据显示错误。分析发现是搜索与分页的耦合问题。通过获取搜索框值，设置ajax数据参数，并在按钮点击事件中更新表格ajax入参，最后调用table.ajax.reload()重载数据，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题分析：

这是一个复杂的问题。

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

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

问题现场重现：

1.页面加载完成效果：

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

2.按下搜索之后：

第一页：

第二页：

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

解决方案：

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

步骤：

1.获取搜索框值

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

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

 
  "ajax" 
  : { 
 
  url 
  : 
  '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 
  () 
  ; 
 
 
  }) 
  ; 
 