zoukankan      html  css  js  c++  java
  • 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;
      }
    });
    

      

  • 相关阅读:
    ASP.NET MVC之从控制器传递数据到视图四种方式
    MVC发布到IIS,出现HTTP 错误 404.0
    超详细MySQL安装及基本使用教程
    node.js中使用node-xlsx插件生成excel数据并导出
    jquery给一组radio赋值和取值
    node.js生成excel下载各种方法分析对比--附excel-export方法
    JS中substr和substring的区别
    jq触发a标签的href跳转
    jq中跳出方法、for循环和each循环
    IIS应用程序池频繁崩溃的问题
  • 原文地址:https://www.cnblogs.com/heqhbk/p/4576929.html
Copyright © 2011-2022 走看看