前端小结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，页码数位置混乱。