Skip to content

Google charts : Creating data table with pagination feature

Shekhar Prasad Rajak edited this page Jun 27, 2017 · 2 revisions

Add JS dependency in head tag:

<script src='https://www.google.com/jsapi'></script>

HTML :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

JavaScript :

      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%' ,         		         showRowNumber: true,
        page: 'enable',
        pageSize: 2,
        pagingSymbols: {
            prev: 'prev',
            next: 'next'
        },
        pagingButtonsConfiguration: 'auto'});
      }

jsfiddle : https://jsfiddle.net/wmqogfsu/

Clone this wiki locally