分页实现
来源：互联网 发布：使命召唤10优化好吗 编辑：程序博客网 时间：2024/06/14 23:31
效果图如下：
功能实现：
1：首先，所有数据全部加载，通过display属性是否显示某一行；
2：其次，
需要获取表格中所有行数（num）;
每页显示多少条数据（psize）,我设置的是每页10条，可自定义哟；
获取总页数（totalPage）;
代码如下：
<!DOCTYPE html><head> <meta charset='utf-8'> <style type="text/css"> #idData,#barcon{width:800px;margin:0px auto} #idData {color: #333;text-align: center;border: 1px solid #afd9ee;margin:100px auto 20px} #idData>tbody>tr:hover{background:#afd9ee;color:#fff} #idData td{padding:10px 12px;text-align: center} a{text-decoration: none;margin-left:5px;padding:6px 12px;border:1px solid #ddd;} .disabled{color:#fff;border:1px solid #c1c1c1;background: #c1c1c1;cursor: default} .link{color:#2e91da; border:1px solid #2e91da;background: #fff;} #barcon{text-align: center} </style></head><body onLoad="goPage(1,10);"><table id="idData"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Location</th> </tr> </thead> <tbody> <tr><td>Lisa</td><td>25</td><td>女</td><td>上海</td></tr> <tr><td>Kevin</td><td>26</td><td>男</td><td>山西</td></tr> <tr><td>Sandra</td><td>27</td><td>女</td><td>河南</td></tr> <tr><td>Katherine</td><td>26</td><td>女</td><td>上海</td></tr> <tr><td>Harry</td><td>28</td><td>男</td><td>陕西</td></tr> <tr><td>Charlotter</td><td>29</td><td>女</td><td>江西</td></tr> <tr><td>Daisy</td><td>23</td><td>女</td><td>浙江</td></tr> <tr><td>Angelia</td><td>21</td><td>女</td><td>北京</td></tr> <tr><td>Jack</td><td>26</td><td>男</td><td>河北</td></tr> <tr><td>Damon</td><td>27</td><td>男</td><td>天津</td></tr> <tr><td>Kalinda</td><td>23</td><td>女</td><td>山东</td></tr> <tr><td>Jimmy</td><td>25</td><td>男</td><td>安徽</td></tr> <tr><td>Felix</td><td>23</td><td>男</td><td>江苏</td></tr> <tr><td>Ailene</td><td>25</td><td>女</td><td>湖北</td></tr> <tr><td>Angelia</td><td>21</td><td>女</td><td>北京</td></tr> <tr><td>Jack</td><td>26</td><td>男</td><td>河北</td></tr> <tr><td>Damon</td><td>27</td><td>男</td><td>天津</td></tr> <tr><td>Kalinda</td><td>23</td><td>女</td><td>山东</td></tr> <tr><td>Jimmy</td><td>25</td><td>男</td><td>安徽</td></tr> <tr><td>Felix</td><td>23</td><td>男</td><td>江苏</td></tr> <tr><td>Ailene</td><td>25</td><td>女</td><td>湖北</td></tr> <tr><td>Lisa</td><td>25</td><td>女</td><td>上海</td></tr> <tr><td>Kevin</td><td>26</td><td>男</td><td>山西</td></tr> <tr><td>Sandra</td><td>27</td><td>女</td><td>河南</td></tr> <tr><td>Katherine</td><td>26</td><td>女</td><td>上海</td></tr> <tr><td>Harry</td><td>28</td><td>男</td><td>陕西</td></tr> <tr><td>Charlotter</td><td>29</td><td>女</td><td>江西</td></tr> <tr><td>Daisy</td><td>23</td><td>女</td><td>浙江</td></tr> <tr><td>Angelia</td><td>21</td><td>女</td><td>北京</td></tr> <tr><td>Kalinda</td><td>23</td><td>女</td><td>山东</td></tr> <tr><td>Jimmy</td><td>25</td><td>男</td><td>安徽</td></tr> <tr><td>Felix</td><td>23</td><td>男</td><td>江苏</td></tr> <tr><td>Ailene</td><td>25</td><td>女</td><td>湖北</td></tr> <tr><td>Angelia</td><td>21</td><td>女</td><td>北京</td></tr> <tr><td>Jack</td><td>26</td><td>男</td><td>河北</td></tr> <tr><td>Damon</td><td>27</td><td>男</td><td>天津</td></tr> <tr><td>Kalinda</td><td>23</td><td>女</td><td>山东</td></tr> <tr><td>Jimmy</td><td>25</td><td>男</td><td>安徽</td></tr> <tr><td>Felix</td><td>23</td><td>男</td><td>江苏</td></tr> <tr><td>Harry</td><td>28</td><td>男</td><td>陕西</td></tr> <tr><td>Charlotter</td><td>29</td><td>女</td><td>江西</td></tr> <tr><td>Daisy</td><td>23</td><td>女</td><td>浙江</td></tr> <tr><td>Angelia</td><td>21</td><td>女</td><td>北京</td></tr> <tr><td>Kalinda</td><td>23</td><td>女</td><td>山东</td></tr> </tbody></table><div id="barcon" name="barcon"></div><script src="js/jquery-1.11.3.js"></script><script> /** * 分页函数 * pno--页数 * psize--每页显示多少条数据 * totalPage--总页数 * 分页原理首先数据行全部加载，通过是否显示属性完成分页功能 **/ function goPage(pno,psize){ var itable = $("#idData"); var num = itable.find('tbody tr').length;//表格所有行数(所有数据) console.log(num); var totalPage = 0;//总页数 var pageSize = psize;//每页显示行数（每页显示多少条数据） //总页数 console.log(num/pageSize);//如果num=44,pageSize=10,则为4.4 console.log(parseInt(num/pageSize));//如果num=44,pageSize=10,则为4 if(num/pageSize > parseInt(num/pageSize)){ totalPage=parseInt(num/pageSize)+1; }else{ totalPage=parseInt(num/pageSize); } var currentPage = pno;//当前页数 //console.log(currentPage+'当前页'+pageSize+'每页显示多少');---1 ，10 var startRow = (currentPage - 1) * pageSize+1;//从第几行开始显示 console.log(startRow+'起始行');1 var endRow = currentPage * pageSize;//从第几行结束 console.log(endRow+'结束行');---10 endRow = (endRow > num)? num : endRow; console.log('结束行'+endRow+'总行数'+num);//44 //遍历显示数据实现分页 for(var i=1;i<(num+1);i++){ var irow = itable.find('tbody tr')[i-1]; if(i>=startRow && i<=endRow){ irow.style.display='table-row'; }else{ irow.style.display='none'; } } var tempStr ='<span>共'+num+'条记录 分'+totalPage+'页 当前第'+currentPage+'页</span>'; if(currentPage>1){ tempStr += "<a class='link' href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>"; tempStr += "<a class='link' href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>" }else{ tempStr += "<a class='disabled' href='javascript:;'>首页</a>"; tempStr += "<a class='disabled' href='javascript:;'><上一页</a>"; } if(currentPage<totalPage){ tempStr += "<a class='link' href='javascript:;' onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>"; tempStr += "<a class='link' href='javascript:;' onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>"; }else{ tempStr += "<a class='disabled' href='javascript:;'>下一页></a>"; tempStr += "<a class='disabled' href='javascript:;'>尾页</a>"; } $("#barcon").html(tempStr); }</script></body></html> 阅读全文
0 0
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 实现分页
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- ibatis 分页 实现 (物理分页)
- mybatis分页插件实现分页
- 个性化的分页实现
- 分页的实现
- JSP分页技术实现
- JSP分页技术实现
- 实现分页打印功能：
- Spring AOP实现后台管理系统日志管理
- tp3.2 接口跨域问题
- nginx报403错误(13:Permission denied)
- POJ
- 关于android keystore的一些问题
- 分页实现
- 【clone()和new()区别】
- DOS 命令学习笔记
- 我的makefile第一个文件
- 常用postgresql命令
- Codeforces 343D Water Tree【思维+Dfs序+线段树】好题！
- (lintcode)第18题 带重复元素的子集
- 「python」对象的属性
- MTK智能机写号说明
