js 页码分页的前端写法

 <script type="text/javascript">
       

        var curPage = 1;//当前页码
        var total;//总页数

        $(function () {
            loadPage(curPage)
        });
        function loadPage(page) {
            $.get("/API/News/GetByPage.ashx", { currentPage: page }, function (obj) {
                total = obj.TotalPage;

                var ul = $("#newsList").empty();
                $.each(obj.Info, function (i, e) {

                    var li = $('<li style="color:#494053"> <a href="/HtmlContainer/News/' + e.newsId + '.html">' + e.newsTitle + '</a>' +
                        '<span style="float:right;">' + formatDate(e.newsAddtime.replace('T', ' '), "yyyy-MM-dd") + '</span> </li>');
                    li.appendTo(ul);
                });

                pageBarChange(page);
            }, "json");
        }

        function pageBarChange(page) {

            var  frontSpac = 5,totalSpac=9;
            curPage = page;//parseInt($("#pageNum").val()) + 1;
            //$("#pageNum").val(curPage);
            var start = 1;
            if ((curPage - frontSpac) > 1 && (total - curPage) > frontSpac) {
                start = curPage - frontSpac;
            }
            else if (total - curPage <= frontSpac) {
                start = total - totalSpac;
            }


            var html = '<a href="#" onclick="prev()"> << </a>';
            for (var i = start; i <= start + totalSpac; i++) {
                if (i == curPage) {
                    html += '<a class="current">' + i + '</a>';
                    continue;
                }
                html += ' <a  class="pageNum" href="javascript:void(0)" relid=' + i + '>' + i + '</a>';

            }
            //加载最后一个按钮的情况
            if (total - curPage <= frontSpac) {
                var temp = (curPage + 1) > total ? total : (curPage + 1);
                html += ' <a class="pageNum" href="javascript:void(0)" relid=' + temp + '>  </a><a  onclick="next()" href="javascript:void(0)"> >> </a>';
            }
            else {
                html += '... <a  class="pageNum" href="javascript:void(0)" relid=' + total + '>' + total + '</a> <a  onclick="next()" href="javascript:void(0)"> >> </a>';
            }


            $("#pageBar").empty().append($(html));

            $("#pageBar .pageNum").bind("click", function () {
                var page1 = parseInt($(this).attr("relid"));
                loadPage(page1);
               // pageBarChange(page1);
            });

        }

        function prev() {
            if ((curPage - 1) <= 0) {
                return;
            }
            loadPage(--curPage);
           // pageBarChange(--curPage);
        }

        function next() {
            if ((curPage + 1) > 18) {
                return;
            }
            loadPage(++curPage);
           // pageBarChange(++curPage);
        }

    </script>

效果：

页码分页的前端写法