碼上歡樂
相關內容    簡體    繁體

jsp、js分頁功能的簡單總結

本文轉載自   查看原文   2016-08-28 00:14   12125    web開發

一、概述

首先，我們要明確為何需要分頁技術，主要原因有以下：

1、分頁可以提高客戶體驗度，適當地選擇合適的數據條數，讓頁面顯得更有條理，使得用戶體驗感良好，避免過多數據的冗余。

2、提高性能的需要。分頁技術，有選擇的加載某部分數據，在數據量較大的時候，分部分加載數據、顯示數據，可以有效提高程序的性能，當然，單純的js的分頁技術並沒有這種效果。

所以，分頁技術是web技術中比較常用的技術，而下面討論的主要是兩種分頁技術：一種是jsp的分頁技術，其讀取數據分批次讀取，操作頁數跳轉的時候才加載相應頁面的數據；另一種js分頁技術是一次性全部加載數據，然后利用js對頁面進行數據顯示與否分頁面操作，是種假的分頁技術。第一中技術比較高性能和常用，所以下面重點討論jsp分頁技術。

二、jsp分頁的技術的實現過程

1、主要步驟：

首先，通過sql數據來計算數據庫中的數據條數，具體的代碼如下

String sql_count = "select count(*) from article a where 1=1";
//然后通過數據庫操作獲取總條數count
int count = 0;
//(數據庫連接過程省略）
Result rs = stmt.executeQuery(sql_count);
if(rs.next()){
    count = rs.getInt(1);    
}

注意，這里有個小小的細節：where 1=1的作用是什么？

初看這個條件好像是多於的，但是，其實它對於拼接sql字符有很方便的作用，這是為了方便在拼接字符時出現條件判斷的時候無法判斷下一個是否需要拼接where字符，所以統一用在這之前加一個“多於”的where 1=1方便操作。

2、算好總數據條數之后，我們就可以根據每頁條數進行總頁數等變量的計算了，具體請看一下代碼

//根據總條數來進行計算相關分頁的數據
//定義相關變量
int pages = 0; //當前頁碼數
int totalPages = 0; //總頁數
int limit = 5; //每頁的條數
//計算
if(count%limit==0){
	totalPages = count/limit
}else{
	totalPages = count/limit + 1;
}

　　以上並沒有涉及新技術，具體請參考代碼

3、最后，就是頁面的前端操作了，具體就不累贅了。

其實總的來說，jsp分頁的技術並沒有什么新的技術在里面，純粹是各種基本的知識來實現的，所以以上的總結顯得比較簡單。

三、簡單說完jsp的分頁操作之后，我們再說說js如何在前端頁面實現操作的手段，具體的話各位觀看一下的例子就大概明白啦

1、首先，一下的代碼的測試js方法的代碼

<html>
    <head>
        <script type="text/javascript" src="paging.js">    
        </script>
    </head>
<body onLoad="page_separate(0);"> 
    <div id="test1">
        <table id="table_test" width="60%">
            <tr><td>0001</td></tr>
            <tr><td>0002</td></tr>
            <tr><td>0003</td></tr>
            <tr><td>0004</td></tr>
            <tr><td>0005</td></tr>
            <tr><td>0006</td></tr>
            <tr><td>00asdf</td></tr>
            <tr><td>0007</td></tr>
            <tr><td>0008</td></tr>
            <tr><td>0009</td></tr>
            <tr><td>000110</td></tr>
            <tr><td>00011</td></tr>
            <tr><td>00012</td></tr>
            <tr><td>00013</td></tr>
            <tr><td>00014</td></tr>
            <tr><td>00015</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
            <tr><td>0001</td></tr>
        </table>
    </div>
</body>
    
    <div width="60%">
        <form id="paging" method="post" action="#" onsubmit="return checkNum();">
            
        </form>
    </div>
    <!--頁數顯示的div-->
    <div id="page_count" name="page_count"></div>
    
</html>

2、以下是相關的js代碼，里面實現了js的分頁功能

