简单的分页页码编写

html:

        <div class = "TradingQuotes_TransactionRecords_Main_foot">
            <ul class ="Tb_PageNumber">
                <li><label title = "UpPage">&lt;上一页</label></li>
                <li><label title = "2">2</label></li>
                <li><label title = "3">3</label></li>
                <li><label title = "4">4</label></li>
                <li><label title = "5">5</label></li>
                <li><label title = "6">6</label></li>
                <li><label title = "DwPage">下一页&gt;</label></li>
            </ul>
        </div>

style:

.TradingQuotes_TransactionRecords_Main_foot .Tb_PageNumber
{
    width:480px;
    margin:auto;
    padding:auto;
}
.TradingQuotes_TransactionRecords_Main_foot .Tb_PageNumber li
{
    list-style:none;
    float:left;
    width:60px;
    height:22px;
    line-height:22px;
    border:1px solid #C0C0C0;
    text-align:center;
    font-family:微软雅黑;
    font-size:12px;
    color:#565757;
    margin-left:4px;
    background-color:White;
    }

Jquery:

   

    <script type ="text/javascript">
        $(function () {
            TradingQuotes_SYMBOLInfoInit();
            
        });
        //requestCalendar("", "chinese", "", "");


        //初始化加载事件
        function TradingQuotes_SYMBOLInfoInit() {
            $.post("../../handel/TradingQuotesInfoHandler.ashx", { "TradingType": "2" }, function (data) {
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr td").parent().remove();
                var item = eval(data);
                PageCountNumber = item.length % 15 == 0 ? item.length / 15 : parseInt(item.length / 15 + 1);
                
                var html = "";
                var infoLength = item.length > 15 ? 15 : item.length;
                for (var i = 0; i < infoLength; i++) {
                    html += "<tr><td><label>" + item[i].SYMBOL + "</label></td>" +
                        "<td><label>" + item[i].TIME + "</label></td>" +
                        "<td><label>" + item[i].ASK + "</label></td>" +
                        "<td><label>" + item[i].BID + "</label></td>" +
                        "<td><label>" + item[i].LOW + "</label></td>" +
                        "<td><label>" + item[i].HIGH + "</label></td>" +
                        "<td><label>" + item[i].DIRECTION + "</label></td></tr>";
                }
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb").append(html);
                var oddRowColor = "#DFF1F5";
                var evenRowColor = "#F2F2F2";
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr:odd td").css("background-color", oddRowColor);  //改变偶数行背景色
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr:even td").css("background-color", evenRowColor);  //改变偶数行背景色
                pageLoadInit();
                PageNumberLoad();
            });
            
        }


        //初始化加载事件
        function TradingQuotes_SYMBOLInfoInitByPageIndex() {
            $.post("../../handel/TradingQuotesInfoHandler.ashx", { "TradingType": "4", "PageIndexNumber": PageIndexNumber }, function (data) {
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr td").parent().remove();
                var item = eval(data);
                var html = "";
                var infoLength = item.length > 15 ? 15 : item.length;
                for (var i = 0; i < infoLength; i++) {
                    html += "<tr><td><label>" + item[i].SYMBOL + "</label></td>" +
                        "<td><label>" + item[i].TIME + "</label></td>" +
                        "<td><label>" + item[i].ASK + "</label></td>" +
                        "<td><label>" + item[i].BID + "</label></td>" +
                        "<td><label>" + item[i].LOW + "</label></td>" +
                        "<td><label>" + item[i].HIGH + "</label></td>" +
                        "<td><label>" + item[i].DIRECTION + "</label></td></tr>";
                }
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb").append(html);
                var oddRowColor = "#DFF1F5";
                var evenRowColor = "#F2F2F2";
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr:odd td").css("background-color", oddRowColor);  //改变偶数行背景色
                $(".TradingQuotes_SYMBOLInfo_Main_body_tb tr:even td").css("background-color", evenRowColor);  //改变偶数行背景色
            });


        }
















        var PageIndexNumber = 1; //当前页码
        var PageCountNumber = 1;








        //初始化页面页码
        function pageLoadInit() {
            if (PageCountNumber > 5) {
                $(".Tb_PageNumber li").each(function (i) {
                    var liTitleStr = $(this).find("label").attr("title");
                    if (liTitleStr != "UpPage" && liTitleStr != "DwPage") {
                        if (i == 1) {
                            $(this).css("background-color", "White").css("border", "0").css("color", "#333333");
                        }
                        $(this).find("label").text(i).attr("title", i);
                    }
                });
            } else {
                $(".TradingQuotes_TransactionRecords_Main_foot .Tb_PageNumber").css("width", PageCountNumber * 70);
                $(".Tb_PageNumber li").each(function (i) {
                    var liTitleStr = $(this).find("label").attr("title");
                    if (liTitleStr != "UpPage" && liTitleStr != "DwPage") {
                        if (i == 1) {
                            $(this).css("background-color", "White").css("border", "0").css("color", "#333333");
                        }


                        if (i <= PageCountNumber) {
                            $(this).find("label").text(i).attr("title", i);
                        } else {
                            $(this).hide();
                        }
                    } else {
                        $(this).hide();
                    }
                });
            }
        }






        function PageNumberLoad() {
            $(".Tb_PageNumber li").each(function () {
                $(this).mousemove(function () {
                    $(this).css("background-color", "#d4e8f7").css("cursor", "pointer");
                }).mouseout(function () {
                    $(this).css("background-color", "White");
                }).click(function () {
                    var liText = $(this).find("label").attr("title");
                    if (liText != "UpPage" && liText != "DwPage") {//点击中间页面
                        PageIndexNumber = parseInt(liText);
                        ShowPageNumberStyle();


                    } else if (liText == "UpPage") {//点击下一页
                        if (PageIndexNumber == 1) {
                            alert("已经是第一页~！");
                            return;
                        }
                        PageIndexNumber--;
                        ShowPageNumberStyle();


                    } else if (liText == "DwPage") {//点击上一页
                        if (PageIndexNumber == PageCountNumber) {
                            alert("已经是最后一页~！");
                            return;
                        }


                        PageIndexNumber++;
                        ShowPageNumberStyle();
                    }
                    TradingQuotes_SYMBOLInfoInitByPageIndex();
                });
            });
        }




        //从新显示页面
        function ShowPageNumberStyle() {
            //重置页码数字 //重新排版页面样式
            //            alert(PageIndexNumber);
            if (PageIndexNumber > 3) {
                $(".Tb_PageNumber li").each(function (i) {
                    var liTitleStr = $(this).find("label").attr("title");
                    if (liTitleStr != "UpPage" && liTitleStr != "DwPage") {
                        var lblIndex = 0; //获取当前页码数字
                        if (PageIndexNumber + 2 <= PageCountNumber) {
                            $(this).find("label").text(i + PageIndexNumber - 3).attr("title", i + PageIndexNumber - 3);
                            lblIndex = i + PageIndexNumber - 3;
                        } else {
                            var pagecount_t = 5;
                            if (PageCountNumber < 5) {
                                pagecount_t = PageCountNumber;
                            }
                            $(this).find("label").text(PageCountNumber - pagecount_t + i).attr("title", PageCountNumber - pagecount_t + i);
                            lblIndex = PageCountNumber - pagecount_t + i;
                        }
                        //设定样式
                        if (lblIndex == PageIndexNumber) {
                            $(this).css("background-color", "White").css("border", "0").css("color", "#333333");
                        } else {
                            $(this).css("background-color", "White").css("border", "1px solid #C0C0C0").css("color", "#565757");
                        }
                    }
                });
            } else {
            $(".Tb_PageNumber li").each(function (i) {
                var liTitleStr = $(this).find("label").attr("title");
                if (liTitleStr != "UpPage" && liTitleStr != "DwPage") {
                    $(this).find("label").text(i).attr("title", i);
                    //获取当前页码数字
                    var lblIndex = i;
                    if (lblIndex == PageIndexNumber) {
                        $(this).css("background-color", "White").css("border", "0").css("color", "#333333");
                    } else {
                        $(this).css("background-color", "White").css("border", "1px solid #C0C0C0").css("color", "#565757");
                    }
                }
            });
            }
        }


    </script>