jsp、js分页功能的简单总结

一、概述

首先，我们要明确为何需要分页技术，主要原因有以下：

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函数用于检查跳转框输入值是否合法。其中，也没有什么新技术。

好了，分页技术比较简单，就总结到这里啦！

时间： 2024-12-28 15:49:12

jsp、js分页功能的简单总结的相关文章

jQuery+AJAX实现纯js分页功能

使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用,比较省力,效果也会比自己做要漂亮多了. 使用数据为单独的json文件data.json [plain] view plain copy [ { "name": "bootstrap-table", "stargazers_count": "

JSP实现分页功能

分页须知知识点: (1)JDBC2.0的可滚动结果集. (2)HTTP GET请求. 一.可滚动结果集 Connection con  = DriverManager.getConnection(); PreparedStatement stmt = con.prepareStatement(sql,ResultSet.TYPE_FORWARD_ONLY,ResultSet.CONCUR_READ_ONLY); ResultSet rs = stmt.executeQuery(); 经常用法:

前端js分页功能的实现，非常实用，新手必看

分享一个前端拿到数据后,自己生成分页的案例,案例如图显示,点击搜索后查询数据,显示数据列表,前端根据数据显示正确的分页 附上代码:代码附上,简单粗暴,自己用过的,兼容性好,没有封装,可以很好的分页原理,希望可以帮助到大家 html排版如下: <!--搜索列表--><div class="search"> <div class="container"> <div class="searchList">

jsp学习-分页功能的实现

<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <%@ page language="java" import="java.sql.*"%> <script LANGUAGE="javascript"> <!-- 跳页函数 --> function test() { /

简单封装分页功能pageView.js

分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复工作量.在实际项目中,尤其是网站类型的项目中,分页部分的设计总是个性化比较强,基本上都不会长的一样,所以可能之前抽象出来的东西,如果写的不够灵活的话,对这些个性化强的项目来说,可能直接应用的时候也得做些调整才行.本文尝试提供一个尽量满足这两方面要求的分页组件. 先介绍下写这个东西的背景:一直以来,我

AngularJS实现简单的分页功能

本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅只是实现了简单的分页功能,使用 AngularJS 尝尝鲜. AngularJS Code (Users.js) var Users = angular.module('Users', []); Users.controller('UserList', function($scope, $http)

js+html+css实现简单页面交互功能（2015知乎前端笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2

js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2 密码:hellozhihu

分页功能的实现——Jdbc &amp;&amp; JSP

@目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+BaseServlet + 分页+JSP+JSTL+EL+MVC模式 什么是分页? 如上所示,就是分页  ,不用多说了 子模块功能的问题分析 和 解决方案 @总功能分析  常规JDBC中,点击查询或输入条件查询,在页面中可显示查询出的所有记录,有多少记录就显示多少.在这种项目的基础上增加分页功能 . @分页

一个js实现的分页功能

分页,一直是个令我头疼的问题,用java写网站的时候 ,需要用到分页功能,那时候是定义一个分页用的类,感觉比较麻烦,不过在数据量大的时候,应该会比较合适 去年做项目的过程中,用的是下拉刷新的组件,是别人写的,实现起来不方便, 效果也不太好 偶然在网上看到过js的分页功能,想想既然java能实现,js肯定是也能实现的. 参考网上的内容,稍微修改了下,暂且称之为0.1版 具体方法:先将所有的数据取出来,并用html展示出来,但用js去控制html标签的显示与隐藏,算是从另一个角度实现了分页功能 这一