jquery:使用按钮对table实现分页

mac2022-06-30  11

JS代码:

var pageSize = 10;//每页显示的记录条数 var curPage=0; var lastPage; var direct=0; var len; var page; $(document).ready(function(){         len =$("#table tr").length;        page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数,计算页数      //  alert("page==="+page);        curPage=1;        displayPage(1);//显示第一页        $("#btn1").click(function(){         curPage=1;         displayPage();     });        $("#btn2").click(function(){         direct=-1;         displayPage();     });        $("#btn3").click(function(){         direct=1;         displayPage();     });        $("#btn4").click(function(){         curPage=page;         displayPage();     }); });  function displayPage(){  if((curPage <=1 && direct==-1) || (curPage >= page && direct==1)){   direct=0;   alert("已经是第一页或者最后一页了");   return;  }  lastPage = curPage;  curPage = (curPage + direct + len) % len;     var begin=(curPage-1)*pageSize;//起始记录号     var end = begin + pageSize;  if(end > len ) end=len;     $("#table tr").hide();     $("#table tr").each(function(i){         if(i>=begin && i<end)//显示第page页的记录             $(this).show();     });

 }</script>

html代码:

<table id="table"> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息抓取1</td><td>航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布2</td><td>1航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布 3</td><td>2航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布 4</td><td>2航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布5</td><td>3航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布6</td><td>4航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布7</td><td>5航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布8</td><td>6航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布9</td><td>98</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布10</td><td>99</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息抓取11</td><td>航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布12</td><td>1航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布 13</td><td>2航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布14</td><td>3航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布15</td><td>100</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布16</td><td>4航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布17</td><td>5航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布18</td><td>6航班信息发布</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布19</td><td>98</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布20</td><td>99</td></tr> <tr><td><input type="checkbox" name="checkbox"/></td><td>航班信息发布21</td><td>100</td></tr></table><input type=button value="全选" onClick="checkAll()"><input type=button value="全不选" onClick="uncheckAll()"><input type=button value="反选" onClick="switchAll()"><input type=button id="btn1" value="首页" ><input type=button id="btn2" value="上一页"><input type=button id="btn3" value="下一页" ><input type=button id="btn4" value="尾页" >

转载于:https://www.cnblogs.com/lraa/archive/2012/11/22/2782984.html

最新回复(0)