我希望为我的Google可视化表添加分页功能。我已按照指南操作并提供以下代码。我无法弄清楚为什么它不起作用......谁能看到任何错误？分页部分位于底部。
此外，作为一个长期项目，如果可能的话，我希望将每个页面作为一个单独的网页而不是所有相同的网页...任何人都知道为什么要实现这个？
Javascript代码：
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'Age');
data.addColumn('string', 'Foot');
data.addColumn('string', 'Position');
data.addColumn('number', 'Attack');
data.addColumn('number', 'Control');
data.addColumn('number', 'Dribbling');
data.addColumn('number', 'Low Pass');
data.addColumn('number', 'Lofted Pass');
data.addColumn('number', 'Finishing');
data.addColumn('number', 'Place Kicking');
data.addColumn('number', 'Controlled Spin');
data.addColumn('number', 'Heading');
data.addColumn('number', 'Defence');
data.addColumn('number', 'Ball Winning');
data.addColumn('number', 'Kicking Power');
data.addColumn('number', 'Speed');
data.addColumn('number', 'Explosive Power');
data.addColumn('number', 'Body Balance');
data.addColumn('number', 'Jump');
data.addColumn('number', 'Goalkeeping');
data.addColumn('number', 'Saving');
data.addColumn('number', 'Tenacity');
data.addColumn('number', 'Stamina');
data.addColumn('number', 'Form');
data.addColumn('number', 'Injury Resistance');
data.addColumn('number', 'Weak Foot Usage');
data.addColumn('number', 'Weak Foot Accuracy');
data.addColumn('number', 'Overall Rating');
data.addRows([
['RONALDO','REAL MADRID','PORTUGAL',187,80,28,'Right','LWF',94,90,95,83,87,92,93,85,97,48,49,96,87,87,90,89,50,50,74,78,5,3,5,7,99],
['MESSI','BARCELONA','ARGENTINA',169,67,26,'Left','SS',94,93,98,84,81,99,87,86,74,53,48,80,82,98,83,74,50,50,76,76,6,3,4,6,99],
['INIESTA','BARCELONA','SPAIN',170,65,29,'Right','CMF',86,98,97,94,86,83,72,82,64,67,49,77,78,87,75,63,50,50,78,88,6,2,6,8,98],
['BUFFON','JUVENTUS F.C.','ITALY',191,83,35,'Right','GK',42,60,62,62,63,45,45,45,55,41,45,78,73,75,87,86,96,98,82,62,7,2,4,4,97],
['XAVI','BARCELONA','SPAIN',170,68,33,'Right','CMF',82,95,89,98,90,73,80,82,67,71,58,76,74,83,74,72,50,50,80,88,8,2,4,5,97],
['PIRLO','JUVENTUS F.C.','ITALY',177,68,34,'Right','DMF',83,93,88,92,97,76,96,95,66,72,58,80,74,76,74,65,50,50,79,82,7,2,7,7,96],
['AGUERO','MAN BLUE','ARGENTINA',175,70,25,'Right','CF',90,88,90,77,73,92,73,72,82,49,47,83,90,90,85,94,50,50,74,83,7,3,5,5,96],
['IBRAHIMOVIC','PARIS SAINT-GERMAIN','SWEDEN',194,94,31,'Right','CF',91,93,96,88,87,87,81,79,76,47,52,93,78,73,98,78,50,50,78,76,5,2,5,6,95],
['VAN PERSIE','MANCHESTER UNITED','NETHERLANDS',183,71,30,'Left','CF',91,89,87,85,84,95,80,90,75,52,46,89,82,82,82,74,50,50,75,77,6,2,5,7,95],
['CAVANI','PARIS SAINT-GERMAIN','URUGUAY',184,74,26,'Right','CF',94,83,83,76,76,94,84,78,90,66,52,85,85,81,86,90,50,50,86,93,7,3,6,4,95],
['FALCAO','AS MONACO FC','COLOMBIA',177,72,27,'Right','CF',94,82,81,79,77,98,75,74,97,55,44,81,80,84,76,86,50,50,77,78,6,3,5,6,95],
['CASILLAS','REAL MADRID','SPAIN',185,84,32,'Left','GK',40,47,56,58,59,45,45,45,55,45,44,75,75,79,81,85,97,95,90,60,7,3,4,4,95],
['NEUER','BAYERN MÜNCHEN','GERMANY',193,92,27,'Right','GK',40,62,62,63,66,45,45,45,55,45,42,86,72,75,86,79,97,94,85,60,7,3,3,4,94],
['ROONEY','MANCHESTER UNITED','ENGLAND',176,86,27,'Right','CF',90,86,84,85,84,93,76,80,78,63,55,89,83,83,91,76,50,50,90,90,6,3,5,6,94],
['SUÁREZ','MERSEYSIDE RED','URUGUAY',181,81,26,'Right','CF',93,83,88,82,78,93,78,77,68,57,49,85,83,85,84,74,50,50,65,81,4,3,4,5,94],
['JÚLIO CÉSAR','FREE','BRAZIL',186,79,34,'Left','GK',47,67,66,64,66,50,54,56,55,41,45,78,72,75,83,82,94,96,75,60,6,3,4,4,94],
['CESC FABREGAS','FC BARCELONA','SPAIN',179,75,26,'Right','CMF',84,91,87,92,85,85,77,80,70,73,51,80,76,82,75,73,50,50,82,92,6,2,6,7,93],
['RONALDINHO','ATLÉTICO MINEIRO','BRAZIL',182,80,33,'Right','AMF',81,92,94,92,88,84,86,89,78,47,46,81,80,76,81,82,50,50,75,74,4,2,5,6,93],
['SILVA','MAN BLUE','SPAIN',170,67,27,'Left','AMF',85,92,91,93,85,81,76,77,62,60,46,77,80,90,74,75,50,50,72,80,6,2,3,3,93],
['VIDIC','MANCHESTER UNITED','SERBIA',189,84,31,'Right','CB',65,71,69,72,70,61,62,61,92,91,87,75,74,71,92,86,50,50,86,79,6,2,4,4,93],
['HANDANOVIC','INTER','SLOVENIA',193,89,29,'Right','GK',40,45,48,46,49,45,45,45,55,43,41,76,70,73,86,70,95,95,75,65,7,3,5,5,93],
['VALDÉS','FBARCELONA','SPAIN',183,78,31,'Right','GK',41,62,60,63,64,45,50,50,55,45,40,81,75,82,84,84,95,92,83,60,7,3,3,4,92],
['CECH','LONDON FC','CZECH REPUBLIC',197,92,31,'Left','GK',40,63,52,56,57,45,45,45,55,45,43,85,67,70,88,80,92,95,78,60,7,2,4,4,92],
['FREY','GENOA CFC','FRANCE',189,85,33,'Right','GK',41,48,52,55,52,45,45,45,55,40,46,75,67,68,86,82,95,92,76,60,7,2,3,3,92],
['NEYMAR','FBARCELONA','BRAZIL',174,64,21,'Right','SS',82,93,98,81,80,84,85,82,65,50,43,75,83,93,73,83,50,50,65,78,5,2,5,6,92],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,29,'Right','CB',73,78,83,82,84,65,75,66,81,94,85,85,83,83,87,92,50,50,83,81,6,3,5,5,92],
['DI NATALE','UDINESE CALCIO','ITALY',170,70,35,'Right','CF',88,87,84,83,85,95,82,85,71,50,41,75,79,87,72,72,50,50,84,75,7,2,5,6,92],
['MILITO','INTER','ARGENTINA',183,78,34,'Right','CF',91,85,83,77,74,92,70,72,78,57,47,78,77,79,81,78,50,50,80,79,6,2,6,7,92],
['TERRY','LONDON FC','ENGLAND',187,90,32,'Right','CB',67,72,72,78,77,64,58,56,90,90,93,80,71,67,91,82,50,55,91,77,4,2,6,7,92],
['KOMPANY','MAN BLUE','BELGIUM',191,91,27,'Right','CB',71,78,78,78,81,63,63,63,82,90,92,81,79,74,92,84,50,50,87,80,7,1,5,5,92],
['CHIELLINI','JUVENTUS F.C.','ITALY',186,76,29,'Left','CB',71,73,73,70,72,66,65,70,79,91,90,83,83,76,89,87,50,50,86,82,7,2,4,4,92],
['ROBBEN','BAYERN MÜNCHEN','NETHERLANDS',180,80,29,'Left','RMF',84,87,94,80,83,84,78,80,70,54,46,85,92,88,78,73,50,50,65,76,4,1,4,4,92]
]);
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var stringFilter2 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'position',
options: {
filterColumnIndex: 7
}
});
var numberRangeFilter1 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var numberRangeFilter2 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'height',
options: {
filterColumnIndex: 3,
minValue: 160,
maxValue: 210,
ui: {
label: 'Height'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter1, stringFilter2, numberRangeFilter1, numberRangeFilter2], [table]);
dashboard.draw(data);
options['page'] = 'enable';
options['pageSize'] = 20;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
答案 0 :(得分：3)
您正在设置选项以在绘制表格后启用分页，这就是它不起作用的原因。改为在表格的ChartWrapper中设置这些选项，它将起作用：
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true,
page: 'enable',
pageSize: 20,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto'
}
});
IMO＆LT;强制页面重新加载或强制用户导航到新页面对于表格分页不是一个好主意，但如果你真的想要，你可以这样做。您只需跟踪用户在数据集中的位置，并在刷新页面或访问新页面时提供相应的数据。
但是，我建议你研究通过AJAX调用实现服务器端分页。设置一个脚本或servlet，将数据分成两部分，在客户端设置一个AJAX函数，调用服务器获取下一个数据（可以是一页，5页，100页，最方便的是你的申请），并逐一填写表格。答案 1 :(得分：-1)
D3 table with pagination. Check this fiddle below.
var tableChartWithPagination = function(inputData, divName) {
var wd = 700;
var ht = 550;
var keys = new Array();
// no. of rows per page
var pageSize = 4;
var currentPage = 1;
var totalPages = getTotalPages();
...