jquery分页

    jquery.page.js分页

    jquery带有一个分页的插件jquery.page.js，使用这个可以实现分页功能。

    引用jquery.js，jquery.page.js等

    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <!--jquery 分页核心库-->
    <script src="js/jquery/jquery.page.js"></script>

    html中首先创建一个div，负责数据展现和展现按钮。

            <!--列表 开始 -->
            <div id="newshow" class="noticeminheight"></div>
            <!--列表结束  -->
            <!-- 分页开始 -->
            <div class="pageDiv"></div>    

     然后是js部分，首先实现接收json数据的函数，它负责和后台交互获取json数据（简单的ajax）

     

/**
 * 通过参数查询專家列表
 * @param page
 */
function showExperts(page,dName,dpinyin){
    //showMask("数据加载中，请稍后");//加载遮罩,注意引js、css文件
    page = page == undefined ? 1 : page;
    dName = dName == undefined ? "" : dName;
    dpinyin = dpinyin == undefined ? "" : dpinyin;
    var date = new Date();
    
    $.ajax({
        type : "Get",// 请求方法的类型为get
        url :  "data/JSONData.json",// 请求地址
        dataType : "json",// 返回数据类型
        success : function(result) {// 成功时触发方法
            newsContentshow(result);//展示專家列表
        },
        complete: function(msg) {
            loadDonghua();
            displayMask();//遮罩结束
        }
    });
}

     对获取的数据进行处理，并且展现到前台，调用函数newsContentshow(result)

/**
 * 显示專家信息
 *
 * @param result
 */
function newsContentshow(result) {
    var html = "";
    var data = result.items;
    $("#newshow").empty();//先进行清空
    var url = rootpath + singleClickUrl;//详情链接页面
    if(data == null || data == "" ){
        html = '<div class="zanwu">暂无专家数据！</div>'
        $("#newshow").append(html);//空数据
        return;
    }
    if(data != null){
        $.each(data,function(i,item){
            var id = item.id;
            var name =  item.name;//专家姓名
            var hospitalName = item.hospitalName;//医院名称
            hospitalName = hospitalName == null ? "" : hospitalName;
            var titleName = item.titleName;//职称
            titleName = titleName == null ? "" : titleName;
            var imgUrl = item.imgUrl;//头像地址
            imgUrl = imgUrl == null ? "" :imgUrl;
            var decription = item.decription;//描述
            decription = decription == null ? "" : decription;
            var noticecontenturl = url + "?id=" + id;

            html += '<div class="listimg">' +
                '<dl>' +
                    '<dt>' +
                        '<a href="'+ noticecontenturl +'">' +
                            '<img src="/images/yuan.png" width="100" height="101" class="png" alt="">' +
                            '<img src=' + imgUrl + ' alt="">' +
                            '<p><strong>'+ name +'</strong><br><span>'+ hospitalName +'</span><br><span>'+ titleName +'</span></p>' +
                        '</a>' +
                    '</dt>' +
                '<dl>' +
                '<dd>'+ decription + '</dd><dl></dl>' +
                '<div class="summarys" style="top: 280px;">' +
                '<p><a href="'+ noticecontenturl +'">查看详情> ></a></p></div>' +
                '</div>';
        });
    }
    $("#newshow").append(html);//加载数据
    loadPage(result.totalpage,result.currentpage);//分页
}

    最后就是就是绑定下方页码的按钮事件loadPage（）方法，这个部分用到了jquery.page.js，可以看下源码（这个插件主要是创建下侧的按钮，提供创建页码绑定页码的点击事件）。

//设置分页
function loadPage(pageCount,current){
    //createPage方法是由jquery.page.js提供负责创建下方的按钮
    $(".pageDiv").createPage({
        pageCount:pageCount,//总页数
        current:current,//当前页
        turndown:'true',//是否显示跳转框，显示为true，不现实为false,一定记得加上引号...
        backFn:function(p){
            showExperts(p);//分页查询
        }
    });
}

    基本上使用以上的就可以实现分页功能，demo中给的别的方法，有的是项目中的初始化或者查询时使用，有的是负责数据加载时的遮罩，还有的是为了兼容性，可以忽略。（注意demo中的json是本地的json包，实际项目这个json包是后台发送的）

    下载demo