现在的位置: 首页 > 综合 > 正文

使用JQUERY对表格进行分页

2013年07月27日 ⁄ 综合 ⁄ 共 6634字 ⁄ 字号 评论关闭

如果你的数据量很少,可以考虑一下这个分页方案,纯客户端分页,用JQ完成,如果数据量不大,完全可以使用这个,废话少说,上代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQ</title>
<style>
*{ text-decoration:none;}
tbody td{ height:22px; width:600px;}
.show{ display:block;}
.hide{ display:none;}
.currentpage{ border:solid #FF0000 1px;}
tfoot{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
tfoot span{ display:block; float:left; margin:3px; padding:3px;}
tfoot span A{ display:block;   border:solid #CCCCCC 1px; margin:0 2px; float:left; padding:2px 4px;font-weight:800; color:#000000;}
tfoot span A:hover{ border:solid #f93 1px; color:#FF0000; background: #eee;}
</style>
<script language="javascript" src="jquery.js"></script>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <thead>
    <tr>
      <td height="18" align="center" bgcolor="#FFFFFF">分页测试</td>
    </tr>
  </thead>
  <tbody id="pagelist">
    <tr class="show">
      <td bgcolor="#FFFFFF">这是行1</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行2</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行3</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行4</td>
    </tr >
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行5</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行6</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行7</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行8</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行9</td>
    </tr>
    <tr  class="show">
      <td bgcolor="#FFFFFF">这是行10</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行11</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行12</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行13</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行14</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行15</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行16</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行17</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行18</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行19</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行20</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行21</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行22</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行23</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行24</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行25</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行26</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行27</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行28</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行29</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行30</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行31</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行32</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行33</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行34</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行35</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行36</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行37</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行38</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行39</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行40</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行41</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行42</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行43</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行44</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行45</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行46</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行47</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行48</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行49</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行50</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行51</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行52</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行53</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行54</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行55</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行56</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行57</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行58</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行59</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行60</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行61</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行62</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行63</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行64</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行65</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行66</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行67</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行68</td>
    </tr >
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行69</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行70</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行71</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行72</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行73</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行74</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行75</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行76</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行77</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行78</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行79</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行80</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行81</td>
    </tr >
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行82</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行83</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行84</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行85</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行86</td>
    </tr>
    <tr  class="hide">
      <td bgcolor="#FFFFFF">这是行87</td>
    </tr>
    <tr  class="hide">
      <td bgcolor=

抱歉!评论已关闭.