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

我使用带有服务器端脚本的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"}
        ]
    });
    });

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

---

您已经初始化了Datatable on click事件，这是它在第二次单击时无法工作的根本原因。另外，请检查浏览器控制台，您应该在那里得到一些错误

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

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

---

谢谢大家的快速回复。

点击按钮时写的代码是什么？这是唯一的datatable初始化代码我正在使用筛选表单，用户可以从中选择选项，并根据它单击按钮用户可以看到结果，而无需页面刷新。我刚刚用onclick函数编辑了我的代码。我相信您已经在$document下编写了所有代码。单击，'.search btn'，函数{…}；如果我没有错是的，因为在筛选选项点击时，我将在一个输入框中添加它的值，所以在提交按钮的末尾，我可以得到所有筛选的选定值。在控制台中没有得到任何错误，第一次我得到ajax调用响应，但在第二次调用时，在浏览器的网络选项卡中没有得到ajax调用。您的解决方案是完美的。但在我的场景中。。我正在进行动态分页。因此，如果我单击第3页，然后如果我设置destroy:true，那么将在分页中加载第3页bt的数据。它将在每次选择的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"}
        ]
    });


});

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