`
ninnd
  • 浏览: 21954 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery分页插件

阅读更多

自己尝试着写了个分页插件,发出来请大家指正

/**
 * 分页插件
 * 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("&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;").append(_count).append("&nbsp;条记录,每页&nbsp;").append(_pageList).append("&nbsp;条,共&nbsp;").append(_max).append("&nbsp;页,当前第&nbsp;").append(_pageNo).append("&nbsp;页&nbsp;");
		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分页插件**是Web开发中常用的一种工具,用于在大量数据中实现高效的页面导航,提升用户体验。本资源包含一个演示说明,使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...

    jquery分页插件结合jsp实例

    本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages(JSP)结合,实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法,以及它与JSP的集成。 首先,`jQuery`是一种轻量级的...

    jQuery分页插件设置分页内容显示数量的分页代码

    本篇文章将详细讲解如何使用jQuery分页插件来设置分页内容显示的数量。 首先,我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择,例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-...

    jquery分页插件带总数分页代码

    本知识点将详细讲解如何使用jQuery分页插件实现带总数的分页代码。 首先,我们需要一个分页插件。这里提到的"jquery分页插件带总数分页代码"可能是指包含总条数显示功能的插件,例如"jQuery Pagination Plugin with...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`,在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    jquery分页插件

    **jQuery分页插件**是Web开发中常用的一种工具,主要用于处理大数据量的展示,将大量数据分成多个小部分,以便用户能够轻松地在不同页面间浏览。在网页设计中,尤其是在内容管理系统、电子商务网站或者数据报表应用...

    五款漂亮的jquery分页插件

    以下是对"五款漂亮的jquery分页插件"的详细分析: 1. **Bootstrap Pagination** Bootstrap是广泛使用的前端框架,它自带的Pagination组件简洁而实用。这款jQuery分页插件具有响应式设计,可以自适应不同设备的屏幕...

    简单实用的jquery分页插件

    在网页开发中,数据展示往往...接着,选择一个合适的jQuery分页插件。这里我们假设已有一个名为"pagination.js"的插件文件,包含必要的分页功能。将该文件与HTML文件一同放在项目目录中,并在页面底部引入: ```html ...

    简单的jQuery分页插件下载.zip

    **jQuery分页插件简介** 在网页开发中,分页是一种常见的数据展示方式,它能够帮助用户有效地浏览大量数据,避免一次性加载过多内容导致页面响应变慢或内存消耗过大。jQuery是一个轻量级的JavaScript库,它简化了...

    JS+Jquery分页插件

    总结来说,JS+jQuery分页插件通过利用jQuery库的强大功能,结合CSS样式表,可以轻松实现网页的高效分页功能,提高用户在浏览大量数据时的体验。对于前端开发者而言,理解并掌握这种插件的使用和实现原理,有助于提升...

    jQuery分页插件 很实用

    在本教程中,我们将深入探讨jQuery分页插件的使用方法、核心功能和优点。 首先,jQuery分页插件的工作原理是通过JavaScript库jQuery来动态加载和展示页面内容。当用户点击分页按钮时,插件会向服务器发送请求,获取...

    结合CSS3实现的jQuery分页插件.zip

    实现效果: 结合CSS3实现的jQuery分页插件,分页的效果是很常用的,无论是前台还是后端管理系统,都会使用到分页,在企业站或商城网站中都是很实用的。php中文网推荐下载!

    jQuery分页插件(实例详尽,简单易用

    jQuery分页插件是网页开发中常用的一种工具,它能够帮助开发者轻松地在大量数据中实现页面的分段展示,提高用户体验,同时减轻服务器负担。本文将深入探讨jQuery分页插件的工作原理、优势以及如何在实际项目中进行...

    多款jQuery分页插件特效.zip

    本资源"多款jQuery分页插件特效.zip"包含了多种jQuery分页插件的代码示例,供开发者学习和参考。 1. jQuery分页原理: jQuery分页插件通常是基于HTML、CSS和JavaScript构建的。它们通过监听用户的交互事件(如点击...

    简单轻巧的Jquery分页插件

    JQuery分页插件是解决这个问题的一种高效方案,它能够帮助开发者轻松地实现动态加载和分页显示数据,提高用户体验。本篇将详细介绍这款简单轻巧的Jquery分页插件,并探讨其核心功能和应用场景。 Jquery分页插件是...

    jQuery分页插件,超强

    jQuery分页插件是网页开发中的一个重要工具,它使得大量数据的展示变得更为高效和用户友好。在网页中,特别是涉及到数据库查询或者大型数据集的显示时,分页功能能够帮助用户逐步浏览信息,避免一次性加载过多内容...

    jQuery分页插件页码跳转代码.zip

    jQuery分页插件是实现这一功能的强大工具,它简化了JavaScript代码,让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先,我们需要了解jQuery分页的...

    html 自己写的jquery分页插件

    本项目涉及的是一个自定义的 jQuery 分页插件,用于实现数据的分页展示,提高用户体验,特别是处理大量数据时。下面将详细介绍这三个技术以及分页插件的相关知识点。 **HTML(HyperText Markup Language)** 是网页...

Global site tag (gtag.js) - Google Analytics