ajax分页插件 支持自定义

<style>
    	ul, li{
    		list-style: none;
    	}
    	.div_page{
    		-moz-user-select:none;
    	}
    	.div_page li{
    		display: inline-block;
    		padding: 2px 8px;
    		border: 1px solid #ddd;
    		margin: 0px 2px;
    		cursor: pointer;
    	}
    	.active{
    		color: #fff;
    		background: #428bca;
    	}
    	.disable{
    		background: #ddd;
    		color: #aaa;
    	}
    </style>

    <ul class="div_page" onselectstart="return false">
		<li class="prev disable" data-pagebtn="-1"><a class="pointer " >上一页</a></li>
		<li class="next" data-pagebtn="1"><a class="pointer" >下一页</a></li>
	</ul>

  

$.fn.jqueryPageFun = function(options) {
		var defConfig = {
			total: 0,        //总条数
			onePageCount: 0, //每页条数
			currentPage: 0,  //当前页
			pageCount: 0,    //总页数
			pageChangeFun: function(){},
			ajaxSuccess: true
		}

		var timer;
		var opts = $.extend(defConfig,options);
		var obj = $(this);
		var prev = obj.find(‘.prev‘);
		var next = obj.find(‘.next‘);
		init();

		function init(){
			opts.pageCount = Math.ceil(opts.total/opts.onePageCount);
			var pageHtml = ‘‘;
			for(var i = 0; i<opts.pageCount; i++){
				if(i == (opts.currentPage-1)){
					pageHtml += ‘<li class="page_btn active" data-page="‘+(i+1)+‘"><a class="pointer">‘+(i+1)+‘</a></li>‘;
				}else{
					pageHtml += ‘<li class="page_btn" data-page="‘+(i+1)+‘"><a class="pointer">‘+(i+1)+‘</a></li>‘;
				}
			}
			prev.after(pageHtml);
		}

		//分页按钮
		obj.on(‘click‘, ‘li:not(".disable")‘, function(){
			if($(this).data(‘pagebtn‘)){
				opts.currentPage += parseInt($(this).data(‘pagebtn‘));
			}else{
				opts.currentPage = parseInt($(this).data(‘page‘));
			}
			opts.ajaxSuccess = opts.pageChangeFun&&$.isFunction(opts.pageChangeFun)? opts.pageChangeFun(defConfig):‘‘;
			if(opts.ajaxSuccess){
				opts.currentPage == opts.pageCount?(function(){obj.find(‘.next‘).addClass(‘disable‘)})():(function(){obj.find(‘.next‘).removeClass(‘disable‘)})();
				opts.currentPage == 1?(function(){obj.find(‘.prev‘).addClass(‘disable‘)})():(function(){obj.find(‘.prev‘).removeClass(‘disable‘)})();
				obj.find(‘li:eq(‘+opts.currentPage+‘)‘).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
			}else{
				alert(‘ajax返回错误‘);
			}
		});  

		return{
			getPageInfo: function(){
				return defConfig;
			}
		}
	}

  

//调用

var pageFun = $(‘.div_page‘).jqueryPageFun({
  total: 20,
  onePageCount: 3,
  currentPage: 1,
  pageChangeFun: function(defConfig){
    //分页信息
    console.log(defConfig); 

    //ajax是否成功 return true为成功 return false失败
    return true;
  }
});

  

时间: 2024-10-12 12:51:51

ajax分页插件 支持自定义的相关文章

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

Ajax分页插件Pagination从前台jQuery到后端java总结

前端代码.html var pageSize = 10;//设置每页显示条数 var total;//数据总条数 function pagination() { $("#Pagination").pagination(total, { callback : PageCallback, prev_text : '上一页', next_text : '下一页', items_per_page : pageSize, num_display_entries : 4, //连续分页主体部分显示

jQuery Pagination Ajax分页插件

下载地址:https://github.com/gbirke/jquery_pagination 参数 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 可选参数,默认是10 num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10 current_page 当前选中的页面 可选参数,默认是0,表示第1页 num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0 li

PHP分页类,支持自定义样式,中间5页

<?php //namespace Component; /** * 2016-3-27 * @author ankang */ class Page { private $ShowPage; private $CountPage; private $Floorp; private $PageUrl; private $PageClass; private $CurClass; /** * @author ankang * @param number $CountNum 数据总数 * @para

Pagination jquery ajax 分页参考资料

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/ 个人博客参考 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目地址:http://plugins.jquery.com/project/pagination 版

MyBatis 分页插件 PageHelper(转)

如何使用分页插件 . 1. 引入分页插件 2. 配置拦截器插件 3. 如何在代码中使用 4. MyBatis 和 Spring 集成示例 5. Spring Boot 待定 使用方法 1. 引入分页插件 引入分页插件有下面2种方式,推荐使用 Maven 方式. 1). 引入 Jar 包 你可以从下面的地址中下载最新版本的 jar 包 https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper/pageh