Не удается вызвать ajax при повторном нажатии кнопки с помощью сценариев на стороне сервера DataTable

Question

Я использую таблицу данных со сценариями на стороне сервера, чтобы показывать записи по нажатию кнопки. При первом нажатии кнопки, я получаю ответ правильно, но при втором нажатии кнопки ajax вызывает.

Я также использовал для этого функцию рисования.

Мой файл ajax call 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

• Наконец-то найдено решение.просто хочу уничтожить данные при нажатии на кнопку поиска.Вот мой код с изменениями.

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

Спасибо всем за быстрый ответ.

Answer 2

Вы инициализировали событие Datatable при щелчке, оно является основной причиной того, почему оно не работает при втором щелчке, также проверьте консоль браузера, там должно появиться сообщение об ошибке.

Пожалуйста, обратитесь Обновить Ajaxзапросите новые параметры и выполните рефакторинг кода в соответствии с вашими потребностями.