JQuery Datatable请求两次问题处理

最新推荐文章于 2025-07-01 14:21:23 发布

猿来是U_U

最新推荐文章于 2025-07-01 14:21:23 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：错误解决方案前端知识

本文链接：https://blog.youkuaiyun.com/qq_39949109/article/details/80742737

前端知识同时被 2 个专栏收录

17 篇文章

订阅专栏

错误解决方案

4 篇文章

订阅专栏

本文解决了使用Datatable时点击搜索按钮导致的重复请求问题，包括如何清除和销毁已初始化的Datatable，以及如何处理自定义搜索框引起的重复请求。

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

（一）

问题：点击一次搜索按钮，却发送了两次请求，一次是原条件的请求，一次是新的请求。新的请求将原条件请求覆盖，导致查询数据出错

解决：

if ($('#tree_table').hasClass('dataTable')) {
         var table = $('#tree_table').dataTable();
        // table.fnClearTable(); //清空一下table
         table.fnDestroy(); //还原初始化了的datatable
     }

table.fnClearTable()执行时，调用了一次fnDraw方法，该方法会调用Ajax请求，然后在DataTable的_fnInitialise方法中会再调用一次Ajax请求。因此可以将此方法注释；

（二）

问题：不使用Datatable的搜索框，自定义搜索框使用回车事件时，会触发两次请求，一次是原条件的请求，一次是新的请求。新的请求将原条件请求覆盖，导致查询数据出错；

解决：通过Google页面调试发现回车触发搜索事件能正常执行，但是会触发新的请求，尝试将回车事件注释，还是会出发新的请求；所以将回车触发事件之后，强制结束，问题解决；

$("#firstSearch").bind("keydown", function (e) {
    var theEvent = e || window.event;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        listTabSearch();
        return false;//问题解决关键
    }
});