包括第一，上一頁（<<) Next (>>），環

Question

下最後的內部尋呼我，每8組數據的創建頁面代碼，這裏是我的代碼

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

    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>'; 

pageSize = 8; 

    var pageCount = $(".card").length/pageSize; 

    for(var i = 0 ; i<pageCount;i++){ 

     $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> '); 
    } 
     $("#pagin li").first().find("a").addClass("current") 
    showPage = function(page) { 
     $(".card").hide(); 
     $(".card").each(function(n) { 
      if (n >= pageSize * (page - 1) && n < pageSize * page) 
       $(this).show(); 
     });   
    } 

    showPage(1); 

    $("#pagin li a").click(function() { 
     $("#pagin li a").removeClass("current"); 
     $(this).addClass("current"); 
     showPage(parseInt($(this).text())) 
    }); 
} 
</script> 

請請關注這一部分的代碼，因爲它是創建分頁的代碼。

pageSize = 8; 

    var pageCount = $(".card").length/pageSize; 

    for(var i = 0 ; i<pageCount;i++){ 

     $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> '); 
    } 
     $("#pagin li").first().find("a").addClass("current") 
    showPage = function(page) { 
     $(".card").hide(); 
     $(".card").each(function(n) { 
      if (n >= pageSize * (page - 1) && n < pageSize * page) 
       $(this).show(); 
     });   
    } 

    showPage(1); 

    $("#pagin li a").click(function() { 
     $("#pagin li a").removeClass("current"); 
     $(this).addClass("current"); 
     showPage(parseInt($(this).text())) 
    }); 
} 

我的問題是，代碼，只要建立分頁，因爲我有數據，並且那是什麼我不想要。所以我的目標是如何添加這樣的東西？

**首先< < 1 2 3 4 5 6 7 8 >>最後*

**請參閱更新的代碼**

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

    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>'; 
var curPage; 
    curPage = 0; 

var showPage = function(page) { 
    'use strict'; 
    $(".card").hide(); 
    $(".card").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); 
    curPage = page; 
}; 

//group Size 

var groupSize; 
    groupSize = 8; 

//Page size is equal to (data.length - remainder) divide by group size 
// get an interger not float 
//Using data.length not getting elements 
//This will improve perfomance 

//Remove this declaration Used for code hinting in dreamweaver 
var data; 

var pageSize; 
    pageSize = (data.length - (data.length % groupSize))/groupSize; 
var pagin = $("#pagin"); 

var addChild = function(name, callback, x ){ 
    'use strict'; 
    var clas = ''; 
    if(x && x !== void(0) && x === 1){ 
     clas = 'current'; 
    } 

    //This Works 
    //pagin.append('<li><a href="#" ' + clas +' >' + name + '</a></li>'); 

    //untested code 
    var html = $('<li><a href="#">' + name + '</a></li>'); 
     html.click(callback); 
     html.appendTo(pagin); 
    //return true; 

    void(callback); 
}; 


//Add Previous Calls 

addChild('Previous', function(){ 'use strict'; var i = curPage - 1; showPage(i); }); 
addChild('<<', function(){ 'use strict'; var i = curPage - 1; showPage(i); }); 

//Loop through all Elements 
for(var i = 0; i < pageSize; i++){ 
    addChild(pageSize + 1 , showPage.bind(null, i), i); 
} 

//Add Previous Calls 
addChild('>>', function(){ 'use strict'; var i = curPage + 1; showPage(i); }); 
addChild('Next', function(){ 'use strict'; var i = curPage + 1; showPage(i); }); 

} 
</script> 

，這裏是輸出

您可以在此示例代碼上玩

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="https://cssglobe.com/lab/easypaginate/js/easypaginate.js"></script> 
<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; 
} 

#pagin li { 
    display: inline-block; 
    margin: 1px; 
} 

.pagination a { 
    color: black; 
    padding: 8px 16px; 
    text-decoration: none; 
    transition: background-color .3s; 
    border: 1px solid #ddd; 
} 

