自己尝试着写了个分页插件,发出来请大家指正
/**
* 分页插件
* co-hedahong001
*/
(function($) {
var page = {
pageSize:10,
pageNo:1,
count:0,
maxPage:0
};
function load(){
var opts = $.fn.paging.defaults;
var params={};
if (opts.formId) {
if(opts.validate){
if(!$("#"+opts.formId).form('validate')){
$("label.error-msg").html("[查询条件有误...]");
return false;
}else{
$("label.error-msg").html("");
}
}
$.extend(params,page,parseForm(opts.formId));
}else{
$.extend(params,page);
}
$.ajax({
url:opts.url,
dataType:opts.dataType,
type:opts.type,
async:opts.async,
timeout:20000,
data:params,
success: function(data){
page.count = data.count;
page.maxPage = data.maxPage
refresh();
$("div.error-msg").html("");
if (opts.success) {
opts.success(data.result);
}
if (data.result.length==0) {
alert("没有符合条件的记录");
}
},
error:function(res,msg,e){
if (opts.error) {
opts.error(res,msg,e);
}else{
$("label.error-msg").html("[数据加载异常("+msg+")]");
}
}
});
}
/** 解析form元素并拼接成json格式数据同时完成表单验证*/
function parseForm(id){
var json={},form=$("#"+id)[0];
for(var i=0;i<form.length;i++){
if(isNull(form[i].value)){continue;}
if(form[i].disabled){continue;}
var t = form[i].type;
if(t=="text"||t=="select-one"||t=="hidden"||t=="checkbox"||t=="radio"){
if(form[i].name){
if(t=="radio"){
if(!json[form[i].name]){
json[form[i].name]=$("input[name='"+form[i].name+"']:checked").val();
}
continue;
}
if(t=="checkbox"){
if(!json[form[i].name]){
var vals=[];
$("input[name='"+form[i].name+"']:checked").each(function(i){
vals[i]=this.value;
});
if (vals.length>0) {
json[form[i].name]=vals.join(",");
}
continue;
}
}
json[form[i].name]=form[i].value;
}
}
}
return json;
}
function init(target,opts){
if (target.children().size()>0) {
return;
}
var _first = $("<input>").attr("type","button").val("|<<").click(function(){
page.pageNo=1;
load();
});
var _previous = $("<input>").attr("type","button").val("<<").click(function(){
page.pageNo = page.pageNo-1;
if (page.pageNo<1) {
page.pageNo = 1;
}
load();
});
var _next = $("<input>").attr("type","button").val(">>").click(function(){
page.pageNo = page.pageNo+1;
if (page.pageNo>page.maxPage) {
page.pageNo = 1;
}
load();
});
var _last = $("<input>").attr("type","button").val(">>|").click(function(){
if (page.maxPage>0) {
page.pageNo=page.maxPage;
load();
}
});
var _error = $("<label>").css("color","red").addClass("error-msg");
var _count = $("<label>").addClass("paging-count").html(page.count);
var _max = $("<label>").addClass("paging-max").html(page.maxPage);
var _pageNo = $("<label>").addClass("paging-pageNo").html(1);
if (!opts.pageSize||opts.pageSize<10) {
opts.pageSize=10;
}
var _pageList = $("<select>").css("width","40px").append($("<option>").val(opts.pageSize).html(opts.pageSize)).change(function(){
page.pageNo=1;
page.pageSize=parseInt(this.value);
load();
});
if(opts.pageList){
_pageList.html("");
for(var i=0; i<opts.pageList.length; i++) {
$("<option>").val(opts.pageList[i]).html(opts.pageList[i]).appendTo(_pageList);
}
}
_pageList.val(opts.pageSize);
page.pageSize=opts.pageSize;
var _info = $("<label>").append(" 共 ").append(_count).append(" 条记录,每页 ").append(_pageList).append(" 条,共 ").append(_max).append(" 页,当前第 ").append(_pageNo).append(" 页 ");
target.append(_error).append(_info).append(_first).append(_previous).append(_next).append(_last);
}
function refresh(){
$("label.paging-count").html(page.count);
$("label.paging-max").html(page.maxPage);
$("label.paging-pageNo").html(page.pageNo);
}
$.fn.paging = function(options) {
$.extend($.fn.paging.defaults, options);
if (options.data) {
$.extend(params,options.data);
}
init(this,$.fn.paging.defaults);
};
$.fn.paging.defaults={
url:"", // 数据地址
type:"post", // 请求类型
dataType:"json", // 数据格式
data:null, // 请求参数
async:true, // 是否同步
validate:false, // 是否验证(依赖:jquery.validatebox.js,jquery.form.js)
formId:null, // 参数表单
pageList:[10,20,30,40,50], // 每页显示数
pageSize:10, // 每页显示条数
success:null, // 成功后处理函数
error:null // 错误状态监听函数
};
$.fn.paging.query=function(){
page.pageNo=1;
load();
};
})(jQuery);
样式:
.paging-first,.paging-previous,.paging-next,.paging-last{
cursor: pointer;margin: 0 10px;font-size: 13px;border: 1px solid #336699;background-color: #BCD1D8;padding: 1px;
}
分享到:
相关推荐
jQuery分页插件设置分页内容显示数量的分页代码 jQuery分页插件设置分页内容显示数量的分页代码
jquery分页插件带总数分页代码 jquery分页插件带总数分页代码
jquery分页插件结合jsp实例 有什么不晓得的加Q 359709421
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jquery分页插件-内有演示说明 很时用,一看就明白
简单实用的jquery分页插件,不会分页的人入门教程!
简单的jQuery分页插件下载是一款不用分页即可显示的jQuery插件jQuery.page.js。
实现效果: 结合CSS3实现的jQuery分页插件,分页的效果是很常用的,无论是前台还是后端管理系统,都会使用到分页,在企业站或商城网站中都是很实用的。php中文网推荐下载!
jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件
jQuery 分页插件 有详细的使用教程,怎么用之类的 很详细 很实用 很漂亮
jquery 分页插件 kkpager jquery 分页插件 kkpager jquery 分页插件 kkpager
jQuery分页插件,代码少兼容性好,好用简单,快速集成。
jquery分页插件quickpaginate的使用,比较详细,对于table的分页
jquery分页插件-JqueryPagination.zip,前端jquery分页插件
jquery分页插件Quick Paginate下载,支持新闻列表,图片分页等
该插件用于页面分页,可实现前后翻页,以及最后一页的和输入数字翻页。
html 自己写的jquery分页插件 支持上一页 下一页 首页 尾页 下一篇 上一篇
jQuery分页插件(实例详尽,简单易用
用户体验非常不错的五种分页插件效果,这是国外某网站首推的效果,今天复制过来给大家分享一下,懒人之家推荐下载