转载：jquery对table实现分类并分页

转载网址：http://hankjin.blog.163.com/blog/static/3373193720091016103116132/

jquery，很好，很强大。
需求：若干条记录，要求可以分类，并可以针对每个分类进行分页

方案：
1. 将每个tr看做一条记录，对每个tr赋予一个class “所有分类”，这样就可以用$(".所有分类").hide()完成隐藏
2. 对每个tr再赋予一个class：该记录真正的分类“X分类”，这样就可以用$(".X分类").show()显示特定的分类
3. 在分类改变的时候，根据该分类的记录数，产生分页列表，并绑定分页事件
4. 点击分页列表的时候，调用displayPage函数进行分页
5. 首先根据页号计算起始和终止记录号，然后遍历记录列表，显示相应页

注意：
不能用$(".page").click绑定分页事件

TODO：
 当前显示页的页号仍然可以点击

源代码table.html
<script src="jquery.js"></script>
<script type="text/javascript">
var pageSize = 3;//每页显示的记录条数
$(document).ready(function(){    
    $("#selType").change(function(){
        var page=($("."+$("#selType").val()).length-1)/pageSize+1;//根据记录条数，计算页数
        var pageLabel=''
        for(i=1;i<=page;i++)
            pageLabel+="<a href='#' class='page' onclick='displayPage("+i+");'>"+i+"</a>&nbsp;&nbsp;";
        $("#pageLabel").html(pageLabel);//显示分页控制列表
        displayPage(1);//显示第一页
    })
    $("#selType").trigger('change');//页面载入时，触发分页事件
})
function displayPage(page){
    var begin=(page-1)*pageSize;//起始记录号
    var end=page*pageSize;//终止记录号
    $(".所有车间").hide();
    $("."+$("#selType").val()).each(function(i){
        if(i>=begin && i<end)//显示第page页的记录
            $(this).show();
    });
    return false;
}
</script>
<select id="selType">
<option id='allType'>所有车间</option>
<option>A车间</option>
<option>B车间</option>
</select>
<table>
<tr class="所有车间 A车间"><td>1</td></tr>
<tr class="所有车间 B车间"><td>2</td></tr>
<tr class="所有车间 A车间"><td>3</td></tr>
<tr class="所有车间 B车间"><td>4</td></tr>
<tr class="所有车间 C车间"><td>5</td></tr>
<tr class="所有车间 A车间"><td>6</td></tr>
<tr class="所有车间 A车间"><td>7</td></tr>
<tr class="所有车间 B车间"><td>8</td></tr>
<tr class="所有车间 A车间"><td>9</td></tr>
<tr class="所有车间 A车间"><td>10</td></tr>
<tr class="所有车间 B车间"><td>11</td></tr>
</table>
<div id="pageLabel"></div>