首页 > 代码库 > jsp、js分页功能的简单总结
jsp、js分页功能的简单总结
一、概述
首先，我们要明确为何需要分页技术，主要原因有以下：
1、分页可以提高客户体验度，适当地选择合适的数据条数，让页面显得更有条理，使得用户体验感良好，避免过多数据的冗余。
2、提高性能的需要。分页技术，有选择的加载某部分数据，在数据量较大的时候，分部分加载数据、显示数据，可以有效提高程序的性能，当然，单纯的js的分页技术并没有这种效果。
所以，分页技术是web技术中比较常用的技术，而下面讨论的主要是两种分页技术：一种是jsp的分页技术，其读取数据分批次读取，操作页数跳转的时候才加载相应页面的数据；另一种js分页技术是一次性全部加载数据，然后利用js对页面进行数据显示与否分页面操作，是种假的分页技术。第一中技术比较高性能和常用，所以下面重点讨论jsp分页技术。
二、jsp分页的技术的实现过程
1、主要步骤：
首先，通过sql数据来计算数据库中的数据条数，具体的代码如下
String sql_count = "select count(*) from article a where 1=1";//然后通过数据库操作获取总条数countint 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=http://www.mamicode.com/"paging.js"> </script> </head><body onl oad="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=http://www.mamicode.com/‘#‘ onclick=‘page_separate(-1)‘>首页 " + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(-2)‘>尾页 上一页 " + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(-4)‘>下一页 跳转至" + "<input id=‘pages‘ name=‘pages‘ type=‘text‘ size=‘8‘></input>页 <input type=‘button‘ value=http://www.mamicode.com/‘GO‘ onclick=‘page_separate(-5)‘>"; //根据页数实行页数隐藏 var page_count = ""; if(totalPages<10){ for(var i=1;i<=totalPages;i++){ page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ 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=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + i + ")‘>" + i + "</a> "; } page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + ((parseInt(totalPages/2))-1) + ")‘>" + ((parseInt(totalPages/2))-1) + "</a> "; page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + parseInt(totalPages/2) + ")‘>" + parseInt(totalPages/2) + "</a> "; page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ 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=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + i + ")‘>" + i + "</a> "; } }else{ for(var i=1;i<=3;i++){ page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + i + ")‘>" + i + "</a> "; } page_count = page_count + "... "; page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + ((parseInt(totalPages/2))-1) + ")‘>" + ((parseInt(totalPages/2))-1) + "</a> "; page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ onclick=‘page_separate(" + parseInt(totalPages/2) + ")‘>" + parseInt(totalPages/2) + "</a> "; page_count = page_count + "<a href=http://www.mamicode.com/‘#‘ 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=http://www.mamicode.com/‘#‘ 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分页功能的简单总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。