/*
*該函數的參數說明:參數是個數字，不同數字代表跳到不同的頁數或者不同的頁面操作
*其中，-1代表跳轉到首頁，-2代表跳轉到尾頁，-3代表上一頁，-4代表下一頁，-5代表跳頁
*其余數字均表示跳轉到對應數字的頁碼
*/
//全局變量存儲當前頁數和總頁數
var pages = 1;
var totalPages = 1;
function page_separate(do_what){
	//定義所有與分頁有關的變量
	var count = 0;//總條數
	//var totalPages = 1;//總頁數
	var limit = 4;//每頁顯示數
	//var pages = 1;//當前頁數
	
	//獲取表格信息
	var row_table = document.getElementById("table_test").rows;
	count = row_table.length;
	if(count%limit==0){
		totalPages = count/limit;
	}else{
		totalPages = parseInt(count/limit) + 1;
	}
	
	//根據do_what參數進行對應操作
	if(do_what==-1){
		pages=1;
	}else if(do_what==-2){
		pages=totalPages;
	}else if(do_what==-3){
		if(pages==1){
			alert("已到達首頁！");
			return ;
		}else{
			pages = pages-1;
		}
	}else if(do_what==-4){
		if(pages==totalPages){
			alert("已到達尾頁！")
		}else{
			pages = pages + 1;
		}
	}else if(do_what==-5){
		//檢查輸入是否合法
		var is_correct = checkNum();
		if(!is_correct){
			return ;
		}
		pages = document.getElementById("pages").value;
	}else if(do_what>0){
		pages = do_what;
	}
	
	for(var i=0;i<count;i++){
		if(i<(limit*(pages-1)+limit) && i>=limit*(pages-1)){
			row_table[i].style.display = "block";
		}else{
			row_table[i].style.display = "none";
		}	
	}
	var goTo = "總共" + totalPages + "頁  " + "當前第" + pages + "頁  <a href='#' onclick='page_separate(-1)'>首頁</a>  "
	+ "<a href='#' onclick='page_separate(-2)'>尾頁</a>   <a href='#' onclick='page_separate(-3)'>上一頁</a>  "
	+ "<a href='#' onclick='page_separate(-4)'>下一頁</a>  跳轉至"
	+ "<input id='pages' name='pages' type='text' size='8'></input>頁  <input type='button' value='GO' onclick='page_separate(-5)'></input>";
	//根據頁數實行頁數隱藏
	var page_count = "";
	if(totalPages<10){
		for(var i=1;i<=totalPages;i++){
			page_count = page_count + "<a href='#' onclick='page_separate(" + i + ")'>" + i + "</a>  ";
		}
	}else if(totalPages<12 && totalPages>=10){
		for(var i=1;i<=3;i++){
			page_count = page_count + "<a href='#' onclick='page_separate(" + i + ")'>" + i + "</a>  ";
		}
		page_count = page_count + "<a href='#' onclick='page_separate(" + ((parseInt(totalPages/2))-1) + ")'>" + ((parseInt(totalPages/2))-1) + "</a>  ";
		page_count = page_count + "<a href='#' onclick='page_separate(" + parseInt(totalPages/2) + ")'>" + parseInt(totalPages/2) + "</a>  ";
		page_count = page_count + "<a href='#' onclick='page_separate(" + ((parseInt(totalPages/2))+1) + ")'>" + ((parseInt(totalPages/2))+1) + "</a>  ";
		page_count = page_count + "...  ";
		for(var i=totalPages-2;i<=totalPages;i++){
			page_count = page_count + "<a href='#' onclick='page_separate(" + i + ")'>" + i + "</a>  ";
		}
	}else{
		for(var i=1;i<=3;i++){
			page_count = page_count + "<a href='#' onclick='page_separate(" + i + ")'>" + i + "</a>  ";
		}
		page_count = page_count + "...  ";
		page_count = page_count + "<a href='#' onclick='page_separate(" + ((parseInt(totalPages/2))-1) + ")'>" + ((parseInt(totalPages/2))-1) + "</a>  ";
		page_count = page_count + "<a href='#' onclick='page_separate(" + parseInt(totalPages/2) + ")'>" + parseInt(totalPages/2) + "</a>  ";
		page_count = page_count + "<a href='#' onclick='page_separate(" + ((parseInt(totalPages/2))+1) + ")'>" + ((parseInt(totalPages/2))+1) + "</a>  ";
		page_count = page_count + "...  ";
		for(var i=totalPages-2;i<=totalPages;i++){
			page_count = page_count + "<a href='#' onclick='page_separate(" + i + ")'>" + i + "</a>  ";
		}	
	}
	document.getElementById("paging").innerHTML = goTo;
	document.getElementById("page_count").innerHTML = page_count;
}
//檢查輸入是否合法的函數
function checkNum(){
	var char_pages = document.getElementById("pages").value;
	if(char_pages==null || char_pages==""){
		alert("請輸入跳轉的頁數！");
		return false;
	}else{
		
		if(!(/(^[1-9]\d*$)/.test(char_pages))){
			alert("您輸入的頁數格式不對，請重新輸入！");
			return false;
		}else{
			if(char_pages>totalPages){
				alert("您輸入的頁數大於總頁數！");
				return false;
			}
		}
	}	
}

　　代碼量較長，請各位耐心查看咯，其中還有個比較簡單的checkNum函數用於檢查跳轉框輸入值是否合法。其中，也沒有什么新技術。

好了，分頁技術比較簡單，就總結到這里啦！


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 簡單封裝分頁功能pageView.js js分頁功能實現 servlet+jsp實現分頁功能 vue實現簡單的前端分頁功能 Vue下簡單分頁及搜索功能 web應用實現簡單的分頁功能 簡單實現JS Loading功能 Python odoo中嵌入html簡單的分頁功能 小程序實現簡單分頁功能（下拉加載更多） python - Django簡單實現分頁展示功能（附源碼）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM