Ajax分页

• Ajax分页

• Js代码：

•  

• function add(){

• var pageNumbers=$("#pageNumber").val();

• var pageSizes=$("#pageSize").val();

• var page=Number(pageNumbers)+Number(pageSizes);

• var pageSum=$("#pageSum").val();

• if(Number(page)>Number(pageSum)){

• page=pageNumbers;

• }

• $("#pageNumber").val(Number(page));

• query();

• }

• function adda(){

• var pageNumbers=$("#pageNumber").val();

• var pageSizes=$("#pageSize").val();

• var page=Number(pageNumbers)+Number(pageSizes)+Number(pageSizes);

• var pageSum=$("#pageSum").val();

• if(Number(page)>Number(pageSum)){

• page=pageNumbers;

• }

• $("#pageNumber").val(Number(page));

• query();

• }

• function edde(){

• var pageNumbers=$("#pageNumber").val();

• var pageSizes=$("#pageSize").val();

• var page=Number(pageNumbers)-Number(pageSizes)-Number(pageSizes);

• var pageSum=$("#pageSum").val();

• if(Number(page)>Number(pageSum)){

• page=pageNumbers;

• }

• $("#pageNumber").val(Number(page));

• query();

• }

• function edd(){

• var pageNumbers=$("#pageNumber").val();

• var pageSizes=$("#pageSize").val();

• var page=Number(pageNumbers)-Number(pageSizes);

• if(Number(page)<=0){

• page=0;

• }

• $("#pageNumber").val(Number(page));

• query();

• }

• function heads(){

• var page=0;

• $("#pageNumber").val(Number(page));

• query();

• }

• function end(){

• var pageSizes=$("#pageSize").val();

• var pageSum=$("#pageSum").val();

• var pageEnd=Number(pageSum)%Number(pageSizes);

• var page=Number(pageSum)-Number(pageEnd);

• if(Number(pageEnd)==0){

• if(Number(pageSum)<=Number(pageSizes)){

• page=0;

• }else{

• page=Number(pageSum)-Number(pageSizes)

• }

• }

• $("#pageNumber").val(Number(page));

• query();

• }

• function pageAjax(pageOrd,pageNumber,pageWin,pageSum,pageSize,pageCon,page){

• var pageBeforBf=Number(pageOrd)-Number(1);

• var pageBefor=Number(pageOrd);

• var pageThe=Number(pageOrd)+Number(1);

• var pageNext=Number(pageOrd)+Number(2);

• var pageNextNt=Number(pageOrd)+Number(3);

• $("#"+page).append("<h4>第"+pageThe+"页    共"+Number(pageCon)+"页</h4>");

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='heads()'>首页</button>");

• if(pageNumber>0){

• $("#"+page).append("<button style='width:80px;height:30px;' οnclick='edd()'>上一页</button>");

• }else{

• $("#"+page).append("<button style='width:80px;height:30px;'>上一页</button>");

• }

• if(pageThe>2){

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='edde()'>"+pageBeforBf+"</button>")

• }

• if(pageThe>1){

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='edd()'>"+pageBefor+"</button>")

• }

• $("#"+page).append("<button style='width:60px;height:30px;'>"+pageThe+"</button>")

• if(pageWin>1){

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='add()'>"+pageNext+"</button>");

• }

• if(pageWin>2){

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='adda()'>"+pageNextNt+"</button>");

• }

• if(Number(pageSum)-(Number(pageNumber))>Number(pageSize)){

• $("#"+page).append("<button style='width:80px;height:30px;' οnclick='add()'>下一页</button>");

• }else{

• $("#"+page).append("<button style='width:80px;height:30px;'>下一页</button>");

• }

• $("#"+page).append("<button style='width:60px;height:30px;' οnclick='end()'>尾页</button>");

• }

• Jsp代码：

• JavaScript部分：

• $(document).ready(function(){

• query();

• })

• function query(){

• $("#page").empty();

• var pageSize=$("#pageSize").val();

•    var pageNumber=$("#pageNumber").val();

• var id=getQueryString("id");

• var search=getQueryString("search");

• $.ajax({

•   type: 'POST',

•   url: "<%=request.getContextPath()%>/searchServlet",

• data : {

• "pageSize":pageSize,

•    "pageNumber":pageNumber,

• "search":search,

• "id":id

• },

• dataType : "json",

• async : false,

• success : function(aa) {

• tableData(aa);

• },

• error : function() {

• alert("error");

• }

• });

•  

• }

