标签：前端 分页 wg_pagenation ajax
现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复.....
感谢我的基友,刘总...他主要给本插件写配套主题css;
整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多.
当前版本:1.0
完成日期:20150815
White.css的效果图:
default.css效果图:
上图上向下的箭头表示的是每一个可选择和更改的区域,用户可以对这些区域进行css或是否显示等等的更改.
更多css请自己尝试......
<html>
<head>
<title>wgPagenation----无刷新翻页</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="wg_pagenation_default.css" type="text/css" />
<script src="wg_pagenation.js"></script>
<script type="text/javascript">
$(function(){
wgPagenation();
});
</script>
</style>
</head>
<body>
<div id="Pagination" align="center"></div>
</body>
</html>显示效果:
wgPagenation({ url:'#',
row:7,
page:1,
params:{articleId:3}
}); 更多参数以及默认参数如下,其中所有参数均是可选:wgPagenation({
content:"Pagination",//指定一个div的id,来初始化分页内容
row:15,//每页多少行数据
page:1,//当前页面
count:15,//后台返回的总记录数量
totalPage:1,//总的页数,用户无需指定,通过前台可以自己核算出来
orderBy:null,//升序还是降序排列
sort:null,//排序的字段
row_name:'row',//row参数与后台交互的时候显示的参数名称
page_name:'page',//page参数传与后台交互的时候显示的参数名称
count_name:'count',//count参数与后台交互的时候显示的参数名称
orderBy_name:'orderBy',//orderBy参数与后台交互的时候显示的参数名称
sort_name:'sort',//sort参数与后台交互的时候显示的参数名称
url:'#',//分页数据url,默认跳转到当前页面
params:{},//分页数据需要传递的参数,除开分页信息外的参数
onclick:function(data){return true;},//点击按钮之后的回调的函数,而传回的这个data就是button的页码数值,
//或者用户输入的input的值,返回false或者无返回值可以阻止向服务器发送数据
success:function(data){},//成功接收服务器数据之后的回调函数,data是服务器发送的数据,同ajax
error:function(XMLHttpRequest, textStatus, errorThrown){},//连接服务器失败的回调函数,同ajax
prev_text: '上一页', //上一页按钮里text
next_text: '下一页', //下一页按钮里text
goTo_text:'跳转',//跳转按钮显示文字
first_page_text:'首页',//首页按钮显示的文字
end_page_text:'尾页',////尾页按钮显示的文字
prev_show_always:true,//是否显示“前一页”分页按钮布尔型，可选参数，
next_show_always:true,//默认为true，即显示“下一页”按钮
first_show_always:true,//是否显示首页
end_show_always:true,//是否显示尾页
num_display_left:5,//左边显示的连续页数显示按钮
num_display_right:3,//右边显示的连续页数显示按钮
ellipse_text:'...',//左右两边连续页数中间,省略的页数用什么文字表示
showTotalPageInfo:true,//是否显示总页数信息
totalPageInfoFunction:function(page,totalPage){
return '页码:'+page+"/"+totalPage+"页";
},//渲染页数信息的函数,要求返回一个可包含html代码的字符串,传入当前页号,和总页数
beforeSend:function(XMLHttpRequest){},//同ajax中的beforeSend
timeout:50000, //加载时间,同ajax中timeout;
dataType:'text',//同ajax中dataType
async:true,//同ajax中async
cache:true,//同ajax中cache
beforeRender:function(){return true;},//渲染分页之前调用的回调函数,返回false或者无返回值将阻止渲染
);
wgPagenation({ url:'#',row:7,page:1,params:{articleId:3},{
//此对象内就是用户自定的css
num_display_css:'my_num_display_css',
num_currentPage_css:'my_num_currentPage_css'}
});
然后自定义相关的css: <style type="text/css">
.my_num_display_css
{
border:1px;
border-color:#999999;
text-decoration: none;
border-style: solid;
color:#AAAAAA;
}
.my_num_currentPage_css{
XXX
}
</style> wgPagenation({ url:'#',row:7,page:1,params:{articleId:3},{
//此对象内css的值对应相应div中,class="XXX",class=""用来指定显示的样式;
num_display_css:'wg_num_display_css',//中间连续分页的按钮的css
num_currentPage_css:'wg_num_currentPage_css',//中间当前页码的显示css
totalPageInfo_css:'wg_totalPageInfo_css',//显示总页数的div的css
ellipse_text_css:'wg_ellipse_text_css',//省略页数的符号的css
first_show_css:'wg_first_show_css',//首页按钮css
end_show_css:'wg_end_show_css',//尾页按钮的css
first_show_disable_css:'wg_first_disable_css',//首页按钮css,首页被禁用的css
end_show_disable_css:'wg_end_disable_css',//尾页按钮的css,尾页被禁用的css
prev_css:'wg_prev_css',//上一页按钮的css
next_css:'wg_next_css',//下一页按钮的css
prev_disable_css:'wg_prev_disable_css',//上一页按钮的css,上一页被禁用的css
next_disable_css:'wg_next_disable_css',//下一页按钮的css,下一页被禁用的css
gotoPage_css:'wg_gotoPage_css',//跳转按钮的css样式
gotoPageInput_css:'wg_gotoPageInput_css',//输入页码的input的样式
});注意:可以通过wg_pageCss.XXX来获取实时css,通过wg_pageCss.XXX=XXX来动态设定css;
以下是插件用到的css和js文件下载,还包括几个简单的html页面示例:
版权声明：本文为博主原创文章，未经博主允许不得转载。
wg_pagenation 1.0 自己写的一个分页插件_基于Jquery
标签：前端 分页 wg_pagenation ajax
原文地址：http://blog.csdn.net/huitoukest/article/details/47684425
