ajax实现分页带有省略号

jefft1 2013-11-11 05:22:14

我在用ajax来对取出来的数据进行分页时候我已经实现了分页，可是我如何实现在刚开始的时候只显示3也当前数据，如图所示：

；当我显示的数据大于3的时候前后都有省略号，如图：

；当到最后三页的时候有这样的效果，如图：

下面是我写的代码：



$(".page").live('click', function () {

    var choose = $("#choose").val();

    var glbt = $("#glbt").val();

    var fbrq = $("#fbrq").val();

    getPagesData($(this).attr("pns"), choose, glbt, fbrq);

});



$("#buts").live('click', function () {

    var choose = $("#choose").val();

    var glbt = $("#glbt").val();

    var fbrq = $("#fbrq").val();

    var fenyes = $("#fenyes").val();

    getPagesData(fenyes, choose, glbt, fbrq);

});



$(".button5").live('click', function () {

    getPagesData(1);

});



function getPagesData(pns, choose, glbt, fbrq) {

    $.post("magazineGonglue", {pageNumbers: pns, choose: choose, glbt: glbt, fbrq: fbrq}, function (data) {

        var html = $("#tbodys");

//        alert(data['pagenumber']);

        var currentPageNumber = data['pagenumbers'];

        html.empty();

        $.each(data.data, function (name, value) {

            var glbt;

            var glgs;

            var mc = "视频";

            var gid = value['GID'];

            var gs = value['GS'];

            var bt = value['BT'];

            var spdz = value['SPDZ'];

            glbt = bt.substring(0, 13);

            glgs = gs.substring(0, 18);

            var opt = $("<tr></tr>").appendTo(html);

            opt.addClass("even");

            if ($.trim(data) == "1") {

                opt.append("<td style='display: none'>" + "<a name='gid'>"+ gid +"</a>"+ "</td>" +

                    "<td style='text-align: center;'>" + "<span class='show douwo' gid = " + gid + "  style='text-decoration: none;  cursor: pointer'" + "title='" + bt + "'>" + glbt + "</span>" + "</td>" +

                    "<td style='text-align: center;'>" + value['JDMC'] + "</td>" +

                    "<td style='text-align: center'" + "title='" + gs + "'>" + glgs + "</td>" +

                    "<td style='text-align: center;'>" + "<a style='text-decoration: none'" + "title='" + mc + "' href=http://" + spdz + " target='_blank'>" + "<img src='/cy/images/header1/video.png'>" + "</a>" + "</td>"

                );



            } else {

                opt.append("<td style='display: none'>" + "<input type='hidden' value='" + gid + "' name='gid'>" + "</td>" +

                    "<td style='text-align: center;'>" + "<span class='show douwo' gid = " + gid + " style='text-decoration: none;  cursor: pointer'" + "title='" + bt + "'>" + glbt + "</span>" + "</td>" +

                    "<td style='text-align: center;'>" + value['JDMC'] + "</td>" +

                    "<td style='text-align: center'" + "title='" + gs + "'>" + glgs + "</td>" +

                    "<td style='text-align: center;'>" + "<a style='text-decoration: none'" + "title='" + mc + "' href=http://" + spdz + " target='_blank'>" + "<img src='/cy/images/header1/video.png'>" + "</a>" + "</td>");

            }

        });

        $(function () {

            $("#tbodys .douwo").click(function () {

                var $this = $(this);

                var gid = $this.attr("gid");

                $.post("gonglue", {gid: gid}, function (data) {

                    var html = $("#gl_conts");

                    html.empty();

                    $.each(data.data, function (name, value) {

                        var opt = $("<span><span>").appendTo(html);

                        opt.append("<span>" + value['ZW'] + "</span>");

                    });

                });

                $("#gl_cont").show();

                $("#gonglue").hide();

            });

        });



        //分页

        var d;

        var c;

        var b;

        var e;

        var f;

        var ellipsis="...";

        var fys = $("#fenyes").val();

        var pagesize = 10;

        var count = data.count;

        var pagecount = Math.ceil(count / pagesize);

        var pagenumber = data.pagenumber;

        var page = $("#pages").empty();

        if (currentPageNumber == 1) {

            b = $("<span class='prevPage'>上一页</span>");

        } else if (currentPageNumber > 1) {

            b = $("<a href='javascript:;' id='previous' class='prevPages page' pns='" + (currentPageNumber - 1) + "'>上一页</a>");

        }

        page.append(b);

        for (var i = 1; i <= pagecount; i++) {

            var a;

            if (i == currentPageNumber) {

                a = $("<span class='nums'></span>");

                a.text(i).attr("pns", i).attr("class", "nums");

            } else {

                a = $("<a href='javascript:;' class='page'></a> ")

                a.text(i).attr("pns", i);

            }

            page.append(a);

        }

        if (currentPageNumber < pagecount) {

            c = $("<a href='javascript:;'  class='nextPage page' pns='" + (currentPageNumber * 1 + 1) + "'>下一页</a>");

        } else if (currentPageNumber == pagecount) {

            c = $("<span class='nextPages'>下一页</span>");

        }

        page.append(c);

        d = $("<a> 共</a>");

        page.append(d);

        f = pagecount;

        page.append(f);

        e = $("<a>页 到第<input class='tian' id='fenyes' type='text'/>页<input class='buts' id='buts' type='button' value='确定'/></a>");

        if (fys < 1) {

            currentPageNumber = 1;

        } else if (fys > pagecount) {

            currentPageNumber = pagecount;

        }

        page.append(e);

    });

}