發送前在DataTable上添加ajax數據

Question

我在變量中初始化了DataTable：

var dataTable = $("#selector").DataTable({
    processing: true,
    serverSide: true,
    ajax: $.fn.dataTable.pipeline({
        dataType: "json",
        url: "/path/ajaxurl",
        data: {
            "fruits": "apple",
            "veggies": "banana",
        },
        dataSrc: "data"
    }),
    sPaginationType: "extStyle"
});

現在，在腳本的某個地方，我有這個復選框，當更改時，它將在上面的ajax中添加新數據，然后初始化draw() ：

$(document).on("change", "#add-some-liquors", function(e) {
    // some validations here

    // My attempt to add this data
    dataTable.data({"drinks" : "coca-cola"});

    // Draw the dataTables
    dataTable.clearPipeline().draw();
});

似乎dataTable.data({"drinks" : "coca-cola"}); 當我在后端檢查時沒有在POST上添加飲料，我只得到了蘋果和香蕉這兩個默認的初始化數據。 我想念什么？

Answer 1

根據API， .data方法僅用於檢索。 嘗試將數據保存在變量中，更新該對象，然后在.ajax方法中使用它。

var items = {}

ajax: $.fn.dataTable.pipeline({
    dataType: "json",
    url: "/path/ajaxurl",
    data: items,

Answer 2

將您的數據聲明為變量，然后添加飲料值。

 var data = { "fruits": "apple", "veggies": "banana", }; console.log(data); //On the click event $('#chk').on('click', function() { if ($(this).is(':checked')) { data['drinks'] = 'coca-cola'; } else { //When unchecking the option, set it's value to null data['drinks'] = null; //Or delete the property. //delete data['drinks']; } console.log(data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="chk" /> 

Answer 3

可以將ajax.data對象初始化為一個函數。 每次獲取數據時都會評估該功能。 在此示例中，全局變量selectedDrink的值將與ajax請求一起作為drinks字段發送。

var selectedDrink = "";

var dataTable = $("#selector").DataTable({
    processing: true,
    serverSide: true,
    ajax: $.fn.dataTable.pipeline({
        dataType: "json",
        url: "/path/ajaxurl",
        data: function(d) {
            d.fruits = "apple";
            d.veggies = "banana";
            d.drinks = selectedDrink;
        },
        dataSrc: "data"
    }),
    sPaginationType: "extStyle"
});


$(document).on("change", "#add-some-liquors", function(e) {
    selectedDrink = "coca-cola";

    // Draw the dataTables
    dataTable.clearPipeline().draw();
});