.pagination a.active { 
    background-color: #4CAF50; 
    color: white; 
    border: 1px solid #4CAF50; 
} 

.pagination a:hover:not(.active) {background-color: #ddd;} 

input[type=text] { 
    width: 300px; 
    height: 30px; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 12px; 
    background-color: white; 
    background-image: url('https://thumb.ibb.co/dWPwc5/searchicon.jpg'); 
    background-position: 10px 3px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px; 
} 

</style> 
</head> 
<body onLoad = "GenerateMainTable()"> 
&nbsp;&nbsp;<input type="text" name="search" placeholder="Search.."> 
<br> 
<div class="pagination" style=" margin: 0 auto;"><ul id="pagin"></ul></div> 
<div id = "maincontainer" class = "maincontainer" width = "100%" > 
</div> 

<script> 

function GenerateMainTable() { 

var data = [ 
     ['dataid1', 'area1', 'cusname1', 'cic1', 'remarks1', 'status1', 'docdate1'], 
     ['dataid2', 'area2', 'cusname2', 'cic2', 'remarks2', 'status2', 'docdate2'] 
    ] 

    var createcard = document.getElementById("maincontainer"); 
    createcard.innerHTML += '' 

    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>'; 
    pageSize = 8; 
    var pageCount = $(".card").length/pageSize; 
    for(var i = 0 ; i<pageCount;i++){ 
     $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li>'); 
    } 
     $("#pagin li").first().find("a").addClass("current") 
    showPage = function(page) { 
     $(".card").hide(); 
     $(".card").each(function(n) { 
      if (n >= pageSize * (page - 1) && n < pageSize * page) 
       $(this).show(); 
     });   
    } 
    showPage(1); 
    $("#pagin li a").click(function() { 
     $("#pagin li a").removeClass("current"); 
     $(this).addClass("current"); 
     showPage(parseInt($(this).text())) 
    }); 
} 
</script> 




</body> 
</html> 

Answer 1

就像這樣，你能澄清你想要數字的部分。

** 

    // JavaScript Document 


/* 
    Creating Prev Next and Proper Paging 

    paging 
     ul > li > a 

    overview 
     ul > 
      li > a > Previous 
      li > a > << 
      (li > a > 1)* 
      li > a > >> 
      li > a > Next 
*/ 

var curPage; 
    curPage = 0; 

var showPage = function(page) { 
    'use strict'; 
    $(".card").hide(); 
    $(".card").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); 
    curPage = page; 
}; 

//group Size 

var groupSize; 
    groupSize = 8; 

//Page size is equal to (data.length - remainder) divide by group size 
// get an interger not float 
//Using data.length not getting elements 
//This will improve perfomance 

//Remove this declaration Used for code hinting in dreamweaver 
var data; 

var pageSize; 
    pageSize = (data.length - (data.length % groupSize))/groupSize; 
var pagin = $("#pagin"); 

var addChild = function(name, callback, x ){ 
    'use strict'; 
    var clas = ''; 
    if(x && x !== void(0) && x === 1){ 
     clas = 'current'; 
    } 

    //This Works 
    //pagin.append('<li><a href="#" ' + clas +' >' + name + '</a></li>'); 

    //untested code 
    var html = $('<li><a href="#">' + name + '</a></li>'); 
     html.click(callback); 
     html.appendTo(pagin); 
    //return true; 

    void(callback); 
}; 


//Add Previous Calls 

addChild('Previous', function(){ 'use strict'; var i = curPage - 1; showPage(i); }); 
addChild('<<', function(){ 'use strict'; var i = curPage - 1; showPage(i); }); 

//Loop through all Elements 
for(var i = 0; i < pageSize; i++){ 
    addChild(pageSize + 1 , showPage.bind(null, i), i); 
} 

//Add Previous Calls 
addChild('>>', function(){ 'use strict'; var i = curPage + 1; showPage(i); }); 
addChild('Next', function(){ 'use strict'; var i = curPage + 1; showPage(i); });  

**