包含每个 Div 编号的页面

Question

早上好。我这里有一个代码，可以在每个循环中显示数据。

<script>
function LoadAllData(){
google.script.run.withSuccessHandler(GenerateMainTable).getData();
}
function GenerateMainTable(data) {
  var createcard = document.getElementById("maincontainer");
  createcard.innerHTML += '<div class="container" width = "100%" >' 

  for (var i = 1; i < 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>

通过使用下面的 css，它看起来像一张基于下图的卡片。

<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: all 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>

如果我的数据有很多行怎么办？所以卡片会一直向下显示。所以我有一个对我来说很难的想法。如何包含分页？喜欢

<< 1 2 3 4 5 6 7 >>

为每 10 张卡片创建一个页面，如果最后一张没有制作 10 张卡片，则还创建 div。那是我的问题。TYSM

顺便说一下，这里是输出。

更新

这是我获取数据的地方

function getData() {
  return SpreadsheetApp
         .openById('1NH4g8gmFiWVUqKPxrxERWuK6uUyz8ItkCrzK9q6B5J8').getSheetByName('Product List').getDataRange().getValues();
   return htmlTemplate;
}

Answer 1

需要修改方法google.script.run.withSuccessHandler(GenerateMainTable).getData();并传递一些分页参数，我不知道你的函数是如何设置的，但我想每次点击分页都会调用上面包含获取正确数据所需参数的方法。

应该是这样的：

google.script.run.withSuccessHandler(GenerateMainTable).getData(2); 而 2 是分页的第二项（第 2 页）。