Question

我有一个基于DataTable插件的Ajax表，它将搜索参数保存在localStorage中。一切都很好。

a） console.debug（ oData ）返回：

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

b）这是我的脚本：

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

当我尝试在Ajax Call中使用 oData 作为变量时，会出现问题。

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

我尝试了很多解决方案，到目前为止最好是在 fnStateLoaded 中加载Ajax，如下所示：

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

...但它没用，因为我需要Ajax保持“ajax”：{} 而不是 $ .ajax（{}）; 。

话虽如此，有关如何获取oData并使用它的任何建议吗？

PS：我试图从输入中获取数据，但那时 fnStateLoadParams 无法将数据传递给输入，因此 $（“input [name = user_name] ]“）。val（）; 也返回 undefined 。

提前谢谢大家。

大卫

Answer 1

您可以将oData分配给全局变量，也可以使用state.loaded() API方法在Ajax调用中检索上次加载的状态。

例如：

"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

我找到了解决此问题的简洁方法。

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

获得 oData 后，我将其传递给Ajax，如下所示：

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

如何在我的Ajax调用中将oData（来自DataTable）作为“数据”发送？

2 个答案: