我接觸Jquery的時間算比較晚的，主要是因爲工作中用的不多。後來轉到一個做金融業務的項目組，日常工作內容變成了寫網頁，才慢慢的開始熟悉jquery。剛開始的時候很傻很天真，以爲學了jquery就用不着js了，後來才發現，jquery的主要作用就是方便js訪問dom。所以，單純的瞭解jquery是沒有什麼實際用處的，同時掌握js才能做好一些開發工作。
剛剛講了，jquery就是要用來做訪問dom的活，所以，之前的js分頁的小例子可以改改了。
<html>
<head>
<title>jquery分頁</title>
</head>
<body>
<table id="dataTable" border="1">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</table>
<input type="button" id="previous" value="上一頁"/><input type="button" id="next" value="下一頁"/>
</body>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
//分頁數據
var data = [
{
name:"李淵",
age:60
}
,
{
name:"李世民",
age:40
}
,
{
name:"李建成",
age:42
}
];
var totalNum = data.length;
var pageSize = 1;
var pageNo = 1;
//計算總頁數
var totalPage = totalNum%pageSize==0?totalNum/pageSize:parseInt(totalNum/pageSize)+1;
var tableDom = $("#dataTable");
function changePage(pageNo){
//綁定函數前一定要先解除按鈕上一個綁定的觸發函數，因爲jquery是疊加綁定的，不會覆蓋上一次的函數
$("#previous").unbind();
$("#next").unbind();
$("#previous").click(function(){
changePage(pageNo-1);
});
$("#next").click(function(){
changePage(pageNo+1);
});
turnPage(pageNo);
}
function turnPage(pNo){
//這裏加入對頁碼的判斷，大於總頁數和小於0的頁碼，就是不合法的，直接返回。
if(pNo>totalPage||pNo<1){
return;
}
pageNo = pNo;//每次翻頁開始前，都要更新當前頁碼變量，pageNo
//翻頁第一步，清除表內數據，當然，表頭一定要保留
clearTable();
//翻頁第二步，計算新數據的在整個數據數據中的開始和結束下標
var beginPos = (pageNo-1)*pageSize;
var endPos = pageNo*pageSize;
//遍歷數據數組，組裝行對象
for(var i=beginPos;i<endPos;i++){
var rowStr = "<tr>";
rowStr += "<td>"+data[i].name+"</td>";
rowStr += "<td>"+data[i].age+"</td>";
rowStr += "</td>";
tableDom.append(rowStr);
}
}
function clearTable(){
tableDom.find("tr").not(":first").remove();
}
changePage(pageNo); //調用翻頁入口函數，開始填充表格，綁定下一頁上一頁觸發函數
});
</script>
</html>
怎麼樣，看起來要比js寫的要優雅一些吧，而且，如果想要添加其他的分頁特性，比如選擇多行，添加樣式，用jquery做起來就會感覺輕鬆很多。至於具體怎麼做，下次再見。