實現原理與幻燈類似,不過要注意聯動時體驗要好。
html結構:
<table class="ad_list ad_link">
<colgroup class="colgroup1"></colgroup>
<colgroup class="colgroup2"></colgroup>
<colgroup class="colgroup3"></colgroup>
<colgroup class="colgroup4"></colgroup>
<colgroup class="colgroup5"></colgroup>
<colgroup class="colgroup6"></colgroup>
<tr><th>分會賬號</th><th>名稱</th><th>充值總額</th><th>充值次數</th><th>註冊人數</th><th>註冊IP數</th><th>日期</th></tr>
</table>
<div class="income_box" id="income_box">
<table class="ad_list ad_link income_table" id="income_table">
<colgroup class="colgroup1"></colgroup>
<colgroup class="colgroup2"></colgroup>
<colgroup class="colgroup3"></colgroup>
<colgroup class="colgroup4"></colgroup>
<colgroup class="colgroup5"></colgroup>
<colgroup class="colgroup6"></colgroup>
<tr><td>abcxd1</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd2</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd3</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd4</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
...
</table>
</div>
<div class="pptv_pages" id="pages_box">
<div class="pptv_pages">
<span></span>
<span></span>
<span><a href="javascript:void(0);" class="prev">上一頁</a></span>
<div class="pages">
<div class="inner_pages J_pages"></div>
</div>
<span><a href="javascript:void(0);" class="next">下一頁</a></span>
<div>
<select id="select_pages"></select>
</div>
</div>
</div>
css樣式:
.income_box{max-height: 581px;min-height:30px;_height:581px;height:581px;overflow: hidden;position: relative;margin:0 auto;width:795px;}
.colgroup1,.colgroup2{width:15%;}
.colgroup3,.colgroup4,.colgroup5,.colgroup6{width:14%;}
.income_table{position: absolute;top:0;left:0;}
.pptv_pages .pages{display:inline-block;top:20px;padding:4px 0;height:38px;overflow: hidden;position: relative;}
.pptv_pages .inner_pages{display:inline-block;position: absolute;top:12px;left:0;height: 38px;}
js部分:(用jquery實現)
var $income_box=$('#income_box'),//表格盒區域
$income_table=$('#income_table');//統計表格
var _height=$income_box.height(),//翻頁高度
trLen=$income_table.find('tr').length,//總記錄條數
perPage=20,//每頁顯示行數
_left=29;//頁碼移動距離
var countPage=Math.ceil(trLen/perPage);//總頁數
var page=1;//起始頁
//分頁區
var $pages_box=$('#pages_box');
var $select_pages=$('#select_pages');
var $inner_pages=$pages_box.find('.J_pages');
$pages_box.find('span').eq(0).text('共'+trLen+'條');//條數
$pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數
var aPages=['<a href="javascript:void(0);" class="current">1</a>'];
var optionPages=['<option value="1" selected="selected">第1頁</option>'];
for(var i=2;i<=countPage;i++){
aPages.push('<a href="javascript:void(0);">' + i + '</a>');
optionPages.push('<option value="'+i+'">第' + i + '頁</option>');
}
$inner_pages.append(aPages.join(''));
$select_pages.append(optionPages.join(''));
if(countPage<=5){//總頁數小於5頁
$pages_box.find('.pages').width(29*countPage);
}else{
$pages_box.find('.pages').width(145);
}
//點擊某一頁
$inner_pages.find('a').off().on('click',function(e){
if(!$income_table.is(":animated")){
$(this).addClass('current').siblings().removeClass('current');
var index=$(this).index();
page=index+1;
//表格移動
$income_table.stop().animate({'top': -1*(_height*index) +"px"},800);
$select_pages.val(index+1);
$pages_box.find('span').eq(1).text(index+1+'/'+countPage+'頁');//頁數
if(countPage>5){
if(page>3 && page<countPage-1){
$inner_pages.stop().animate({'left': -1*(_left*(page-3)) +"px"},800);
}
if(page==1 || page==2 || page==3){
$inner_pages.stop().animate({'left': 0 +"px"},800);
}
if(page==countPage || page==countPage-1 || page==countPage-2){
$inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
}
}
}
});
//點擊下拉頁中的某一頁
$select_pages.on('change',function(e){
if(!$income_table.is(":animated")){
var index=parseInt($(this).val());
page=index;
$inner_pages.find('a').eq(index-1).addClass('current').siblings().removeClass('current');
//表格移動
$income_table.stop().animate({'top': -1*(_height*(index-1)) +"px"},800);
$pages_box.find('span').eq(1).text(index+'/'+countPage+'頁');//頁數
if(countPage>5){
if(page>3 && page<countPage-1){
$inner_pages.stop().animate({'left': -1*(_left*(page-3)) +"px"},800);
}
if(page==1 || page==2 || page==3){
$inner_pages.stop().animate({'left': 0 +"px"},800);
}
if(page==countPage || page==countPage-1 || page==countPage-2){
$inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
}
}
}
});
//上一頁
$pages_box.find('.prev').off().on('click',function(e){
if(!$income_table.is(":animated")){
if(page == 1){
$income_table.stop();
$inner_pages.stop();
}else{
$income_table.animate({'top' : "+=" + _height +"px"},800);
if(countPage>5){
if(page>3 && page<countPage-1){
$inner_pages.animate({'left' : "+=" + _left +"px"},800);
}
if(page==1 || page==2 || page==3){
$inner_pages.stop().animate({'left': 0 +"px"},800);
}
if(page==countPage || page==countPage-1){
$inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
}
}
page--;
$inner_pages.find('a').eq(page-1).addClass('current').siblings().removeClass('current');
$select_pages.val(page);
$pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數
}
}
});
//下一頁
$pages_box.find('.next').off().on('click',function(e){
if(!$income_table.is(":animated")){
if(page == countPage ){
$income_table.stop();
$inner_pages.stop();
}else{
$income_table.animate({'top' : "-=" + _height +"px"},800);
if(countPage>5){
if(page>=3 && page<countPage-1){
$inner_pages.animate({'left' : "-=" + _left +"px"},800);
}
if(page==1 || page==2){
$inner_pages.stop().animate({'left': 0 +"px"},800);
}
if(page==countPage || page==countPage-1 ||page==countPage-2){
$inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
}
}
page++;
$inner_pages.find('a').eq(page-1).addClass('current').siblings().removeClass('current');
$select_pages.val(page);
$pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數
}
}
});
實現效果: