简单易用的分页插件,支持动态

作者:计算机知识

做事中时常要用到分页效用。为了便于包装了3个比较通用的分页插件开源出来了,简单易用。

jq分页插件,支持动态,静态分页的插件,轻易易用。,jq分页

职业中时常要用到分页成效。为了有利于包装了三个相比通用的分页插件开源出来了,轻便易用。

官网:

下载地址:

详尽教程:

示列:

图片 1

效益介绍:

壹、协理静态(写死的多寡、假分页)、动态分页(Ajax动态请求数据); 
简单易用的分页插件,支持动态。贰、使用效用可安供给接纳:首尾页、上下页、显示条数接纳器、总页数展示、火速跳转; 
3、他从没自带样式,开荒者能够完全自定义样式; 
肆、轻松(使用简易、代码不难);

运用方法:

第一步

将jquery和ChPaging库引进到页面中

 <script src="jquery.js"></script >
 <script src="ChPaging.1.0.1.min.js"></script >

第二步

创办三个ChPaging实例,并操作实例关联列表体现。总得创造贰个分页容器节点。

//html
<ul id="list"></ul>//与分页关联的列表节点
<div id="pagingId"></div>//分页容器节点

一、动态分页,使用ajax请求即时数据

var paging = new ChPaging($("pagingId"),{
        xhr : {//与jq的ajax方法属性值相似。不同点:不能设置success回调
            url : '服务端请求接口地址'
            data : {请求参数}
            ...
        },
        xhrSuccess : function(data){//ajax中的success回调
            return {data : data.lsit, count : data.count}
        }
        reloadPage : function(msg,data){
            //msg 返回属性
            //data 当前分页数据,数组。
            for(var i = 0; i < data.length; i  ){
                $("#list").append(... data[i] ...);
            }
        }
    })

二、静态分页。(数据缓存在前端,无需每一回点击分页请求数据,也等于常说的假分页)

var data = ["文章1","文章2","文章3","文章4","文章5","文章6"]
    var paging = new x
        data : data,
        limit : 2,
        reloadPage : function(msg,data){
            //msg 返回属性
            //data 当前分页数据,数组。
            for(var i = 0; i < data.length; i  ){
                $("#list").append(... data[i] ...);
            }
        }
    })

 

期望对大家能具备帮助,接待留言研商。

谢谢!

职业中平时要用到分页成效。为了便于包装了一个相比较通用的分页插件开源...

该分页插件使用简易,体量小,合作bootstrap使用,请先引进bootstrap。
使用办法如下:  

官网:https://cwlch.github.io/ChPaging

在页面上插入

<nav aria-label="Page navigation">
    <ul class="pagination">
    </ul>
</nav>

下载地址:

调用方法

$(".pagination").initPagination('formId',20,{
    pageNum: 1,
    pageSize: 10
});

详见教程:

参数表达

initPagination(formId,pages,option)  

  • formId:表单id
  • pages:总页数
  • pageNum:当前页数
  • pageSize:每页数量

效用如下:

图片 2

 

 

代码如下:

  1 /**
  2  * 分页插件
  3  * @author zhanyd@sina.com
  4  * @date 2018/02/01
  5  * @version 1.0
  6  */
  7 (function($){    
  8     $.fn.extend({
  9         //初始化
 10         initPagination : function(formId,pages,option){
 11             
 12             var defaults = {
 13                     pageNum: 1,      //起始页
 14                     pageSize: 10,    //每页数
 15                     leftPageNum: 3,  //左边页数
 16                     middleNum: 10,   //中间页数
 17                     rightPageNum : 3 //右边页数
 18              };
 19              var settings = $.extend(defaults, option);
 20                 
 21             $(this).empty();
 22             $(this).append(
 23                     ' <li><a href="#" onclick="$.fn.prePage(''   formId   '','   settings.pageNum   ','   settings.pageSize   ','   pages   ')">&laquo;</a></li>'
 24             );
 25             
 26             //初始化页数
 27             for(var i = 1; i <= pages; i  ){
 28                 //当前页是第一页时
 29                 if(settings.pageNum == 1){
 30                     //settings.leftPageNum   1处后面加...
 31                     if(i == (settings.leftPageNum   1) && settings.leftPageNum   settings.rightPageNum <= pages){
 32                         $(this).append('<li><a href="#">...</a></li>');
 33                         
 34                         //...一直加到最后一页往前推settings.rightPageNum页
 35                         i = pages - settings.rightPageNum;
 36                         continue;
 37                     }
 38                 }
 39                 //当前页小于中间页数时
 40                 else if(settings.pageNum < settings.middleNum){
 41                     //settings.middleNum   1处后面加...
 42                     if(i == (settings.middleNum   1) && settings.middleNum   settings.rightPageNum <= pages){
 43                         $(this).append('<li><a href="#">...</a></li>');
 44                         
 45                         //...一直加到最后一页往前推settings.rightPageNum页
 46                         i = pages - settings.rightPageNum;
 47                         continue;
 48                     }
 49                 }
 50                 else{
 51                     //settings.leftPageNum   1处后面加...
 52                     if(i == (settings.leftPageNum   1) && settings.leftPageNum   settings.rightPageNum <= pages){
 53                         $(this).append('<li><a href="#">...</a></li>');
 54                         
 55                         //...一直加到当前页前面settings.middleNum/2处
 56                         i = settings.pageNum - settings.middleNum/2;
 57                         continue;
 58                     }
 59                     
 60                     //当前页后面settings.middleNum/2处加...
 61                     if(i == (settings.pageNum   settings.middleNum/2) && (settings.pageNum   settings.middleNum/2   settings.rightPageNum) <= pages){
 62                         $(this).append('<li><a href="#">...</a></li>');
 63                         
 64                         //...一直加到最后一页往前推settings.rightPageNum页
 65                         i = pages - settings.rightPageNum;
 66                         continue;
 67                     }
 68                 }
 69                 
 70                 //当前页高亮
 71                 if(i == settings.pageNum){
 72                     $(this).append(
 73                             '<li class="active"><a href="#" onclick="$.fn.searchData(''   formId   '','   i   ','   settings.pageSize   ')">'   i   '</a></li>'
 74                     );
 75                 }else{
 76                     $(this).append(
 77                             '<li><a href="#" onclick="$.fn.searchData(''   formId   '','   i   ','   settings.pageSize   ')">'   i   '</a></li>'
 78                     );
 79                 }
 80                 
 81             }
 82             $(this).append(
 83                     ' <li><a href="#" onclick="$.fn.nextPage(''   formId   '','   settings.pageNum   ','   settings.pageSize   ','   pages   ')">&raquo;</a></li>'
 84             );
 85             
 86             
 87         },
 88         //上一页
 89         prePage : function(formId,pageNum,pageSize,pages){
 90             if(pageNum == 1){
 91                 pageNum = pages;
 92             }else{
 93                 pageNum--;
 94             }
 95             $.fn.searchData(formId,pageNum,pageSize);
 96         },
 97         
 98         //下一页
 99         nextPage : function(formId,pageNum,pageSize,pages){
100             if(pageNum == pages){
101                 pageNum = 1;
102             }else{
103                 pageNum  ;
104             }
105             $.fn.searchData(formId,pageNum,pageSize);
106         },
107         
108         //提交表单
109         searchData : function(formId,pageNum,pageSize){
110             $("#pageNum").val(pageNum);
111             $("#pageSize").val(pageSize);
112             $("#"   formId).submit();
113         }
114     });
115 }(jQuery));

 

示列:

图片 3

功用介绍:

壹、匡助静态(写死的多少、假分页)、动态分页(Ajax动态请求数据); 
二、使用效益可安要求选取:首尾页、上下页、展现条数选拔器、总页数显示、快捷跳转; 
3、他从没自带样式,开垦者可以完全自定义样式; 
4、简单(使用简便、代码轻便);

本文由bwin必赢发布,转载请注明来源

关键词: 565net亚洲必嬴 插件 分页