使用 DataTable 服务器端脚本在第二次单击按钮时无法调用 ajax

Question

我正在使用带有服务器端脚本的数据表来显示单击按钮时的记录。第一次单击按钮时，我得到了正确的响应，但第二次单击按钮时 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"}
        ]
    });
    });

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

Answer 1

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

请参考并根据需要重构代码。

Answer 2

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

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();
    }

感谢大家的快速回复。

使用 DataTable 服务器端脚本在第二次单击按钮时无法调用 ajax

Fail to call ajax on second time button click using DataTable server-side-scripting

ajax

wordpress

jquery

datatables

server-side-scripting