未能在第二次调用ajax按钮上单击使用DataTable服务器端脚本

Question

我使用datatable和服务器端脚本显示记录按钮点击。第一次单击按钮时，我得到了正确的响应，但第二次单击按钮时，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

• 终于找到了解决办法。单击“搜索”按钮时只想销毁datatable。这是我的更改代码。

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"}
        ]
    });


});

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

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

谢谢大家的快速反应。

Answer 2

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

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