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></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td>00asdf</td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

            <tr><td></td></tr>

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

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

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

自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
js -- 分页功能
html 代码 <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
JSP实现分页功能
分页须知知识点: (1)JDBC2.0的可滚动结果集. (2)HTTP GET请求. 一.可滚动结果集 Connection con = DriverManager.getConnection( ...
前端js分页功能的实现，非常实用，新手必看
分享一个前端拿到数据后,自己生成分页的案例,案例如图显示,点击搜索后查询数据,显示数据列表,前端根据数据显示正确的分页附上代码:代码附上,简单粗暴,自己用过的,兼容性好,没有封装,可以很好的分页原理 ...
js分页功能实现
实现一个js的分页并在弹出框中显示 1.分页插件使用:bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等: !function($){"u ...
jsp学习-分页功能的实现
<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> < ...
[Ext JS 4] Grid 实战之分页功能
前言分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需 ...
简单封装分页功能pageView.js
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

随机推荐

[转]AS3复制可视对象
一,复制舞台上的影片剪方法1——反射方法: var ClassRef:Class = getDefinitionByName(getQualifiedClassName(t_mc)) as Clas ...
AngularJS学习--- 动画操作 (Applying Animations) ngAnimate　step 12
1.切换目录 git checkout step-12 npm start 2.效果图这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
python-->基础-->003->字符串处理
一.去除字符串首尾白空格说明:即为去除字符串的首尾(即头部和尾部)的白空格(空格本身,回车\r,换行\n,制表符\t, 换页符\f ) 实例: str01 = ' abc def # ' print ...
Daily Scrum 12.12
今日完成任务: 解决文档上传时TagAssociation的建立异常问题:解决问题页面标签点击卡死的BUG. 发现问题: 文档下载量浏览量显示不正确: 文档打开时全都是同一个PDF: 右侧最佳资源的显 ...
meta http-equiv='refresh' 解读
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒), 把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用 ...
Centos6.X下安装php nginx mysql 环境
---------------------------------------更换163软件源,此步可以省略,记得把repo文件里面的6.5改成当前版本号 yum makecache &&am ...
serialVersionUID的作用 (zz)
serialVersionUID的作用 2011-05-12 16:04:19| 分类: java|举报|字号订阅在很多应用中,需要对某些对象进行序列化,让它们离开内存空间,入住物理硬盘 ...
《HTML5秘籍》学习总结--2016年7月24日
前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HT ...
SQL2008性能计数器注册表配置单元一致性失败
按照这个操作 http://jingyan.baidu.com/article/7c6fb4287c923880652c9074.html如果在注册表中没有 HKEY_LOCAL_MACHINE\SO ...
LeetCode OJ-- Clone Graph **@
https://oj.leetcode.com/problems/clone-graph/ 图的拷贝,就是给一个图,再弄出一个一模一样的来. /** * Definition for undirect ...

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

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

随机推荐

热门专题