/*
帅华写的东东 QQ: 19573681
用于PostBack方式的数据列表绑定（必须导入JQuery框架）
返回数据需为JSON格式：
{
totalCount: 3,
data:[
{ UName:'User1', Age: 1 },
{ UName:'User2', Age: 2 },
{ UName:'User3', Age: 3 }
]
}
使用示例：
<html>
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ListView.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var list = new ListView({
url: "PListPostBack", //请求数据的URL
listContainer: "#listContainer", //显示列表的容器
itemTemplet: "#itemTemplet", //列表项模版
btnFirst: ".btnFirst", //首页按钮（可以是任何HTML元素）
btnPer: ".btnPer", //上一页按钮（可以是任何HTML元素）
btnNext: ".btnNext", //下一页按钮（可以是任何HTML元素）
btnLast: ".btnLast", //末页按钮（可以是任何HTML元素）
pageInfo: ".pageInfo", //显示分页详细信息的容器
pageInfoFormat:"(第#pageIndex#页 / 每页#pageSize#条 / 共#pageCount#页 - #totalCount#条)", //分页详细信息的格式化字符串
pagination: { //分页设置
pageSize: 10, //页尺寸
pageIndex: 1 //当前页码
},
onLoad: function(){ //数据加载完毕事件
$.unblockUI();
//控制新加载项的鼠标移动的样式切换
$(".item1").mouseover(function(){
$(this).addClass("item2");
}).mouseout(function(){
$(this).removeClass("item2");
});
},
onLoading: function(){
$.blockUI({message:"数据加载，请稍候......"});
}
});
list.loadData({pageIndex:1,pageSize:12});
//搜索
$("#btnSearch").click(function(){
list.loadData({pageIndex:1, pageSize:12, UName: $("#txtUName").val()},true);
});
})
</script>
</head>
<body>
姓名：<input id="txtUName" type="text" /><button id="btnSearch">搜索</button>
<table id="listContainer">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr id="itemTemplet">
<td>#UName#</td>
<td>#Age#</td>
</tr>
<tr>
<td collspan="2">
<a id="btnFirst" href="#" οnclick="return false;">首页</a>
<a id="btnPer" href="#" οnclick="return false;">上一页</a>
<span id="pageInfo"></span>
<a id="btnNext" href="#" οnclick="return false;">下一页</a>
<a id="btnLast" href="#" οnclick="return false;">末页</a>
</td>
</tr>
</table>
</body>
</html>
*/
var ListView = function(config){
var itemGroup = Math.random(); //数据项的分组ID（加载新数据时根据itemGroup清除原有的html标记）
//基本配置
var options = {
/*用户配置项*/
url: "#", //请求数据的URL
listContainer: "#listContainer", //显示列表的容器
itemTemplet: "#itemTemplet", //列表项模版
btnFirst: "#btnFirst", //首页按钮（可以是任何HTML元素）
btnPer: "#btnPer", //上一页按钮（可以是任何HTML元素）
btnNext: "#btnNext", //下一页按钮（可以是任何HTML元素）
btnLast: "#btnLast", //末页按钮（可以是任何HTML元素）
pageInfo: "#pageInfo", //显示分页详细信息的容器
pageInfoFormat:"(第#pageIndex#页 / 每页#pageSize# / 共#pageCount#页 - #totalCount# 条数据)", //分页详细信息的格式化字符串
pagination: { //分页设置
pageSize: 10, //页尺寸
pageIndex: 1, //当前页码
totalCount: 0 //总数据量
},
onLoading: function(){}, //数据开始加载事件
onLoad: function(){}, //数据加载完毕事件
onPageChange: function(action,pageIndex){} //翻页事件
};
//覆盖默认配置
options = $.extend(options, config);
//列表项模版的HTML字符串形式
var jqItemTemplet = $(options.itemTemplet);
var strItemTemplet = jqItemTemplet.length > 0 ? jqItemTemplet[0].outerHTML : "";
jqItemTemplet.remove();
//列表容器的JQuery对象
var jqListContainer = $(options.listContainer);
/*加载数据(clearPagination:是否清清除有分页信息，默认清除)*/
this.loadData = function(param,clearPagination){
param.rand = Math.random();
//执行数据加载事件
options.onLoading();
//覆盖分页设置
if(clearPagination == true || clearPagination == null){
options.pagination = {
pageIndex: options.pagination.pageIndex,
pageSize: options.pagination.pageSize
}
}
options.pagination = $.extend(options.pagination, param);
param.pageIndex = options.pagination.pageIndex;
param.pageSize = options.pagination.pageSize;
//请求数据，并完成数据填充
$.getJSON(options.url,param,function(json){
//设置总数据量
options.totalCount = json.totalCount;
//清空列表容器中列表项
jqListContainer.find("[itemGroup="+itemGroup+"]").each(function(){
$(this).remove();
});
//循环填充数据到列表容器
for(var i=0;i<json.data.length;i++){
//数据项的HTML表示形式
var html = strItemTemplet.toString();
//遍历当前数据项的所有属性，并进行填充
for(var p in json.data[i]){
var reg = new RegExp("(#" + p + "#)","g");
html = html.replace(reg,json.data[i][p]);
}
var jqItem = $(html);
//设置列表项的itemGroup
jqItem.attr("itemGroup",itemGroup);
//将列表项填充至列表
jqListContainer.append(jqItem);
}
//执行数据加载完毕事件
options.onLoad();
//设置分页信息
var jqPageInfo = $(options.pageInfo);
if(jqPageInfo.length > 0){
var strHtml = options.pageInfoFormat;
strHtml = strHtml.replace(/(#pageIndex#)/g,options.pagination.pageIndex);
strHtml = strHtml.replace(/(#pageSize#)/g,options.pagination.pageSize);
strHtml = strHtml.replace(/(#pageCount#)/g,parseInt(Math.ceil(options.totalCount / options.pagination.pageSize)));
strHtml = strHtml.replace(/(#totalCount#)/g,options.totalCount);
jqPageInfo.html(strHtml);
}
//控制分页按钮
var jqBtnFirst = $(options.btnFirst);
var jqBtnPer = $(options.btnPer);
var jqBtnNext = $(options.btnNext);
var jqBtnLast = $(options.btnLast);
jqBtnFirst.attr("disabled",false);
jqBtnPer.attr("disabled",false);
jqBtnNext.attr("disabled",false);
jqBtnLast.attr("disabled",false);
if(options.pagination.pageIndex <= 1){
jqBtnFirst.attr("disabled",true);
jqBtnPer.attr("disabled",true);
}
if(options.pagination.pageIndex >= parseInt(Math.ceil(options.totalCount / options.pagination.pageSize))){
jqBtnNext.attr("disabled",true);
jqBtnLast.attr("disabled",true);
}
})
}
//声明加载数据的方法，供当前对象内部使用
var loadData = this.loadData;
/*翻页事件*/
$(options.btnFirst).click(function(){//首页
//执行翻页事件
options.onPageChange("first",1);
//加载数据
loadData({pageIndex: 1},false);
});
$(options.btnPer).click(function(){ //上一页
//执行翻页事件
options.onPageChange("per",options.pagination.pageIndex - 1);
//加载数据
loadData({pageIndex: options.pagination.pageIndex - 1},false);
});
$(options.btnNext).click(function(){ //下一页
//执行翻页事件
options.onPageChange("next",options.pagination.pageIndex + 1);
//加载数据
loadData({pageIndex: options.pagination.pageIndex + 1},false);
});
$(options.btnLast).click(function(){ //末页
//执行翻页事件
options.onPageChange("last",parseInt(Math.ceil(options.totalCount / options.pagination.pageSize)));
//加载数据
loadData({pageIndex: parseInt(Math.ceil(options.totalCount / options.pagination.pageSize))},false);
});
}
自己用JS写的Ajax数据分页类（需依赖JQuery框架）
最新推荐文章于 2024-07-25 12:41:07 发布
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
