前端小结2--jQuery分页插件JPaginate的详细使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yhhyhhyhhyhh/article/details/77900406

前端小结2–jQuery分页插件JPaginate的详细使用

java web开发中，后台分页后，前端需要分页按钮来显示。

这里介绍几个好用的jQuery分页插件：http://www.jq22.com/jquery-info34

对前端搞的少，之前都是jsp，ajax实在是不习惯。

主要介绍一下JPAGINATE这个分页插件的详细使用。JPAGINATE插件链接：

https://tympanus.net/OldDemos/jPaginate/

http://www.jq22.com/jquery-info34

完整测试代码下载链接：
http://download.csdn.net/download/yhhyhhyhhyhh/9970760

1.使用步骤

1.1引入js，css

<link rel="stylesheet" type="text/css" href="css/style.css"
    media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>

1.2.在页面居中底部放置分页按钮

<style>
.footer {
    width: 100%;
    margin: 40%;
}
</style>
    ////////////////////////
<div class="footer">
<div id="getPageIndex"></div>
</div>

1.3根据div的id触发分页按钮响应，在响应中ajax提交分页参数：pageNum, pageSize（当前页码，每页信息条数）;

下面的第一个函数 $("#getPageIndex").paginate为jQuery分页插件的api，

第二个函数function postPageParams(pageNum, pageSize)为分页按钮触发时的，ajax异步请求。

${pageTotalNum}为服务端返回的总页码数。

<script type="text/javascript">
    var pageSize = 10;
    $(function() {
        $("#getPageIndex").paginate({
            count :  ${pageTotalNum},
            start : 1,
            display :5,
            border : false,
            text_color : '#79B5E3',
            background_color : 'none',
            text_hover_color : '#2573AF',
            background_hover_color : 'none',
            images : false,
            mouse : 'press',
            onChange : function(pageNum) {
                //alert("pageNum=" + pageNum);//输出的pageNum为页码
                postPageParams(pageNum, pageSize);
            }
        }); 
    });
    function postPageParams(pageNum, pageSize) {
        var obj = {};
        obj['pageNum'] = pageNum;
        obj['pageSize'] = pageSize;
        var htmlContent = "";
        $.ajax({
            url : "pageDisplay",
            type : "post",
            data : JSON.stringify(obj),
            dataType : "json",
            contentType : "application/json;charset=UTF-8",
            timeout: 10000,  
            error : function() {
                alert('请求超时，请稍候再试');
            },
            success : function(result) {
                $("#tb  tr:not(:first)").html("");
                for (var i = 0; i < result.length; i++) {
                    // alert(JSON.stringify(result[i].name));
                    // var dom = '<li><div class="num">'+result[i].name+'</div></li>';
                    htmlContent += "<tr style=‘text-align: center‘> "
                    htmlContent += "<td style=‘text-align: center‘>"
                            + result[i].eid + "</td>"
                    htmlContent += "</tr>"
                }
                $('#tb').append(htmlContent);

            }
        });
    }
</script>

2.效果图

ie下有bug，页码数位置混乱。