DataTables - stateSaveCallback和其他在点击时激活的功能

时间:2017-11-20 16:03:11

标签: javascript jquery datatables

如何实现stateSaveCallback /“colReorder”/“buttons”:['colvis']在用户点击按钮时启用?

基本上,我需要用户只有在单击编辑按钮时才能编辑数据表,并且当他按下保存按钮时要保存更改...如果用户没有按下保存按钮,则无需更改将被保存,如果他没有点击编辑按钮,他将无法进行任何更改...任何想法如何做到这一点?

目前我的dataTable有以下代码。

$('#resultsTable').DataTable({
    "stateSave": true,
    // "serverSide": true,

    // Rows per page
    "lengthMenu": [
        [25, 50, 100, 150, 200, 250, -1],
        [25, 50, 100, 150, 200, 250, "All"]
    ],
    "dom": '<"top"Bfi>rt<"bottom"lp><"clear">', // Show entries on bottom

    // Scrolling table
    "scrollY": 600,        // Constrain the DataTable to the given height
    "deferRender": true,   // Elements will be created only when the are required
    "scroller": true,      // Enable vertical scrolling in DataTables
    "scrollX": true,       // Scroll horizontal
    "colReorder": true,    // Column reordering
    "buttons": ['colvis'], // Enable column visibility button

    // Grouping table
    "columnDefs": [{ "visible": false, "targets": 0 }], // Mades target column hidden // if commented ---> Uncaught TypeError: Cannot read property 'style' of undefined
    "order": [
        [0, 'asc']
    ], // Sorting based on column
    'stateSaveParams.dt': function(e, settings, data) {
        data.search.search = "";
        // table.columns.visible();
    },

    // SaveState
    'stateSaveCallback': function(settings, data) {
        $.ajax({
            'url': 'saveDtableState.php',
            'data': { name: 'resultsTable', 'state': data },
            'dataType': 'json',
            'method': 'POST',
            "success": function() {},
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        });
    },
    'stateLoadCallback': function(settings, callback) {
        $.ajax({
            'url': 'loadDtableState.php',
            'data': { name: 'resultsTable' },
            'dataType': 'json',
            'type': "POST",
            success: function(data) {
                callback(data);
                console.log('test: ' + data);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        });
    }
})

如果我使用它会起作用吗?

$('#saveEdit').on("click", function(){
    table.state.save();
});

或者每次我做出改变时它会不断保存表的状态吗? (我不想那样)。以及如何实施其他事情? *任何提示? *

1 个答案:

答案 0 :(得分:2)

var run = false;
run = true;
table.state.save(run); //runs the state save function



//SaveState
                    'stateSaveCallback': function(settings, data) {
                        if (run == true) {
                            $.ajax({
                                'url': 'hfdjs.php',
                                'data': data ,
                                'dataType': 'json',
                                'method': 'POST',
                                "success": function() {},
                                error: function(xhr, ajaxOptions, thrownError) {
                                    console.log(thrownError);
                                }
                            });
                        }
                        run = false;
                    }