您的位置：首页 > Web前端 > JavaScript

JS无刷新分页插件

2016-02-26 15:26 507 查看
本文介绍一个本人自己写的一JS分页插件

<script src="/Js/smart.page.min.js" type="text/javascript"></script>


页面JS调用，实例化带参数的函数

function pageplugin(pagesize, url, ext, async)


参数说明

pagesize：指定每页行数

url：请求数据的接口地址

ext：class名称的后缀，本文写了1，每个class名称后面都有个1，就是这个1了，这样一个页面就可以实例多次

async：是否异步

<script type="text/javascript">
//实例化函数,每页3行，接口为/Test/Page.ashx?a=1，class名称后缀为1
var page = new pageplugin(3, '/Test/Page.ashx?a=1',1);
// page.append = true;//加载更多的方式翻页
page.dataspace = "smart_page_dataspace1";//放置展示数据的容器
page.setdata = function (data) {
var json = eval('(' + data + ')');
var html = "<table>";
for (var i = 0; i < json.list.length; i++) {
html += "<tr>";
html += "<td>" + json.list[i].Id + "</td><td>" + json.list[i].UserName + "</td>";
html += "</tr>";
}
html += "</table>";
this.sethtml(html); //将拼接的Html打印出来
}
page.getdata(); //初始化加载第一页数据

</script>


显示class名称

当前页：smart_page_pageindex

总页数：smart_page_pagecount

每页行数：smart_page_pagesize

总行数：smart_page_rowcount

<span title="当前页" class="smart_page_pageindex1"></span>/<span title="总页数" class="smart_page_pagecount1"></span>页
<span title="每页行数" class="smart_page_pagesize1"></span>条每页 总共<span title="总行数" class="smart_page_rowcount1"></span>条


按钮class名称

首页：smart_page_first

上一页：smart_page_pre

下一页：smart_page_next

末页：smart_page_last

<input class="smart_page_first1" type="button" value="首页" />
<input class="smart_page_pre1" type="button" value="上一页" />
<input class="smart_page_next1" type="button" value="下一页" />
<input class="smart_page_last1" type="button" value="末页" />


如果是手机加载更多的方式点下一页也是smart_page_next

<div class="smart_page_next1">加载更多</div>


放置数据的容器class名称smart_page_dataspace

<div class="smart_page_dataspace1"></div>


接口的page.ashx文件全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/Js/smart.page.min.js" type="text/javascript"></script>
</head>
<body>
<div class="smart_page_dataspace1">
</div>
<div>
<span title="当前页" class="smart_page_pageindex1"></span>/<span title="总页数" class="smart_page_pagecount1"></span>页
<span title="每页行数" class="smart_page_pagesize1"></span>条每页 总共<span title="总行数" class="smart_page_rowcount1"></span>条
</div>
<input class="smart_page_first1" type="button" value="首页" />
<input class="smart_page_pre1" type="button" value="上一页" />
<input class="smart_page_next1" type="button" value="下一页" />
<input class="smart_page_last1" type="button" value="末页" />
<div class="smart_page_next1">
加载更多</div>
</body>
<script type="text/javascript">
//实例化函数,每页3行，接口为/Test/Page.ashx?a=1，class名称后缀为1
var page = new pageplugin(3, '/Test/Page.ashx?a=1', 1);
page.append = true; //加载更多的方式翻页
page.dataspace = "smart_page_dataspace1"; //放置展示数据的容器

page.setdata = function (data) {
var json = eval('(' + data + ')');

var html = "<table>";
for (var i = 0; i < json.list.length; i++) {
html += "<tr>";
html += "<td>" + json.list[i].Id + "</td><td>" + json.list[i].UserName + "</td>";
html += "</tr>";
}
html += "</table>";
this.sethtml(html); //将拼接的Html打印出来
}
page.getdata(); //初始化加载第一页数据

</script>
</html>


View Code
smart.page.min.zip文件下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航