ajax+JS实现分页

由于我这个功能比较特殊，会不停的请求数据库，所以用的是ajax分页，请求的时候会把当前的页数存到cookie里，刷新的时候把页数+1或-1传到后台。这里我用的分割页数是6，分为页首、页中和页末。
先上效果图：
//页码在开头

//页码在中间

//页码在末尾

在这里，我实现的效果是，不管在哪一页，它前后都会有2-3个页码，多余的用…代替，并且…不可点，当在页首或页尾的时候，<<和>>是不可点的。

<script type="text/javascript">    $(function () {        funcTest();    });    window.setInterval(function () {        var cook = localStorage.getItem('key');        funcTest(cook,function () {            localStorage.clear();        });    }, 5000);    function funcTest(page) {        if (page) {            var url = '/index/nrfstate/home?page=' + page;        } else {            var url = '/index/nrfstate/home';        }        $.get(url, function (date) {            var startPage = date.list.current_page;            localStorage.setItem('key', startPage);            var msg = '';            $.each(date.list.data, function (i, vo) {                msg += '<tr>' +                    '<td>' + vo.nftype + '</td>' +                    '<td>' + vo.nfid + '</td>' +                    '<td>' + vo.nstate + '</td>' +                    '<td>' + vo.proctime + '</td>' +                    '</tr>';            });            var htm = '';            if (date.list.last_page > 1) {                htm += '<span class="total-num">' +                    '共' + date.count + '条数据' +                    '</span>' + gogo(date.list.last_page, date.list.current_page);            } else {                htm += '<span class="total-num">' +                    '共' + date.count + '条数据' +                    '</span>';            }            $('tbody').html(msg);            $('.text-right').html(htm);        });    }    function gogo(total, current) {        var content = "";        content += '<ul class="pagination">';        //总页数大于6时候        if (total > 6) {            //页码在开头            if (current <= 6) {                if (current == 1) {                    content += '<li class="disabled"><span><<</span></li>';                } else {                    content += '<li><a href="javascript:;" onclick="callPage(this,' + current + ')"><<</a></li>';                }                for (var i = 1; i <= 6 + 2; i++) {                    if (current == i) {                        content += "<li class='active'><span>" + i + "</span></li>";                    } else {                        content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + i + "</a></li>";                    }                }                content += "<li class='disabled'><span>...</span></li>";                content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + (total - 1) + "</a></li>";                content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + total + "</a></li>";            } else {                //判断页码在末尾的时候                if (current >= total - 6) {                    content += '<li><a href="javascript:;" onclick="callPage(this,' + current + ')"><<</a></li>';                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>1</a></li>";                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>2</a></li>";                    content += "<li class='disabled'><span>...</span></li>";                    for (var i = current - 3; i <= total; i++) {                        if (current == i) {                            content += "<li class='active'><span>" + i + "</span></li>";                        } else {                            content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + i + "</a></li>";                        }                    }                    //页码在中间部分时候                } else {                    content += '<li><a href="javascript:;" onclick="callPage(this,' + current + ')"><<</a></li>';                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>1</a></li>";                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>2</a></li>";                    content += "<li class='disabled'><span>...</span></li>";                    for (var i = current - 3; i <= current + 3; i++) {                        if (current == i) {                            content += "<li class='active'><span>" + i + "</span></li>";                        } else {                            content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + i + "</a></li>";                        }                    }                    content += "<li class='disabled'><span>...</span></li>";                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + (total - 1) + "</a></li>";                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + total + "</a></li>";                }            }        } else {            if (current == 1) {                content += '<li class="disabled"><span><<</span></li>';            } else {                content += '<li><a href="javascript:;" onclick="callPage(this,' + current + ')"><<</a></li>';            }            for (var i = 1; i <= total; i++) {                if (current == i) {                    content += "<li class='active'><span>" + i + "</span></li>";                } else {                    content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>" + i + "</a></li>";                }            }        }        if (current == total) {            content += "<li class='disabled'><a>>></a></li>";        } else {            content += "<li><a href='javascript:;' onclick='callPage(this," + current + ")'>>></a></li>";        }        content += "</ul>";        return content;    }    function callPage(item, current) {        var text = $(item).text();        if (text == '<<') {            funcTest(current - 1)        } else if (text == '>>') {            funcTest(current + 1)        } else {            funcTest(text)        }    }</script>

页面一加载的时候，传给后台的是0，后台查询出来的页数就是1，其中gogo(date.list.last_page, date.list.current_page)里两个参数是后台传过来的。分别为总页数、当前页。
由于是不停的加载刷新，所以用

$(‘.text-right’).html(htm);
替换掉以前的内容即可。

    希望对你有所帮助！！