来自数据库的 JQuery-Plugin 数据表状态答案

【问题标题】：JQuery-Plugin Datatables state from database来自数据库的 JQuery-Plugin 数据表状态
【发布时间】：2011-10-20 09:05:39
【问题描述】：

我需要从数据库加载状态。我不知道如何更改状态（ColReorder、ColVis 等）。在第一次加载时，我在fnStateLoadCallback 中设置了我的数据库中的设置。然后我使用 da 按钮仅单击 oTableDrucken.fnReloadAjax(); 并将从数据库设置我的新设置，但他没有通过 fnStateLoadCallback 函数。

oTableDrucken = $('#table_drucken').dataTable({
        "bServerSide": false,
        "bProcessing": true,
        "bLengthChange": false, 
        "bAutoWidth" : false,
                "oColVis": {
                    "buttonText": "Zeige/Verstecke Spalten"
                },
        "sDom": 'r<"F"<"toolbar"RfC>>t<"F"i>',
        "sAjaxSource": "includes/sites/json_data.php",
                "fnServerData": function( sSource, aoData, fnCallback  ) {
                $.ajax({
                    "dataType": 'json', 
                    "type": "POST", 
                    "url": sSource, 
                    "data": aoData, 
                    "success": fnCallback
                });
        },
        "fnInitComplete": function (sdata,responseData) {
                    init_TableTools(oTableDrucken,responseData["logo"]);
        },
        "aoColumns": [          
            /* 1 ID */   { "sClass": "name", "mDataProp": "id" , "sName": "id"  },
            /* 2 Name */   { "sClass": "name", "mDataProp": "name" , "sName": "name"  },    
        ],
                "bStateSave": true,
                "fnStateSaveCallback": function ( oSettings, sValue ) {
            //Gives me the ColReorder Settings
            var valueObj = $(oTableDrucken).dataTable().dataTableSettings[0].aoStateSave[1].fn(null,sValue)+"}";
                    dataTableSettings = $.parseJSON(valueObj);
            return sValue;
                },
                "fnCookieCallback": function(sName, oData, sExpires, sPath) {
                    console.log("cookieCallback");   
                    return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
                },
                "fnStateLoadCallback": function ( oSettings, oData ) {
                    oData.ColReorder = dataTableSettings.ColReorder;
                oData.abVisCols = dataTableSettings.abVisCols;
            return true;
            },
        "bJQueryUI": true,
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "oLanguage": oCustomLanguage("drucken")
});

【问题讨论】：

标签： jquery plugins datatables

【解决方案1】：

要在数据库中存储和加载数据表设置，请使用 fnStateSave 和 fnStateLoad 函数（不要忘记在加载时将 bStateSave 设置为 true 并将 async 设置为 false）

我使用 jQuery 解析 JSON，因为如果设置没有保存在数据库中，JSON.parse 会导致错误。

<script>
var oTable = $('.phonebook').dataTable( {
    "bStateSave": true,
    "fnStateLoad": function (oSettings, oData) {
        var o;

        $.ajax({
            type: "POST",
            url: "/ajax/loadState",
            async: false,
        }).done(function(data) {
            o = $.parseJSON(data);
        });

        return o;
    },
    "fnStateSave": function (oSettings, oData) {
        $.ajax({
            type: "POST",
            url: "/ajax/saveState",
            data: "data=" + JSON.stringify(oData),
        });
    },
});
</script>

【讨论】：