2014年1月12日 星期日

javascript 換頁bar

<script type="text/javascript">
//2014/01/11

//nowPage 現在頁數
//totalitem 總共有幾筆資料
//pageShow 一頁要show幾筆資料
function pageList(nowPage, totalitem, pageShow) {

    var pagesPerGroup = 6;   // pages to be display in one bar
    var pageStr = "";

    var notPageCss = "style='border: 1px solid #C0C0C0; width: 20px; height: 30px; text-align:center;font-family:Microsoft YaHei; color:#555555; font-size:14px; cursor: pointer;'";
    var thisPageCss = "style='border: 1px solid #C0C0C0; width: 20px; height: 30px; text-align:center;font-family:Microsoft YaHei; color:#FFFFFF; font-size:14px; cursor: pointer; background-color: #888888;'";
    //debugger;

    if (totalitem / pageShow < pagesPerGroup) {
        if (totalitem % pageShow == 0) {
            pagesPerGroup = totalitem / pageShow;
        }

        else {
            pagesPerGroup = totalitem / pageShow + 1;
        }
    }

    pageStr += "<table style='margin: auto;'>";
    pageStr += "<tr>";

    if (nowPage != 1) {
        pageStr += "<td style=' width:50px;border: 1px solid #C0C0C0; height: 30px; text-align:center;font-family:Microsoft YaHei; color:#555555; font-size:14px; cursor: pointer;' onclick=\"ChangePage(" + (parseInt(nowPage) - 1) + ", " + totalitem + ", " + pageShow + ");\">上一頁</td>";
    }

    for (var i = 1; i <= pagesPerGroup; i++) {
        var changePage;

        if (nowPage <= 3) {
            if (i == nowPage) {
                pageStr += "<td id='page" + i + "' onclick='ChangePage(" + i + ", " + totalitem + ", " + pageShow + ");' " + thisPageCss + ">" + i + "</td>";
            }
            else {
                pageStr += "<td id='page" + i + "' onclick='ChangePage(" + i + ", " + totalitem + ", " + pageShow + ");' " + notPageCss + ">" + i + "</td>";
            }
        }

        else if (nowPage >= totalitem / pageShow - 2) {

            changePage = Math.floor(totalitem / pageShow - pagesPerGroup + i);

            if (changePage == nowPage) {
                pageStr += "<td id='page" + changePage + "' onclick='ChangePage(" + changePage + ", " + totalitem + ", " + pageShow + ");' " + thisPageCss + ">" + changePage + "</td>";
            }
            else {
                pageStr += "<td id='page" + changePage + "' onclick='ChangePage(" + changePage + ", " + totalitem + ", " + pageShow + ");' " + notPageCss + ">" + changePage + "</td>";
            }
        }

        else {

            changePage = (i + parseInt(nowPage) - 3);

            if (changePage == nowPage) {
                pageStr += "<td id='page" + changePage + "' onclick='ChangePage(" + changePage + ", " + totalitem + ", " + pageShow + ");' " + thisPageCss + ">" + changePage + "</td>";
            }
            else {
                pageStr += "<td id='page" + changePage + "' onclick='ChangePage(" + changePage + ", " + totalitem + ", " + pageShow + ");' " + notPageCss + ">" + changePage + "</td>";
            }
        }

    } //for

    if(nowPage != Math.ceil(totalitem / pageShow)){
        pageStr += "<td style=' width:50px;border: 1px solid #C0C0C0; height: 30px; text-align:center;font-family:Microsoft YaHei; color:#555555; font-size:14px; cursor: pointer;' onclick=\"ChangePage(" + (parseInt(nowPage) + 1) + ", " + totalitem + ", " + pageShow + ");\">下一頁</td>";
    }

    pageStr += "</tr>";
    pageStr += "</table>";


    $("#pager1").html(pageStr);
}
</script>


<script type="text/javascript">
$(function () {

    nowPage = 1;   //nowPage 現在頁數
    totalitem = 150;   //totalitem 總共有幾筆資料
    pageShow = 10;   //pageShow 一頁要show幾筆資料

    ChangePage(nowPage, totalitem, pageShow);

         
});

var nowPage;
var totalitem;
var pageShow;

//換頁
function ChangePage(nowPage, totalitem, pageShow) {
    pageList(nowPage, totalitem, pageShow);

    //alert(nowPage);
}

</script>

標籤: ,

0 個意見:

張貼留言

訂閱 張貼留言 [Atom]

<< 首頁