jq寫分頁

html分頁部分：

<div class="pagecount" id="pagecount">
  <ul>
    <li id="firstPage"></li>
    <li id="prevPage"></li>
    <li><input type="text" value="1" id="jumpPage" /></li>
    <li id="nextPage"></li>
    <li id="lastPage"></li>
    <li>
       <select id="pageSize" onchange="jumPer()">
         <option value="15"></option>
       </select>
    </li>
  </ul>
</div>
複製程式碼

js部分：

//實現分頁
var curPage = 1,
    count = '@ViewData["count"]', //後臺給的總資料條數
    pageSize = $("#pageSize option:selected").text(), //每頁顯示數
    jumpPage = parseInt($("#jumpPage").val()), //跳轉到第幾頁
    totalPage = parseInt((parseInt(count) + parseInt(pageSize) - 1) / parseInt(pageSize)); //總頁數
//首頁
$("#firstPage").on('click',function() {
  curPage = jumpPage = parseInt($("#jumpPage").val());
  if (curPage == 1) {
     alert("已經是第一頁");
   } else {
     $("#jumpPage").val(1);
    pageInterFace(1, pageSize)
   }
})
//尾頁
$("#lastPage").on('click',function() {
  if (parseInt($("#jumpPage").val()) == totalPage) {
      alert("已經是第一頁");
   } else {
     $("#jumpPage").val(totalPage)
     pageSize = parseInt($("#pageSize option:selected").text()), //每頁顯示數
     jumpPage = parseInt($("#jumpPage").val());
     pageInterFace(totalPage, pageSize)
   }
})
//輸入框跳轉頁面
$("#jumpPage").bind('keydown',function(e) {
  if (e.keyCode == "13") {
     jumpPage = parseInt($("#jumpPage").val());
     if (jumpPage <= totalPage) {
         pageInterFace(jumpPage, pageSize)
       } else {
          alert("您輸入的頁碼為負數或者超出了總頁數" + "總頁數為"+ totalPage);
          return false;
        }
    }
})
//下拉框改變每頁顯示條數
function jumpPer() {
  pageSize = $("#pageSize option:selected").text()
  jumpPage = parseInt($("#jumpPage").val());
  pageInterFace(jumpPage,pageSize)
}
//上一頁
$("#prevPage").on('click',function () {
  jumpPage = parseInt(("#jumpPage").val())
  if (curPage <= 1) {
     alert("已經是第一頁")
     } else {
       curPage--;
       pageInterFace(jumpPage, pageSize);
       $("#jumpPage").val(curPage)
     }
})
//下一頁
$("#nextPage").on('click',function () {
  jumpPage = parseInt($("#jumpPage").val());
  if (curPage >= totalPage) {
     alert("已經是最後一頁")
 } else {
   curPage++;
    pageInterFace(curPage, pageSize)
    $("#jumpPage").val(curPage)  //跳轉也設定為當前頁
  }
})複製程式碼