Добавление разбивки на страницы (таблица подкачки) в таблицу визуализации Google

Question

Я ищу, чтобы добавить разбивку на страницы в таблицу Google для визуализации. Я следил за гидом и получил код ниже. Я не могу понять, почему он не работает ... может ли кто-нибудь увидеть что-то не так? Часть пагинации находится внизу.

Кроме того, в качестве долгосрочного проекта, если возможно, я бы хотел, чтобы каждая страница была отдельной страницей, а не всем на одном URL-адресе ... кто-нибудь знает, зачем это реализовать?

код 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}); 

Answer 1

Вы устанавливаете параметры для включения подкачки после составления таблицы, поэтому он не работает. Установите эти параметры в 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 < принуждать перезагрузки страницы или заставляя пользователя, чтобы перейти на новую страницу, не является хорошей идеей для вручая стола пагинацией, но вы можете сделай это, если хочешь. Вам просто нужно отслеживать, где находится ваш пользователь в наборе данных, и обслуживать соответствующие данные при обновлении страницы или посещении новой страницы.

Я бы предположил, однако, что вы исследуете реализацию серверного вызова подкачки через вызовы AJAX. Настройте скрипт или сервлет, который передает данные на части, и функцию AJAX на стороне клиента, которая вызывает сервер для следующей части данных (это может быть одна страница, 5 страниц, 100 страниц, что наиболее удобно для ваше приложение) и заполняет таблицу по частям.

Answer 2

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(); 
... 

D3 table with pagination. веселит.