JQuery-Plugin Datatables来自数据库

时间:2011-10-20 09:05:40

标签: jquery plugins datatables

我需要从数据库加载状态。我不知道如何改变状态(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")
}); 

1 个答案:

答案 0 :(得分:0)

要在数据库中存储和加载数据表设置,请使用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>