jquery 分页

Posted surfaces

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 分页相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
   

		<style>
		 *{ margin: 0 ;padding: 0;}
			ul,li{ list-style: none;}
			#tables{  width: 100%; height: auto;; overflow: hidden; margin-bottom: 40px;;}
			#tables li{list-style: none; width: 100px; height: 150px; overflow: hidden; border: 2px solid red;  float: left; display: inline;}
		   #tables li img{ width: 100px; float: left;}

        .fenye {
  height: 40px;
  line-height: 40px;
  position: relative; z-index: 88;;
  
  text-align: center;  
}
.fenye input {
  
 outline: 0;;
}
.fenye button {
  padding: 0 10px;
  margin: 0 10px;
  height: 40px;
  float: left; outline: 0;;
  cursor: pointer;
  border: 1px solid #ebebeb;
  background-color: #ffffff;
}
.fenye .prePage,.fenye .turnPage,.fenye .last-page,.fenye .jump-button{ background:#157fcc ; color: #fff;}


.fenye button:disabled{ 
background-color: #eee; 
}

.fenye .first-page,
.fenye .last-page {
  margin: 0;
}
.fenye .pageWrap {
  height: 38px;
  float: left;
  overflow: hidden;border: 1px solid #ebebeb;
}
.fenye .pageWrap ul {
  width: 100000px;
  height: 40px;
  float: left;list-style: none;  overflow: hidden;
}
.fenye .pageWrap ul li:first-of-type(1){
	 border-left: 1px solod #ebebeb;;
}
.fenye .pageWrap ul li:hover{
	 background-color: #eee;
}
.fenye .pageWrap ul li {list-style: none;
  width: 60px;
  height: 40px;
  border-right: 1px solid #ebebeb;
  line-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  float: left;
}
.fenye .pageWrap ul .sel-page {
  background-color: #157fcc; color: #fff;
}
.fenye .jump-text {
  width: 60px;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 5px;
  float: left;
}
.fenye .jump-button {
  margin: 0;
  float: left; position: relative; z-index: 89;;
}
.fenye .total-pages,
.fenye .total-count {
  margin-left: 10px;
  float: left;
  font-size: 14px;
}
.total-count{border: 1px solid #ebebeb;
    background-color: #ffffff; padding: 0 10px;}


		</style>
		
	</head>
	<body>
		
		<div id="tables">
			<li>11 动态数据</li>
		</div>
		
		<div class=" fenye" id="fenbox"></div>
   
		<div id="saa">重新初始化2</div>	
		<div style="padding: 10px;;">-----------------------------------</div>
		
		<div id="tables2">
			<li>22 动态数据</li>
		</div>
				<div class=" fenye" id="fenbox2"></div>

		
		
	<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">	</script>
	<script >
		
		(function($, window, document) {
    // 定义构造函数
    function Paging(el, options) {
        this.el = el;
        var defaults = {
            pageNo:  1, // 初始页码
            totalPages:  1, //总页数
            totalCount:  1, // 条目总数
            slideSpeed: 0, // 缓动速度
            jump:  false, // 支持跳转，
            first:true,
            callback:function() {} // 回调函数，
        };
        
       this.options = $.extend({},defaults,options)
        //console.log("最喜欢总",  this.options );
        
        this.init(this.el);
    }
    // 给实例对象添加公共属性和方法
    Paging.prototype = {
        constructor: Paging,
        init: function(ele) {
            this.createDom();
            this.bindEvents(ele);
        },
        createDom: function() {
            var that = this,
                ulDom = ‘‘,
                jumpDom = ‘‘,
                content = ‘‘,
                liWidth = 60, // li的宽度
                totalPages = that.options.totalPages||1, // 总页数
                wrapLength = 0;
                if(typeof totalPages!=‘number‘||typeof totalPages<=0){
                 	totalPages=1;
                }
               
               
                
            totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
            if(totalPages<=1){
               	ulDom += ‘<li class="sel-page">‘ + 1 + ‘</li>‘;
            }else{
            for (var i = 1; i <= that.options.totalPages; i++) {
            	  
                i != 1 ? ulDom += ‘<li>‘ + i + ‘</li>‘ : ulDom += ‘<li class="sel-page">‘ + i + ‘</li>‘;
            }
            }
            that.options.jump ? jumpDom = ‘<input type="text" placeholder="1" class="jump-text jumpText" ><button type="button" class="jump-button  jumpBtn">跳转</button>‘ : jumpDom = ‘‘;
            content = ‘<button type="button"  class="turnPage firstPage first-page">首页</button>‘ +
                ‘<button class="turnPage prePage" >上一页</button>‘ +
                ‘<div class="pageWrap" style="width:‘ + wrapLength + ‘px">‘ +
                ‘<ul class="pageSelect"   style="transition:all ‘ + that.options.slideSpeed + ‘ms">‘ +
                ulDom +
                ‘</ul></div>‘ +
                ‘<button class="turnPage nextPage" >下一页</button>‘ +
                ‘<button type="button"  class="last-page lastPage">尾页</button>‘ +
                jumpDom +
                ‘<p class="total-pages">共 ‘ +
                that.options.totalPages +
                ‘ 页</p>‘ +
                ‘<p class="total-count">‘ +
                that.options.totalCount +
                ‘</p>‘;
            that.el.html(content);
        },
        bindEvents: function(ele) {
        	 
        	
        	   var ele=ele;
            var that = this,
                pageSelect =ele.find(‘.pageSelect‘), // ul
                lis = pageSelect.children(), // li的集合
                liWidth = lis[0]?(lis[0].offsetWidth):0, // li的宽度
                totalPages = that.options.totalPages, // 总页数
                pageIndex = that.options.pageNo, // 当前选择的页码
                distance = 0, // ul移动距离
                prePage = ele.find(‘.prePage‘),
                nextPage = ele.find(‘.nextPage‘),
                firstPage = ele.find(‘.firstPage‘),
                lastPage = ele.find(‘.lastPage‘),
                jumpBtn = ele.find(‘.jumpBtn‘),
                jumpText =ele.find(‘.jumpText‘);
    // console.log(firstPage);
            prePage.on(‘click‘, function() {
                pageIndex--;
                	that.options.first=true;
                if (pageIndex < 1) pageIndex = 1;
                handles(pageIndex);
            })

            nextPage.on(‘click‘, function() {
                pageIndex++;
                	that.options.first=true;
                if (pageIndex > lis.length) pageIndex = lis.length;
                handles(pageIndex);
            })

            firstPage.on(‘click‘, function() {
                pageIndex = 1;
                	that.options.first=true;
                handles(pageIndex);
            })

            lastPage.on(‘click‘, function() {
                pageIndex = totalPages;
                	that.options.first=true;
                handles(pageIndex);
            })
           
          $(document).on("click", jumpBtn, function() {
           // jumpBtn.on(‘click‘, function() {
           
                var jumpNum = parseInt(jumpText.val().replace(/D/g, ‘‘));
                if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
                    pageIndex = jumpNum;
                    	that.options.first=true;
                    handles(pageIndex);
                    jumpText.val(jumpNum);
                }
            })
       //$(document).on("click", lis, function() {
            lis.on(‘click‘, function() {
              	that.options.first=true;
                pageIndex = $(this).index() + 1;
                 handles(pageIndex);
            })

            function handles(pageIndex) {
          //debugger;
                lis.removeClass(‘sel-page‘).eq(pageIndex - 1).addClass(‘sel-page‘);
                
               
                if(totalPages<=1){
              
                firstPage.attr(‘disabled‘, true);
                prePage.attr(‘disabled‘, true);
                nextPage.attr(‘disabled‘, true);
                lastPage.attr(‘disabled‘, true) ;
                jumpBtn.attr(‘disabled‘, true) ;
                jumpText.attr(‘disabled‘, true) ;
                    if(that.options.first){
                that.options.callback(pageIndex);
                }
                    return false;
                }
                
                
                if (totalPages <= 5) {
                    if(that.options.first){
                that.options.callback(pageIndex);
                }
                   // console.log("222totalPages",totalPages)
                    return false;
                }
                if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
                if (pageIndex == 2 || pageIndex == 1) distance = 0;
                if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
                pageSelect.css(‘transform‘, ‘translateX(‘ + (-distance) + ‘px)‘);
                pageIndex == 1 ? firstPage.attr(‘disabled‘, true) : firstPage.attr(‘disabled‘, false);
                pageIndex == 1 ? prePage.attr(‘disabled‘, true) : prePage.attr(‘disabled‘, false);
                pageIndex == totalPages ? lastPage.attr(‘disabled‘, true) : lastPage.attr(‘disabled‘, false);
                pageIndex == totalPages ? nextPage.attr(‘disabled‘, true) : nextPage.attr(‘disabled‘, false);
                  
                 if(that.options.first){
                that.options.callback(pageIndex);
                }
            }
           //if(that.options.first){
            handles(that.options.pageNo); // 初始化页码位置
            //}
            
        }
    }
    $.fn.paging = function(options) {
    //	console.log($(this));
        return new Paging($(this), options);
    }
})(jQuery, window, document);
		
	</script>
     <script>
     	
     	//http://layer.layui.com/
		$(document).ready(function(){
           var tables=$("#tables");
           var page=1;
           //ajaxDATA(1)
             function ajaxDATA(page){
             var urls="http://mktm.biqiang8.com/home/goods?firstCid=0&secCid=0&pageNo="+page+"&pageSize=5&exsitIdList="

              $.ajax({
               type: "GET",
               url: urls,
                dataType: "json",
               
             success: function(data){
                       if(data.code==0){
                       	var htmlStr="";
                       	//console.log(data.goods_list);
                       	for(var i=0;i<data.data.goods_list.length;i++){
                       		htmlStr+=‘<li>‘+i+data.data.goods_list[i].title+‘<img src="‘+data.data.goods_list[i].img_url+‘"</li>‘
                       	}
                      $("#tables").html(htmlStr);
                       }
                       
                  }
            });
             }
         
         
          var setTotalCount = 301;
         var fenyeObj={
            initPageNo: 1, // 初始页码
            totalPages: 1, //总页数
            totalCount: ‘合计‘ + 0 + ‘条数据‘, // 条目总数
            slideSpeed: 600, // 缓动速度。单位毫秒
            jump: true, //是否支持跳转
             first:false,  //初始化 是否立即执行回掉
            callback: function(page) { // 回调函数
                console.log("立11即查询",page);
                  ajaxDATA(page)
            }
        }
           
       
        $(‘#fenbox‘).paging(fenyeObj)
        
        $("#saa").on("click",function(){
               	setTotalCount = 71;
        	      fenyeObj.totalCount = ‘合计‘ + setTotalCount + ‘条数据‘, // 条目总数;
        	      fenyeObj.totalPages=24;
        	      fenyeObj.first=false;
        	      //console.log("立重置即查询",fenyeObj);
        	     $(‘#fenbox‘).paging(fenyeObj)
        })
        
        
        
        
        
          var setTotalCount2 = 31;
         var fenyeObj2={
            initPageNo: 1, // 初始页码
            totalPages: 20, //总页数
            totalCount: ‘合计‘ + setTotalCount2 + ‘条数据‘, // 条目总数
            slideSpeed: 600, // 缓动速度。单位毫秒
            jump: true, //是否支持跳转
            // first:false,
            callback: function(page) { // 回调函数
                console.log("立即22查询",page);
                  ajaxDATA(page)
            }
        }
           
       
        $(‘#fenbox2‘).paging(fenyeObj2)
        
             
 });
	</script>
	</body>
</html>

　

 

下拉框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>信息查询</title>
        <meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

    </head>
    <body>
        
        
        
<style>
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;}
body{font-family:"微软雅黑",‘Helvetica Neue‘,Helvetica,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;font-size:14px;-webkit-touch-callout:none;}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
dl,li,menu,ol,ul{list-style:none}
address,em,i,th{font-weight:400;font-style:normal}
a{color:#999;display:block;}
a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
a:hover{cursor:pointer}
a:active,a:focus{outline:0;}
img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
input,select{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;}
button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
::-webkit-input-placeholder{color:#777;}
::input-placeholder{color:#777;}
input:focus::-webkit-input-placeholder{-webkit-transition:.2s;opacity:0;}
input:focus::input-placeholder{transition:.2s;opacity:0;}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.fl{float:left}
.fr{float:right}
.fl,.fr{display:inline}
.disabled{pointer-events:none;}
.hover{ }
.hover:hover{ cursor: pointer;}        
    
/*    业务css*/
.my_form{ background: #fafafa;
    border: 1px solid #e0e0e0;
    margin-top: 20px; padding: 21px; m }

.my_form .my_form_content{ width: 100%; }
.form_content_submit{ margin: 20px auto; display: block; font-size: 16px; text-align: center;  width: 120px;; height: 44px; line-height: 44px;background: #157fcc; color: #fff; border: 0;;}




.my_form_table{ border: 1px solid #e0e0e0; }
    .flexbox{display:-webkit-box;
display:-moz-box;
display:box;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flexbox;
display:flex;
display:table9;
}
.flexbox .flex1{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
display:table-cell9;
}


.selected_icon{ position: relative; width: 100%; height: 100%;}
.selected_icon .check{ position:absolute;background: #157fcc;}
.selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; width: 16px; height: 1px; }
.selected_icon .check.reduce{left: 50%;top: 50%;; margin-top: -8px;; position:absolute;width: 1px; height: 16px; }
.showone.on .check{background: red !important;}
.showone.on .check.reduce{  -webkit-transform:translateY(50%);-moz-transform:translateY(50%);transform:translateY(50%); opacity: 0; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;;}
.showone{ position: relative;;border-bottom: 1px solid #e0e0e0 ;}
.hideone{ background: #fff; margin:20px 44px;;border: 1px solid #ccc ;}
.hideoneinner { position: relative;; height:44px; line-height: 44px; text-align: center; border-bottom: 1px solid #e0e0e0;}
.hideoneinner div { height:44px; line-height: 44px;border-right: 1px solid #e0e0e0; }
.showone.on:after{position: absolute;
    content: "";
    height: 1px; width: 22px;
    background:#e0e0e0;
    left: 22px; top: 65px;
    z-index: 26;}
 .showone.on:before{ position: absolute;
    content: "";
    height: 22px; width:1px;
    background:#e0e0e0;
    left: 22px; top: 44px;
    z-index: 26;}

.hideoneinner div:last-child{ border-right:0; }
.hideoneinner div:first-child{  font-weight: bold; }
.hideoneinner:last-of-type{  border-bottom: 0;}  
.my_form_table .showone:hover{ background:#f5f5f5 ;}


.filter-disabled {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.filter-box {
    position: relative; z-index: 92;;
}

.filter-box select {
    display: none;
}

.filter-text {
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    padding: 0 30px 0 10px;
    background: #fff;
    border: 1px solid #e6e6e6;
}

.filter-text input {
    font-size: 14px;
}

.filter-text .filter-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    border: 0;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    cursor: pointer;
}

.filter-list {
    display: none;
    width: 100%; z-index: 99;
    max-height: 300px;
    background-color: #fff;
    font-size: 14px;
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 99;
    border: 1px solid #e6e6e6;
    overflow: auto;
}

.filter-list li.filter-null a {
    color: #d2d2d2;
}

.filter-list li a {
    display: block;
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.filter-list li:hover {
    background-color: #f2f2f2;
}

.filter-list li.filter-selected {
    background-color: #5FB878;
}

.filter-list li.filter-selected a{
    display: block;
    color: #fff;
}

.filter-list li.filter-disabled {
    background-color: #fff;
}

.filter-list li.filter-disabled a{
    display: block;
    color: #d2d2d2;
}

.filter-list li.filter-disabled:hover a {
    cursor: not-allowed!important;
    background-color: #fff;
}

.icon {
    position: absolute;
}

.icon-filter-arrow {
     width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:8px;
    border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color:#999 transparent transparent transparent;
    right: 10px;
    top: 13px;
    transition: all .2s;
}

.icon-filter-arrow.filter-show {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.filter-list::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.filter-list::-webkit-scrollbar-track {
    background: #fff 
}

.filter-list::-webkit-scrollbar-thumb {
    background: #CBCBCB;
}



#j_searchtask{  background: #666; padding: 10px 20px;}
</style>

        
            <div>  
    
                      <!-- 这里开始 -->
            
            <div class="filter-box filter-box1 fl">
                <div class="filter-text">
                    <input class="filter-title" id="j_qudao"  data-val="" type="text" readonly placeholder="请选择渠道" />
                    <i class="icon icon-filter-arrow"></i>
                </div>
                <select name="filter">
                    <option value="new"  disabled>请选择渠道</option>
                    <option value="11渠道1" >渠道1</option>
                    
                    <option value="22渠道2">渠道2</option>
                    <option value="33渠道3">渠道3</option>
                    
                </select>
            </div>
            
            <!-- 这里结束 -->
                      <!-- 这里开始 -->
            
            <div class="filter-box  filter-box2 fl">
                <div class="filter-text">
                    <input class="filter-title" id="j_qudao2"  data-val="" type="text" readonly placeholder="请选择支付" />
                    <i class="icon icon-filter-arrow"></i>
                </div>
                <select name="filter">
                    <option value="new"  disabled>请选类型</option>
                    <option value="淘宝1" >淘宝</option>
                    
                    <option value="支付宝2">支付宝</option>
                    
                </select>
            </div>
            
            <!-- 这里结束 -->
                      
                      
                      
                   <div class="right fr" class="flex1" id="j_searchtask">查询结果</div>     
                   

        </div>  

    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">    </script>
    
    <script type="text/javascript" src="selectFilter.js"></script>
        <script type="text/javascript">
            //本小插件支持移动端哦
            
            
        </script>

     <script>
        $(document).ready(function(){
                  
               //下拉组件
            $(‘.filter-box1‘).selectFilter({
                callBack : function (val){
                    //返回选择的值
                    //document.getElementById("j_qudao").setAttribute("data-val",val)
                    console.log(val+‘-是返回的值‘)
                }
            });
                   //下拉组件
            $(‘.filter-box2‘).selectFilter({
                callBack : function (val){
                    //返回选择的值
                    //document.getElementById("j_qudao").setAttribute("data-val",val)
                    console.log(val+‘-是返回的值‘)
                }
            });  
                  
                  
                      
                      //查询点击
                      $("#j_searchtask").on("click",function(){
                          var qudao_val=$("#j_qudao").attr("data-val");//渠道
                            var qudao_val2=$("#j_qudao2").attr("data-val");//渠道
                                 alert("值-----："+qudao_val);
                                      alert("值-----："+qudao_val2);
                            
                          });
                             
                           
                          
                   
 });
    </script>
  
    </body>
</html>

 

　

以上是关于jquery 分页的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

片段被视图分页器布局切割

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）