首先包括Prev（＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆gt;），在Loop下的Paging
我有一个代码，为每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()))
});
}
我的问题是，只要我有数据，代码就会创建分页，这就是我不想要的。所以我的目标是如何添加这样的东西？
**首先＆lt;＆lt; 1 2 3 4 5 6 7 8＆gt;最后*
**请参阅更新的代码**
<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()">
<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>
1 个答案:
答案 0 :(得分：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); } );
**
相关问题
- GridView分页 - 第一个，最后一个，下一个，上一个
- GridView自定义分页 - 第一个，最后一个，下一个，上一个，数字
- Fancybox隐藏在最后/第一张图片上的下一张/上一张
- jQuery，接下来，上一个，骑自行车到第一个和最后一个
- UITableViewWith Paging Prev，下一个按钮
- 在第一页/最后一页上隐藏上一页/下一页按钮
- jqgrid寻呼机按钮（下一个，上一个，第一个，最后一个）不可见
- jQuery与前一个，上一个和下一个按钮的分页
- jQuery上一个/下一个滑块 - ＆gt;如何禁用第一张/最后一张幻灯片上的prev / next？
- 首先包括Prev（＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆gt;），在Loop下的Paging
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？