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>
標籤: javascript, Jquery
0 個意見:
張貼留言
訂閱 張貼留言 [Atom]
<< 首頁