javascript - Include Page for every No. of Div -

good morning. have code here displays data in every loop.

<script> function loadalldata(){ google.script.run.withsuccesshandler(generatemaintable).getdata(); } function generatemaintable(data) {   var createcard = document.getelementbyid("maincontainer");   createcard.innerhtml += '<div class="container" width = "100%" >'     (var = 1; < data.length; i++) {     var imagelink = data[i][0],         brand =  data[i][1],         prodcat = data[i][2],         prodcode = data[i][3],         prodname = data[i][4],         packaging = data[i][5],         srp = data[i][6] ,         des1 = data[i][7],         des2 = data[i][8],         des3 = data[i][9],         des4 = data[i][10],         des5 = data[i][11],         des6 = data[i][12];      if (data[i][0] === "") { break; }     createcard.innerhtml += '<div class="card">' +                                                                   '<div id="one">' +                             '<img class = "tableformat" src="' + imagelink + '" alt="product" height="94%" width="94%" align = "center">' +                             '</div>' +                             '<div id="two">'+                              '<table width = "100%" height = "100%" class = "tableformat">' + '   <tbody>' + '       <tr class = "tableformat">' + '           <td class = "tableformat">product description</td>' + '           <td class = "tableformat">srp</td>' + '           <td class = "tableformat">packaging</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td class = "tableformat">' + prodcode + '</td>' + '           <td class = "tableformat">' + srp + '</td>' + '           <td class = "tableformat">' + packaging + '</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des1 +'</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des2 +'</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des3 +'</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des4 +'</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des5 +'</td>' + '       </tr>' + '       <tr class = "tableformat">' + '           <td  colspan="3" class = "tableformat">'+ des6 +'</td>' + '       </tr>' + '   </tbody>' + '</table>'                             '</div>' +                               '</div>';    }   createcard.innerhtml += '</div>'; } </script> 

by using css below card based on image below.

<style>    .card {           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);           transition: 0.3s;           width: 49%;           height: 206px;           display:inline-block;           margin-left: 7px;           margin-bottom: 20px;         }           .card:hover {           box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);         }    div#one {           width: 30%;           height: 100%;           float: left;         }    div#two {           margin-left: 30%;           height: 100%;    }    * {           font-family: 'lato', sans-serif;           font-size: 12px;    }         .tableformat{           border:1px solid #ddd;           border-collapse: collapse;           padding: 5px;           text-align:left;     }     .img{          display: block;          margin: auto;     }  body {     font-family: arial; } select {     border: 1px solid #d6d8db;     background-color: #ecedee;     text-transform: uppercase;     color: #47515c;     padding: 12px 30px 12px 10px;     width: 300px;     cursor: pointer;     margin-bottom: 10px; } select > option {     text-transform: uppercase;     padding: 5px 0px; } .customselect {     border: 1px solid #d6d8db;     background-color: #ecedee;     text-transform: uppercase;     color: #47515c;     padding: 12px 10px 12px 10px;     margin-bottom: 10px; } .customselect.changed {     background-color: #f0dea4; }    .customselectinner {     background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat center right; }      .simple-input {      border: 0px solid #f1b720;     color: #333;     transition: 0.3s ease-out;     padding-bottom: 10px; }  .simple-input:hover {     border-radius: 8px }  .simple-input:focus {     outline: none;     border-radius: 8px;     border-color: #ebd292; } </style> 

how if data has reach many rows? cards display way down. have idea here looks hard me. how can include paging?

<< 1 2 3 4 5 6 7 >> 

create page every 10 cards , if last 1 did not made 10 cards create div. thats problem .tysm

by way here ouput.

updated

and here data

function getdata() {   return spreadsheetapp          .openbyid('1nh4g8gmfiwvuqkpxrxerwuk6uuyz8itkcrzk9q6b5j8').getsheetbyname('product list').getdatarange().getvalues();    return htmltemplate; } 

you need modify method google.script.run.withsuccesshandler(generatemaintable).getdata(); , pass pagination parameters, don't know how function set imagine @ every click @ pagination call method above containing parameters necessary correct data.

would this:

google.script.run.withsuccesshandler(generatemaintable).getdata( 2 ); whereas 2 second item of pagination ( page 2 ).