如何在Ajax调用中将oData（从DataTable）发送为“数据”？

Question

I have an Ajax Table based on DataTable plug-in, which keep search parameters in localStorage. All good by now.

a) console.debug( oData ) returns:

Object
    ...
    time : 1488468181954
    name : "John Doe"
    ...

b) And here is my script :

var ShowUsers = function () {

    var Users = function () {

        var grid = new Datatable();

        grid.init({
            src: $("#datatable_ajax")

            dataTable: {
                // save datatable state(pagination, sort, etc) in cookie.
                "bStateSave": true, 

                 // save custom filters to the state
                "fnStateSaveParams": function ( oSettings, sValue ) {
                    $("#datatable_ajax tr.filter .form-control").each(function() {
                        sValue[$(this).attr('name')] = $(this).val();
                    });

                    return sValue;
                },

                // read and populate the filter inputs
                "fnStateLoadParams": function ( oSettings, oData ) {
                    //Load custom filters
                    $("#datatable_ajax tr.filter .form-control").each(function() {
                        var element = $(this);
                        if (oData[element.attr('name')]) {
                            element.val( oData[element.attr('name')] );
                        }
                    });

                    return true;
                },

                "ajax": {
                    "url": "/admin/users", // ajax source
                    "data": {
                        name: oData.user_name // here is the problem
                    },
                    "headers": {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            }
        });
    }

    return {
        init: function () {
            Users();
        }
    };
}();

jQuery(document).ready(function() {
    ShowUsers.init();
});

The problem appear when I try to use oData as a variable in the Ajax Call.

"ajax": {
    ...
    "data": {
        name: oData.user_name // return the Undefined error
    },
    ...
}

I was trying many solutions, the best so far it was to load Ajax in fnStateLoaded , like this:

"fnStateLoaded": function (oSettings, oData) {
  // Ajax here
},

... but it is useless because I need Ajax to remain "ajax": {} not $.ajax( {}); .

That being said, any advice on how to get oData and use it?

PS: I tried to get data right from the inputs, but at that time fnStateLoadParams did not manage to pass the data to the Inputs, so $("input[name=user_name]").val(); returns undefined as well.

Thank you all in advance.

David

Answer 1

You can either assign oData to a global variable or use state.loaded() API method to retrieve last loaded state in Ajax call.

For example:

"ajax": {
    "url": "/admin/users", // ajax source
    "data": function(data, settings){
       var api = new $.fn.dataTable.Api( settings );

       var state = api.state.loaded();
       if(state.hasOwnProperty('user_name')){
          data.name = state.user_name;
       }
    },
    "headers": {
       'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
}

Answer 2

I found a clean and easy solution for this problem.

grid.getDataTable().ajax.params();

After I obtained the oData I pass it to the Ajax like this:

var Users = function () {
    ...
}

oData = grid.getDataTable().ajax.params(); // get oData
grid.setAjaxParam("name", oData.name); // pass the parameter
grid.getDataTable().ajax.reload(); // reload the table