使用 DataTable 服务器端脚本在第二次单击按钮时调用 ajax 失败答案

【问题标题】：Fail to call ajax on second time button click using DataTable server-side-scripting使用 DataTable 服务器端脚本在第二次单击按钮时调用 ajax 失败
【发布时间】：2019-04-17 09:11:00
【问题描述】：

我正在使用带有服务器端脚本的数据表来显示按钮单击记录。第一次单击按钮时，我得到了正确的响应，但第二次单击按钮时，ajax 正在调用。

我也为它使用了一个绘图功能。

我的ajax调用js文件：

$(document).on('click' , '.search-btn', function(){

var shape = "";
jQuery(".diamond_shape.diamond_selected").each(function () {
    shape += jQuery(this).attr("title") + ",";
});

var clarity = '';
jQuery("#select-clarity").each(function () {
    clarity += jQuery(this).attr("value") + ",";
});

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var dataTable = $('#example').DataTable( {
        processing: true,
        serverSide: true,
        retrieve: true,
        searching: false,   
        paging: false,
        dataType: "json",
        contentType: "application/json",
        "ajax":{
            "url" : ajaxurl, // json datasource 
            "type": "POST",
            "data": {action: 'getFilterDiamonds',dataShape: shape , dataClarity : clarity },
        },
        "columns": [
            {"data": "reportNo"},
            {"data": "reference"},
            {"data": "shape"},  
            {"data": "lab"},
            {"data": "weight"},
            {"data": "color"},
            {"data": "clarity"}
        ]
    });
    });

如何在输入值属性中添加选定的过滤器值：

【问题讨论】：

点击按钮的代码是什么？这只是数据表初始化代码
我正在使用过滤器表单，用户可以从中选择选项，并根据它在点击按钮上用户可以在不刷新页面的情况下看到结果。
我刚刚使用 onclick 功能编辑了我的代码
相信你已经把 $(document).on('click' , '.search-btn', function(){..... }); 下的所有代码都写好了如果我没记错
是的，因为在过滤器选项上单击我将它的值添加到一个输入框中，所以在提交按钮的末尾我可以获得所有过滤后的选定值。

标签： jquery ajax wordpress datatables server-side-scripting

【解决方案1】：

终于找到了解决办法。只想在单击搜索按钮时破坏数据表。这是我的更改代码。

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";

$(document).on('click' , '.search-btn', function(){

    var shape = "";
    jQuery(".diamond_shape.diamond_selected").each(function () {
        shape += jQuery(this).attr("title") + ",";
    });

    var clarity = '';
    jQuery("#select-clarity").each(function () {
        clarity += jQuery(this).attr("value") + ",";
    });

    /*- code to destory datatable -*/
    if ($.fn.dataTable.isDataTable('#example')) {
        $('#example').DataTable().destroy();
    }   
    /*---*/

    var dataTable = $('#example').DataTable( {
        "scrollX": true,
        processing: true,
        serverSide: true,
        retrieve: true,
        searching: false,
        destroy: true,  
        paging: false,
        dataType: "json",
        contentType: "application/json",
        "ajax":{
            "url" : ajaxurl, // json datasource 
            "type": "POST",
            "data": {action: 'getFilterDiamonds',dataShape: shape , dataClarity : clarity },
        },
        "columns": [
            {"data": "reportNo"},
            {"data": "reference"},
            {"data": "shape"},  
            {"data": "lab"},
            {"data": "weight"},
            {"data": "color"},
            {"data": "clarity"}
        ]
    });


});

使用以下代码数据表将删除旧数据并使用过滤器加载新数据。必须在数据表函数中设置destroy: true。

if ($.fn.dataTable.isDataTable('#example')) {
        $('#example').DataTable().destroy();
    }

感谢大家的快速回复。

【讨论】：

您的解决方案是完美的..但在我的场景中..我正在做动态分页..所以如果我点击第 3 页然后如果我设置 destroy: true 那么数据将加载到第 3 页 bt分页..它会显示在每次选择的 1 页上...请帮助...尝试了很多努力但没有得到任何解决方案。

【解决方案2】：

您已经在点击事件上初始化了 Datatable，这是它在第二次点击时不起作用的根本原因。另外请检查浏览器控制台，您应该在那里遇到一些错误。

请参考Reload Ajax request with new parameters并根据需要重构代码。

【讨论】：

在控制台中没有收到任何错误，我第一次收到 ajax 调用响应，但在第二次调用时没有在浏览器的网络选项卡中收到 ajax 调用。