js实现分页问题

最新推荐文章于 2023-02-13 09:21:28 发布

原创最新推荐文章于 2023-02-13 09:21:28 发布 · 523 阅读

0 ·

CC 4.0 BY-SA版权

js应用专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现动态分页的方法。通过控制表格的显示与隐藏来实现翻页功能，并提供了完整的代码示例。

HTML页面（根据下面表格中的数据实现动态分页）

 <div style="float:left;background:#eee;;padding:0 5px 7px 0;">
	 <table>
		<tr>
		<td><span id="spanFirst"> 首页 </span> </td>
		<td><span id="spanPre">上一页 </span> </td>
		<td><span id="spanNext"> 下一页 </span></td> 
	        <td><span id="spanLast"> 尾页 </span> </td>
		<td> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页 </td>
		</tr>
		</table>
		</div>

 <div class="form-group2">
       <div class="list_content2">
            <table id="gangqinqu_content_title" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;">
             <tr>
                 <th style="width:60px;">序号</th>
                 <th style="width:450px;">钢琴曲</th>
                 <th style="width:120px;">演奏家</th>
                 <th style="width:100px;">属性</th>
                 <th style="width:100px;">发布时间</th>
             </tr>
             </table>
            <table id="gangqinqu_content" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;">
            {loop $song_data $gangqinqu}
             <tr>
                 <td style="width:60px;text-align:center;" >
                 <input type="checkbox" name="check_song" id="check_song" value="{$gangqinqu[id]}"/>
                 </td>
                 <td style="width:450px;" class="title">{$gangqinqu[title]}</td>
                 <td style="width:120px;text-align:center;" class="zjname">{$gangqinqu[zjname]}</td>
                 <td style="width:100px;text-align:center;" class="shuxing">{$gangqinqu[shuxing]}</td>
                 <td style="width:100px;text-align:center;" class="inputtime">
                     {date("Y-m-d",$gangqinqu[inputtime])}</td>
             </tr>
             {/loop}
            </table>
        </div>
   </div>

js页面（控制分页）

<script> 

var theTable = document.getElementById("gangqinqu_content");   
var totalPage = document.getElementById("spanTotalPage"); 
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");   
var spanNext = document.getElementById("spanNext");   
var spanFirst = document.getElementById("spanFirst");   
var spanLast = document.getElementById("spanLast");   
var numberRowsInTable = theTable.rows.length;  
var pageSize = 15;   
var page = 1;     

//显示链接   
function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();' style='color:#6c9541;'>上一页</a>";}   
function preText(){ spanPre.innerHTML = "上一页";}   
  
function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();' style='color:#6c9541;'>下一页</a>";}   
function nextText(){ spanNext.innerHTML = "下一页";}   
  
function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();' style='color:#6c9541;'>首页</a>";}   
function firstText(){ spanFirst.innerHTML = "首页";}   
  
function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();' style='color:#6c9541;'>尾页</a>";}   
function lastText(){ spanLast.innerHTML = "尾页";}   
  
//下一页   
function next(){     
	hideTable();   
	currentRow = pageSize * page;   
	maxRow = currentRow + pageSize;   
	if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;   
	for ( var i = currentRow; i< maxRow; i++ ){   
		theTable.rows[i].style.display = '';   
	}   
	page++;       
	if ( maxRow == numberRowsInTable ) { nextText(); lastText(); } 
	showPage();   
	preLink();   
	firstLink();   
}   

//上一页   
function pre(){   
	hideTable();       
	page--;        
	currentRow = pageSize * page;   
	maxRow = currentRow - pageSize;   
	if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;   
	for ( var i = maxRow; i< currentRow; i++ ){   
		theTable.rows[i].style.display = '';   
	}     
	if ( maxRow == 0 ){ preText(); firstText(); }   
	showPage();   
	nextLink();   
	lastLink();   
}   

//第一页   
function first(){   
	hideTable();   
	page = 1;   
	for ( var i = 0; i<pageSize; i++ ){   
		theTable.rows[i].style.display = '';   }   
	showPage();      
	preText();   
	nextLink();   
	lastLink();   
}   

//最后一页   
function last(){   
	hideTable();   
	page = pageCount();   
	currentRow = pageSize * (page - 1);   
	for ( var i = currentRow; i<numberRowsInTable; i++ ){   
		theTable.rows[i].style.display = '';   }   
	showPage();      
	preLink();   
	nextText();   
	firstLink();   
}  


function hideTable(){   
	for ( var i = 0; i<numberRowsInTable; i++ ){   
		theTable.rows[i].style.display = 'none';   
	}   
}   
  
function showPage(){    
 pageNum.innerHTML = page;
}   

//总共页数   
function pageCount(){   
	var count = 0;   
	if ( numberRowsInTable%pageSize != 0 ) count = 1;    
	return parseInt(numberRowsInTable/pageSize) + count;   
}    
function lastText(){ spanLast.innerHTML = "尾页";}   
  
//隐藏表格   
function hide(){   
	for ( var i = pageSize; i<numberRowsInTable; i++ ){   
		theTable.rows[i].style.display = 'none';   
	}      
	totalPage.innerHTML = pageCount();   
	pageNum.innerHTML = '1';      
	nextLink();   
	lastLink();   
}    
hide(); 
</script>

【效果预览】