我正在尝试使用户能够离开上面带有Tabulator的页面,然后返回并加载与以前相同的视图(包括他们所在的页面,启用的过滤器和排序器)。
我已经尝试使用Tabulator的持久功能(如下所示)使其正常工作,但出现以下错误:分页错误-请求的页面超出了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
});
我会留下评论而不是编辑帖子。但是该网站不允许我使用。
尝试为版本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