• function tableData(aa){

• $("#search1").empty();

• $("#image").empty();

• $("#leixing").empty();

• var pageNumber=$("#pageNumber").val();

• var pageSum=aa.pageSum;

• var pageSize=$("#pageSize").val();

• var pageWin=(Number(pageSum)-Number(pageNumber))/Number(pageSize);

• var pageCon=Number(pageSum)/Number(pageSize);

• var pageOrd=Number(pageNumber)/Number(pageSize);

• pageCon=Math.ceil(Number(pageCon));

• $("#pageSum").val(pageSum);

• $("#leixing").append("<span class='fl'><font color='red'>"+aa.search+"</font></span><br/>");

• var id=getQueryString("id");

• $("#search1").append("<dd><a href='search.jsp?id=true&search="+encodeURI(encodeURI(aa.all))+"'>全部品种</a></dd>");

•  

• $("#search1").append("<dd><a href='search.jsp?id=true1&search="+encodeURI(encodeURI(aa.alls))+"'>全部品牌</a></dd>");

• if(id=="false1"||id=="true"){

• for(var i in aa.searchList){

• $("#search1").append("<dd><a href='search.jsp?id=false&search="+encodeURI(encodeURI(aa.searchList[i]))+"'>"+aa.searchList[i]+"</a></dd>");

• }

• }else{

• for(var i in aa.searchList){

• $("#search1").append("<dd><a href='search.jsp?id=false1&search="+encodeURI(encodeURI(aa.searchList[i]))+"'>"+aa.searchList[i]+"</a></dd>");

• }

• }

• var iu=0;

• for(var i in aa.urlList){

• iu=1;

• var image=aa.urlList[i]+".jpg";

• $("#image").append("<li>"

• +"<div class='i-pic limit'>"

• +"<a href='introduction.jsp?search="+aa.urlList[i]+"&name="+aa.nameList[i]+"&company="+aa.companyList[i]+"&price="+aa.priceList[i]+"&allSearch="+aa.all+"'>"

• +"<img src='../images/"+image+"' />"

• +"<p class='title fl'>【"+aa.companyList[i]+"旗舰店】"+aa.nameList[i]+"218g 坚果炒货零食新货巴西松子包邮</p>"

• +"<p class='price fl'>"

• +"<b>¥</b>"

• +"<strong>"+aa.priceList[i]+"</strong>"

• +"</p>"

• +"<p class='number fl'>"

• +"销量<span>"+aa.numberList[i]+"</span>"

• +"</p>"

• +"</a>"

• +"</div>"

• +"</li>");

• }

• if(iu==0){

• $("#search1").append("<br/><br/>然而并没有您所需要的商品");

• }

• var page="page";

• pageAjax(pageOrd,pageNumber,pageWin,pageSum,pageSize,pageCon,page);

• }

•  

• Bady部分：

• <input type="hidden" id="pageNumber" value=0>

•                            <input type="hidden" id="pageSize" value=12>

•                            <input type="hidden" id="pageSum" value=0>

•                          <ul class="am-pagination am-pagination-right" id="page">

•                           

•                           </ul>

•  

• JAVA后台代码：

• int pageSum = new CommonDao().getPageSUm(sql, sl.getSearch().toString());

• sql = sql + " order by id asc limit " + sl.getPageNumber() + "," + sl.getPageSize();

• public int getPageSUm(String sql, String value) {

• try {

• Connection con = getConnection();

• sql = "select count(*) from (" + sql + ") t";

• int i = 0;

• if (sql != null) {

• PreparedStatement pst = con.prepareStatement(sql);

• pst.setString(1, value);

• pst.executeQuery();

• ResultSet rs = pst.getResultSet();

• while (rs.next()) {

• i = rs.getInt(1);

• }

• }

• return i;

• } catch (Exception e) {

• return 0;

• }

• }

• 主要原理：

• 确定分页尺寸，通过改变开始的数据id在dao层通过查询数据的开始id使用limit对数据进行对应尺寸的读取并获得总数据数来返回给jsp页面进行相应的计算以做到分页的效果，整个过程通过分页按钮触发ajax响应后台完成