JQ 페이징 플러그인 공유

페이징 기능은 업무상 자주 사용되는 기능입니다. 편의를 위해 보다 일반적인 페이징 플러그인이 캡슐화되어 있으며 사용하기 쉽습니다. 목록:

기능 소개:

1. 페이징), 동적 페이징(Ajax 동적 요청 데이터) 2. 필요에 따라 선택하는 기능을 사용하세요: 홈 및 마지막 페이지, 상단 및 하단 페이지, 표시 번호 선택기, 전체 페이지 번호 표시, 빠른 점프 3. 자체 스타일이 없습니다.

4. 단순함(사용하기 쉽고 간단한 코드)

1단계

페이지에 jquery 및 ChPaging 라이브러리를 도입합니다.

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

두 번째 단계

ChPaging 인스턴스를 생성하고 인스턴스 연관 목록 표시를 동작시킵니다.

페이징 컨테이너 노드를 생성해야 합니다.

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

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

위 내용은 JQ 페이징 플러그인 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!