【问题标题】:Create Page Persistence with Tabulator使用制表符创建页面持久性
【发布时间】:2020-05-28 19:17:52
【问题描述】:

我正在尝试使用户能够离开带有 Tabulator 的页面并返回并加载他们之前的相同视图(包括他们所在的页面、过滤器和他们启用的排序器) .

我尝试使用 Tabulator 的持久化功能(如下所示)使其工作,但我收到以下错误:Pagination Error - Requested page is out of range of 1 - 1: 3

        //define new tabulator instance
        var table = new Tabulator("#production-data-table", {
            ajaxURL:"scripts/order_status.php?action=fetch_production_data", //ajax URL
            pagination:"remote",
            persistenceMode: "local",
            persistenceID: "production-data",
            persistence: {
                 sort: true, //persist column sorting
                 filter: true, //persist filter sorting
                 group: true, //persist row grouping
                 page: true, //persist page
                 columns: true, //persist columns
            },
            ajaxFiltering:true,
            ajaxSorting:true,
            layout:"fitColumns",
            columns:[
                {title:"Enterprise", field:"Enterprise", sorter:"string", width:100, headerSort:false},
                {title:"Job Number", field:"Job Number", sorter:"number", width:100, headerSort:false},
                {title:"LN #", field:"LN #", sorter:"string", formatter:"html", align:'center', width:80, headerSort:false},
                {title:"Description", field:"Description", sorter:"string", headerSort:false},
                {title:"QTY", field:"QTY", sorter:"string", headerSort:false, align: 'center', width: 40,},
                {title:"AS400 Ship Date", field:"AS400 Ship Date", sorter:"date", align:"center", width:100},
                {title:"Exp. Ship", field:"Est Ship", sorter:"date", align:"center", width:100, headerSort:false},
                //{title:"QC", field:"QC", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"Pole Barn", field:"Pole Barn", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"Thermoforming", field:"Thermoforming", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"Vinyl/Paint", field:"Vinyl/Paint", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"FA1", field:"Fnl Asmb 1", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"FA2", field:"Fnl Asmb 2", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"Crating", field:"Crating", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"Shipping", field:"Shipping", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                {title:"New", field:"New", visible:false},
                {title:"Revised", field:"Revised", visible:false},
            ],
            ajaxResponse:function(url, params, response) {
                var obj = JSON.parse(JSON.stringify(response)); //parse response
                var array_to_output = obj['tabulator_get_session'];

                console.debug(obj['tabulator_get_session']);
                console.debug(obj['current_page']);

                return response;
            },

            rowFormatter:function(row) {

                var data = row.getData();
                var data = JSON.parse(JSON.stringify(row.getData()));
                var orderNew = data['New'];
                var orderRevised = data['Revised'];

                if ( orderNew == 1 ) {
                    row.getElement().style.backgroundColor = "#69db88";
                    row.getElement().style.fontWeight = "bold";
                }

                if ( orderRevised == 1 ) {
                    row.getElement().style.backgroundColor = "#dbd069";
                    row.getElement().style.fontWeight = "bold";
                    row.getElement().style.fontStyle = "italic";
                }

            },
            placeholder:"No Data Available", //display message to user on empty table

        });

我会留下评论而不是编辑帖子。但是网站不允许我这样做。

【问题讨论】:

    标签: javascript php tabulator


    【解决方案1】:

    尝试使用以下 4.6 版的代码块:

            //define new tabulator instance
            var table = new Tabulator("#production-data-table", {
                ajaxURL:"scripts/order_status.php?action=fetch_production_data", //ajax URL
                pagination:"remote",
                persistenceMode: "local",
                persistenceID: "production-data",
                persistence: {
                     sort: true, //persist column sorting
                     filter: true, //persist filter sorting
                     group: true, //persist row grouping
                     page: true, //persist page
                     columns: true, //persist columns
                },
                ajaxFiltering:true,
                ajaxSorting:true,
                layout:"fitColumns",
                columns:[
                    {title:"Enterprise", field:"Enterprise", sorter:"string", width:100, headerSort:false},
                    {title:"Job Number", field:"Job Number", sorter:"number", width:100, headerSort:false},
                    {title:"LN #", field:"LN #", sorter:"string", formatter:"html", align:'center', width:80, headerSort:false},
                    {title:"Description", field:"Description", sorter:"string", headerSort:false},
                    {title:"QTY", field:"QTY", sorter:"string", headerSort:false, align: 'center', width: 40,},
                    {title:"AS400 Ship Date", field:"AS400 Ship Date", sorter:"date", align:"center", width:100},
                    {title:"Exp. Ship", field:"Est Ship", sorter:"date", align:"center", width:100, headerSort:false},
                    //{title:"QC", field:"QC", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"Pole Barn", field:"Pole Barn", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"Thermoforming", field:"Thermoforming", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"Vinyl/Paint", field:"Vinyl/Paint", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"FA1", field:"Fnl Asmb 1", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"FA2", field:"Fnl Asmb 2", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"Crating", field:"Crating", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"Shipping", field:"Shipping", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                    {title:"New", field:"New", visible:false},
                    {title:"Revised", field:"Revised", visible:false},
                ],
                ajaxResponse:function(url, params, response) {
                    var obj = JSON.parse(JSON.stringify(response)); //parse response
                    var array_to_output = obj['tabulator_get_session'];
    
                    console.debug(obj['tabulator_get_session']);
                    console.debug(obj['current_page']);
    
                    return response;
                },
    
                rowFormatter:function(row) {
    
                    var data = row.getData();
                    var data = JSON.parse(JSON.stringify(row.getData()));
                    var orderNew = data['New'];
                    var orderRevised = data['Revised'];
    
                    if ( orderNew == 1 ) {
                        row.getElement().style.backgroundColor = "#69db88";
                        row.getElement().style.fontWeight = "bold";
                    }
    
                    if ( orderRevised == 1 ) {
                        row.getElement().style.backgroundColor = "#dbd069";
                        row.getElement().style.fontWeight = "bold";
                        row.getElement().style.fontStyle = "italic";
                    }
    
                },
                placeholder:"No Data Available", //display message to user on empty table
                //ajaxLoaderError:"<div>New Error new error new error</div>",
                dataLoaded: function(data) {
                    table.setPage(<?=$_SESSION['tabulator_get']['pagination']['current_page']?>);
                },
    
            });
    

    这应该允许您将表状态存储在 localStorage 中以便于使用。

    文档链接:http://tabulator.info/docs/4.6/persist

    编辑:

    在查看了代码块之后,您似乎缺少一些远程分页所需的参数。在此处查看文档:http://tabulator.info/docs/4.6/page#remote

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-04-21
    • 2012-01-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-21
    • 1970-01-01
    相关资源
    最近更新 更多