js分页处理，两种方法

js分页一套.js可以应用两种分页方法。

 本人用的是ajax+java的请求，所以后太返回的数据都会在ajax的success中进行处理。

一，从后台获取即点即查

   所谓的即点即查就是当点击下一页的时候会执行查询的方法。例如，分页一百条数据，每页分为10条数据。首先通过sql 的count获得你所查询的数据总条数.

success:function(data){
  var count=data.data;
  var totalPages1= Math.ceil(count1/10);
    Page({
        num:totalPages1,//页码数
        startnum:pageComplete,	//指定页码
        elem:$('#complete123Count'),//指定的元素
        callback:function(n){	//回调函数
            console.log(n);
            pageComplete=n;
            txt(n);
        }
    });
}

Page是给封装好的page.js提供参数的方法。n是当点击下一页或对应页码后返回的当前页码。txt();是你的数据查询方法。

你每次点击在执行回调函数。

sql语句中只需要用到 

 limit #{offset},10 

offset 是你查询的开始位置，10是查询的条数。例如当前第一页，你会从第0条开始查（即第一条数据），查询10条，那么就满足上面分页的需要。每次执行分页方法都只进行十条数据的处理请求会大大的增大访问效率。至于你传回的页数和你的offset的关系只需要加减乘除法的自己进行一下运算就好了，可以在js处理也可以在java控制层处理，这里就不多说了。

二，查出全部数据由js进行分页处理。

   由于很多特殊原因，无法用 limit这种方法进行分页处理。所以必须查出所有数据，在js中进行分页，这里得提醒一下如果无非必要或数据较小尽量不要选择这种方法，因为数据量过大会影响效率。

 首先我从后台请求回来的参数类型是List集合，在ajax里解析需要用到$.each进行便利,最终是要拼接到html页面中的。

先定义一个几个  var txtArray=new Array();

success:function(data){
   var obj=data.dat;
   $.each(obj,function(index,val){
     var txt="<div>"+val.name+"<div>"
      txtArray.pust(txt);
})
 
}

 现在将你所有便利并拼接起来的字符串全部存入txtArray数组中，下一步就是分页查询。

                  var count=pageArray.length;
                     var totalPages= Math.ceil(count/10);
                     Page({
                         num:totalPages,//页码数
                         startnum:pageJs,//指定页码
                         elem:$("#personalDownloadCount"),//指定的元素
                         callback:function(n){	//回调函数
                             console.log(n);
                             pageJs=n;
                             x=10*n-10;
                             y=10*n;
                             pageArray(x,y);
                         }
                     });

这一次的count是数组的长度，还是每页分十条数据。会掉函数为pageArray(x,y)。初始x=0 ;y=10 x为数组下标长度的开始，y为结束

function pageArray(x,y){
    $("#personalDownload").empty();
    if(pageArray.length>0){
        var i=x;
        for (i;i<pageArray.length;i++){
            if( i <y){
                $("#personalDownload").append(pageArray[i]);
            }else {
                return;
            }
        }
    }
}

这样分页就完成了，当你每次回掉的时候通过x和y的运算得到对应页码的x和y 在进入pageArray()方法中便利对应下标的对应value。

下面附上分页的html页面代码和页面效果

<div class="row text-center" id="x_shzt_p" style="margin-bottom: 50px;cursor:pointer;margin-left:24%;">
	<ul class="pagination" id="personalDownloadCount" style="display: block;">
	</ul>
</div>

这要注意 ul 的id 一定要和 js中 Page中 elem里的值对应上。

最后是用到的

page.js

https://download.csdn.net/download/loveandlvan/10277782