实用的静态前端分页实例

#################################### CSS样式 ###################################

.simple-table{ border-collapse:collapse; width:100%;}
.simple-table th{ font-weight:normal; background:#f0f0f0; color:#000; height:29px; line-height:29px; white-space:nowrap; }
.simple-table td{text-align:center; height:28px; line-height:28px;color:#757575; line-height:20px;border-bottom:1px solid #f0f0f0; white-space:nowrap;}
.page{ padding:10px 5px; margin-top:5px; text-align:right; background:#fff; font-size:14px;  }
.page a{ color:#2754a2; text-decoration:none; text-align:center; display:inline-block; width:28px;border:1px solid #d2d0d0; border-right:0px; line-height:28px; font-family:Arial; font-size:14px; display:inline-block; vertical-align:middle;}
.page a.current{ color:#ff0000; border:0px;border-left:1px solid #d2d0d0;}
.page a.last{ border-right:1px solid #d2d0d0;}

 

###########################JavaScript脚本#################################

    <script type="text/javascript">
        var moreDataPageSize = 6;
        //资源列表前台分页
        function goFirst(aObj) {
            var divObj = $(aObj).closest("div").parent("div");
            var tbodyObj = $(divObj).find(".simple-table tbody");
            $(tbodyObj).find("tr").each(function(n) {
                if(n >= 0 && n < moreDataPageSize) {
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            $(divObj).find(".page").find("a.current").removeClass("current");
            $(divObj).find(".page").find("a").eq(2).addClass("current");
        }
        function goPrev(aObj) {
            var divObj = $(aObj).closest("div").parent("div");
            var forward = $(divObj).find(".page").find("a.current").attr("forward");
            forward = parseInt(forward);
            var tbodyObj = $(divObj).find(".simple-table tbody");
            if(forward != 1) {
                forward--;
                $(tbodyObj).find("tr").each(function(n) {
                    if(n >= moreDataPageSize*(forward-1) && n < moreDataPageSize*forward) {
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
                $(divObj).find(".page").find("a.current").removeClass("current").prev("a").addClass("current");
            }
        }
        function goPage(aObj) {
            var divObj = $(aObj).closest("div").parent("div");
            var forward = $(aObj).attr("forward");
            forward = parseInt(forward);
            var tbodyObj = $(divObj).find(".simple-table tbody");
            $(tbodyObj).find("tr").each(function(n) {
                if(n >= moreDataPageSize*(forward-1) && n < moreDataPageSize*forward) {
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            $(divObj).find(".page").find("a.current").removeClass("current");
            $(divObj).find(".page").find("a").eq(forward+1).addClass("current");
        }
        function goNext(aObj) {
            var divObj = $(aObj).closest("div").parent("div");
            var forward = $(divObj).find(".page").find("a.current").attr("forward");
            forward = parseInt(forward);
            var tbodyObj = $(divObj).find(".simple-table tbody");
            var length = $(tbodyObj).find("tr").length;
            if(forward != length/moreDataPageSize) {
                forward++;
                $(tbodyObj).find("tr").each(function(n) {
                    if(n >= moreDataPageSize*(forward-1) && n < moreDataPageSize*forward) {
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
                $(divObj).find(".page").find("a.current").removeClass("current").next("a").addClass("current");
            }
        }
        function goLast(aObj) {
            var divObj = $(aObj).closest("div").parent("div");
            var tbodyObj = $(divObj).find(".simple-table tbody");
            var length = $(tbodyObj).find("tr").length;
            var finalPageNum = length/moreDataPageSize;
            $(tbodyObj).find("tr").each(function(n) {
                if(n >= moreDataPageSize*(finalPageNum-1) && n < moreDataPageSize*finalPageNum) {
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            $(divObj).find(".page").find("a.current").removeClass("current");
            $(divObj).find(".page").find("a").eq(finalPageNum+1).addClass("current");
        }

        $(document).ready(function(){
            //更多列表空行及分页控件填充
            $(".simple-table").each(function() {
                var length = $(this).find("tbody tr").length;
                var tdLength = $(this).find("thead tr th").length;
                var tdHtml = "";
                for(var i=0; i<tdLength; i++) {
                    tdHtml += "<td></td>";
                }
                while(length%moreDataPageSize != 0) {
                    $(this).find("tbody").append("<tr>" + tdHtml + "</tr>");
                    length++;
                }
                var pagerHtml = "";
                for(var i= 0, j=length/moreDataPageSize; i<j; i++) {
                    pagerHtml += "<a href='javascript:;' οnclick='goPage(this);' forward='" + (i+1) + "'>" + (i+1) + "</a>";
                }
                $(this).closest("div").find(".page a").eq(1).after(pagerHtml);
                $(this).closest("div").find(".page a").eq(2).addClass("current");
                $(this).closest("div").find(".page a:first").trigger("click");
                //goFirst();
            });


            //社会关系更多
            $("#shgx").click(function() {
                $("#shgxList").find(".page a:first").trigger("click");
                art.dialog({
                    title: '社会关系_更多',
                    id: 'shgxList',
                    content: document.getElementById('shgxList'),
                    padding: 0,
                    width: 600,
                    height: 260
                });
            });
        });
    </script>

################################# 视图（JSP）页面 ##############################################

<div id="shgxList" style="display: none;">
    <table class="simple-table" style="width: 99%; table-layout: fixed; margin: 0 auto;">
        <thead>
        <tr>
            <th width="5%">序号</th>
            <th width="25%">关系</th>
            <th width="25%">姓名</th>
            <th width="44%">身份证号</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${personBaseDossier.shgx}" var="item" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${item.realation}</td>
                <td>${item.name}</td>
                <td>${item.idCard}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="page">
        <a href="javascript:;" οnclick="goFirst(this);"><<</a>
        <a href="javascript:;" οnclick="goPrev(this);">< </a>
        <a href="javascript:;" οnclick="goNext(this);">></a>
        <a href="javascript:;" οnclick="goLast(this);" class="last">>></a>
    </div>
</div>

　　

 

转载于:https://www.cnblogs.com/cst11021/p/5036373.html