分页插件pagination的使用

　　页面传过去的是这个页面的第几页和显示的数据条数,在后台进行数据的查询,然后进行返回,数据在前台显示后,就会调用分页插件进行分页的显示,每次分页查询都会将tbody清空,然后插入新的数据,这样就完成了分页的查询

前台页面:

           //发送ajax请求进行分页查询
            function displayData(pageNo){
                /* //设置全选和取消全选的checkbox的checked状态为未选中
                $("#checkOrCancelAll").attr("checked",false); */
                
                var pageSize = $("#pageSize").val();
                $.ajax({
                    url:"${pageContext.request.contextPath}/work/getByPage.action",
                    data:{
                        "pageNo":pageNo+1,
                        "pageSize":pageSize
                    },
                    type:"GET",
                    cache:false,//解决get请求页面缓存问题,另一种方式是使用时间戳
                    beforeSend:function(){
                        $("#message").text("正在进行分页查询请稍候...");
                        return true;
                    },
                    success:function(jsonObject){
                        //清空tbody
                        $("#roleInfoTBody").empty();
                        
                        //{"total":100,"dataList":[{"id":"","code":"","name":"","remark":""},{},{},{}]}
                        if(jsonObject.total==0){
                            $("#message").text("没有符合条件的记录");
                        }else{
                            $("#message").text("查询结果如下:");
                            
                            var htmlString = "";
                            //对分页查询的数据进行遍历  并拼接html字符串
                            $.each(jsonObject.dataList,function(i,n){
                                htmlString +="<tr>";
                                htmlString +="<td><input type='checkbox' value='"+n.id+"' name='id' onclick='controlFirstCheckbox();'/></td>";
                                htmlString +="<td>"+(i+1)+"</td>";
                                htmlString +="<td>"+n.code+"</td>";
                                htmlString +="<td>"+n.name+"</td>";
                                htmlString +="<td>&nbsp; "+n.remark+"</td>";
                                htmlString +="</tr>";
                            });
                            //将拼接好的字符串  追到TBody中
                            $("#roleInfoTBody").append(htmlString);
                        }
                        
                        //集成jquery的pagination 完成翻页
                        $("#pagination").pagination(jsonObject.total, {//总记录条数
                             callback: displayData,//每次在翻页都会执行的回调函数   会传递参数 参数表示页码 (正常显示的页码-1)
                             items_per_page:pageSize, // 每页显示多少条记录
                             current_page:pageNo,//当前页码
                             link_to:"javascript:void(0)",//只保留超链接的样式,执行js代码,但是不跳转到任何资源
                             num_display_entries:10,//如果页码多的话,默认显示多少个页码
                             next_text:"下一页",
                                prev_text:"上一页",
                                next_show_always:true,//没有下一页的时候,按钮是否存在
                                prev_show_always:true,//没有上一页的时候,按钮是否存在
                                num_edge_entries:2,//页码多的时候用...省略
                                ellipse_text:"..."//指定省略符号
                         });
                        //总记录条数
                        $("#total").text(jsonObject.total);
                        
                        //总页数
                        var pageCount = jsonObject.total%pageSize==0 ? jsonObject.total/pageSize:parseInt(jsonObject.total/pageSize)+1;
                        $("#pageCount").text(pageCount);
                    }
                });
            }

前台显示pageFoot.jsp页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<table width="100%" height="30" border="0" cellpadding="0"
    cellspacing="0" class="page_table">
    <tr>
        <td width="8%" class="font_left">
            数据:<span id="total"></span> 条
        </td>
        <td width="12" class="font_left">
            第
        </td>
        <td width="375" class="font_left">
            <input id="pageNo" type="text" size="2" maxlength="4"/>
            /<span id="pageCount"></span> 页
            <input type="image" border="0"  src="images/go.gif" onclick="displayData($('#pageNo').val()-1)" />
            <select id="pageSize" onchange="displayData(0)">
                <c:forTokens items="${initParam.pageSizeString}" delims="," var="pageSize">
                    <option value="${pageSize}">每页${pageSize}条</option>                                                                        
                </c:forTokens>
            </select>
        </td>
        <td width="478" class="font_right">
            <div id="pagination"></div>
            &nbsp;
            <input type="image" class="font_right"
                onclick="displayData(0)"
                src="images/botton_page_refresh.png"
                border="0" />
        </td>
    </tr>
</table>

使用前台页面展示的方式:

                <tr>
                      <td>
                      <%@include file="/common/pageFoot.jsp"%>
                      </td>
                </tr>
                </table>

补充:下面是需要的css样式和js文件

　　　<link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/table.css" rel="stylesheet" type="text/css"/>
        <link href="jquery/pagination/pagination.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery/pagination/jquery.pagination.js"></script>
        <script type="text/javascript" src="js/JsUtil.js"></script>