2

Google ビジュアライゼーション テーブルにページネーションを追加しようとしています。私はガイドに従い、以下のコードを持っています。なぜ機能しないのかわかりません...誰かが何か間違っているのを見ることができますか? ページネーション部分は下部にあります。

また、長期的なプロジェクトとして、可能であれば、すべてのページを同じ URL に置くのではなく、各ページを個別の Web ページにすることを検討しています...これを実装する理由を知っている人はいますか?

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});
4

2 に答える 2

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 <ページのリロードを強制したり、ユーザーに新しいページへの移動を強制したりすることは、テーブルのページネーションを処理するための良い考えではありませんが、本当にしたい場合はそれを行うことができます. ユーザーがデータ セット内のどこにいるかを追跡し、ページが更新されたときや新しいページにアクセスしたときに適切なデータを提供するだけで済みます。

ただし、AJAX 呼び出しを介したサーバー側ページングの実装を調査することをお勧めします。データを分割して配布するスクリプトまたはサーブレットと、次のデータ (1 ページ、5 ページ、100 ページなど、最も便利なデータのいずれか) を取得するためにサーバーを呼び出すクライアント側の AJAX 関数をセットアップします。あなたの申請書）、そして表に一つ一つ記入してください。

于 2013-10-03T23:57:23.373 に答える