如何通过laypage前端分页插件实现ajax异步分页

本文实例为大家分享了laypage前端分页插件，ajax异步分页，获取json数据实现无刷新分页，供大家参考，具体内容如下：
function GetList(pageIndex) {
var _this = ""
var clone_this = "";
_this = $("BindDataList");//数据列表容器，
clone_this = _thisclone(true);
var pageSize = 25;//每页展示的条数
$ajax({
type: "get",
async: false,//异步锁定，默认为true
url: "/ashx/System/DefaultAjaxashx",//后端处理数据，返回json格式
data: {"pageIndex": pageIndex, "pageSize": pageSize, },
contentType: "application/json; charset=utf-8",
success: function (data) {
var json = eval("(" + data + ")");
if (jsonPageCount > 0) //数据总条数
{
_thishtml("");
for (var i = 0; i < jsonrowslength ; i++) {
var html = "<li>json数据</li>";
_thisappend(html);
}
jsonpage(json, pageIndex, pageSize);
}
else {
_thishtml("");
_thisappend("");
}
}
});
}

function jsonpage(json, pageIndex, pageSize) {
var coun = jsonPageCount;//总数据条数
var pagecount = coun % pageSize == 0 coun / pageSize : coun / pageSize + 1;//计算多少页
var laypageindex = laypage({
cont: 'project_page', //容器。值支持id名、原生dom对象，jquery对象。
skin: '#fb771f',
pages: pagecount, //通过后台拿到的总页数
curr: pageIndex, //初始化当前页
first: '|<', //将首页显示为数字1,。若不显示，设置false即可
last: '>|', //将尾页显示为总页数。若不显示，设置false即可
prev: '<', //若不显示，设置false即可
next: '>', //若不显示，设置false即可
jump: function (obj, first) { //触发分页后的回调
if (!first) { //点击跳页触发函数自身，并传递当前页：objcurr
SearchHotTag(objcurr);
}
}
});
}

实现原理很简单，就是建立一个Page类，里面放当前访问的页数（这个是从客户浏览器传到后台的数据，所以你的分页需要用它来定位记录的条目）和每一页显示的记录行数。然后通过分页计算就可以得出下列数据。
(假定你的页数从1开始)
1、总页数 = 总记录数/每页大小,如果0!=总记录数%每页大小，那么总页数再+1
2、当前页数(从浏览器传递的参数中获得)
3、表记录的起始位置=(当前页数-1)每页大小
4、总记录数（select count() from [表名] [where [条件]]，从数据库中查询得到)
5、每页大小，可以固定，也可以从页面传过来
有了这几个参数之后，就用sql语句查出对应的记录就可以了。
mysql数据库用limit 表记录的起始位置,每页大小 语句添加到你的查询语句最后面
sqlserver数据库用top语句和not in 来做
oracle数据库用rownum来做
再给你一段分页对象代码，你自己先读一下
public class Page {
private long totalCount = 0;// 总记录数
private int pageNumber = 1;// 当前页号，默认显示第一页
private int pageSize = 20; // 每页大小，默认每页20条
private int totalPage = 0;// 总页数，默认为0
private int startRow = 0;// 起始记录行号，默认为从表头开始
/
分页计算方法，由setTotalCount调用
/
public void pagination() {
// 计算总页数
if (thistotalCount % pageSize == 0)
thistotalPage = new Long(thistotalCount / pageSize)intValue();
else
thistotalPage = new Long(thistotalCount / pageSize)intValue() + 1;
// 排除错误页号
if (thispageNumber < 1)
thispageNumber = 1;
if (thispageNumber > thistotalPage)
thispageNumber = thistotalPage;
// 计算起始行号
thisstartRow = (thispageNumber - 1) thispageSize;
}
public long getTotalCount() {
return totalCount;
}
public void setTotalCount(long totalCount) {
thistotalCount = totalCount;
thispagination();
}
public int getPageNumber() {
return pageNumber;
}
public void setPageNumber(int pageNumber) {
thispageNumber = pageNumber;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
thispageSize = pageSize;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
thistotalPage = totalPage;
}
public int getStartRow() {
return startRow;
}
public void setStartRow(int startRow) {
thisstartRow = startRow;
}
}

您好，很高兴为您解答。
通过使用 disabled 来定义不可点击的链接，通过使用 active 来指示当前的页面。

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  
</ul>

如若满意，请点击右侧采纳答案，如若还有问题，请点击追问
希望我的回答对您有所帮助，望采纳！
                                                                                                                         ~ O(∩_∩)O~

网页链接

看一下这个吧，现在很少有人手动写分页了，一般都是用插件。或者现在主流的前端框架，都有用户量特别大的前端组件库，用起来很方便。其实这个分页手写js并不难，主要是理清逻辑就可以了，能写但是没必要~如果是比较老的前端框架，必须手写js分页逻辑，追问就行，我给你屡屡

---