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

您已经在点击事件上初始化了数据表，这是为什么它不能在第二次点击上工作的根本原因，请检查浏览器控制台，那里应该有一些错误。

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

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

2 个答案: