zoukankan      html  css  js  c++  java
  • jq分页插件,支持动态,静态分页的插件,简单易用。

    工作中经常要用到分页功能。为了方便封装了一个比较通用的分页插件开源出来了,简单易用。

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

    下载地址:https://github.com/cwlch/ChPaging

    详细教程:https://cwlch.github.io/ChPaging/example/guida.html

    示列:

    功能介绍:

    1、支持静态(写死的数据、假分页)、动态分页(Ajax动态请求数据); 
    2、使用功能可安需求选择:首尾页、上下页、显示条数选择器、总页数展示、快速跳转; 
    3、他没有自带样式,开发者可以完全自定义样式; 
    4、简单(使用简单、代码简单);

    使用方法:

    第一步

    将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>//分页容器节点
    

    1、动态分页,使用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] ...);
                }
            }
        })
    

    2、静态分页。(数据缓存在前端,不需要每次点击分页请求数据,也就是常说的假分页)

    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] ...);
                }
            }
        })
    

    希望对大家能有所帮助,欢迎留言讨论。

    谢谢!

  • 相关阅读:
    「USACO 2020 US Open Platinum」Exercise
    Equilateral Triangles
    [USACO 2020 February Platinum]Help Yourself
    「ICPC World Finals 2019」美丽的桥梁
    「ICPC World Finals 2019 何以伊名始
    COCI20162017 Contest#6 F
    COCI2016/2017 Contest#3 F Meksikanac
    TopCoder SRM 570 Div1 CurvyonRails
    COCI2016-2017 Contest#2 F
    UOJ Round Good Bye JiHai D. 新年的追逐战
  • 原文地址:https://www.cnblogs.com/hrw3c/p/7538027.html
Copyright © 2011-2022 走看看