javascript - 循环下分页包含 First,Prev (<<) Next (>>),Last

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

**