zoukankan      html  css  js  c++  java
  • 假分页

        之前不知道何为假分页,直到昨天遇到这样一个问题:跨域请求后返回一个数据集,想把这些数据做分页处理,但没有sql语句,故查资料发现有假分页。所谓假分页就是一次性从数据库里查询出所有数据,然后控制自己想要显示的效果,而不像真分页那样每页显示的数据都从数据库里读。我是用js控制的:这里贴个小例子

    <!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=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
        <table   border="1" cellpadding="0" cellspacing="0" bordercolor="#e4e4e4" style="border-collapse:collapse;"align="center" width="720">
                            <Tr STYLE="background: #F8F8F8;">    
                                <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易日期</strong></Td>
                                <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易时间</strong></Td>
                                <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易类型</strong></Td>
                                <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易状态</strong></Td>
                                <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>商户名称</strong></Td>
                                <Td width="120" align="center" height="25" class="bd_bottom"><strong>交易金额</strong></Td>
                            </Tr> 
                            <Tr>    
                                <Td align="center" colspan="6">
                                <table border="0" id="www_zzjs_net" cellspacing="0" bordercolor="#e4e4e4" style="border-collapse:collapse;"align="center" width="720">
                            
                           <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">1</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                            <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">2</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                            <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">3</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                            <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">4</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                            <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">5</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                            <Tr>    
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">6</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">321</Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">332></Td>
                                <Td  width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td>
                                <Td width="120" align="center" height="25" class="bd_bottom">32132</Td>
                            </Tr>
                           
                               </table>
    
                                </Td>
                                
          </Tr>
                           
                                    
                        </table>
                        <div id="changpage">
                        </div>
    
    <script language="javascript">
    var obj,j;
    var page=0;
    var nowPage=0;//当前页
    var listNum=2;//每页显示<ul>数
    var PagesLen;//总页数
    var PageNum=4;//分页链接接数(5个)
    onload=function(){
    obj=document.getElementById("www_zzjs_net").getElementsByTagName("Tr");
    j=obj.length
    PagesLen=Math.ceil(j/listNum);
    upPage(0)
    }
    function upPage(p){
    nowPage=p
    //内容变换
    for (var i=0;i<j;i++){
    obj[i].style.display="none"
    }
    for (var i=p*listNum;i<(p+1)*listNum;i++){
    if(obj[i])obj[i].style.display="block"
    }
    strS='<a href="###" onclick="upPage(0)" style="display:block; 35px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; margin-right:5px; text-align:center; line-height:18px; text-decoration:none; color:#888;">首页</a>  '
    var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
    var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
    var strC="",startPage,endPage;
    if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
    else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
    else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
    for (var i=startPage;i<=endPage;i++){
     if (i==nowPage)strC+='<a style="color:red; font-weight:700; isplay:block; 18px; height:18px; border:1px solid #f00; font-size:12px; background:#fff; float:left; margin-right:5px; text-align:center; line-height:18px; text-decoration:none;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
     else strC+='<a style="display:block; 18px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; text-align:center; margin-right:5px; line-height:18px; text-decoration:none; color:#888;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
    }
    strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')" style="display:block; 35px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; margin-right:5px; text-align:center; line-height:18px; text-decoration:none; color:#888;">尾页</a>  '
    strE2=nowPage+1+"/"+PagesLen+""+""+j+""
    document.getElementById("changpage").innerHTML=strS+strC+strE+strE2
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    一种分布式框架设计(四)
    读书笔记-《拆掉思维里的墙》
    [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
    Qt 5.3更新无数,更改C++控制台输出最为赞
    Guava ---- Ordering排序工具
    codeforces 558D Guess Your Way Out! II 规律
    Linux shell之打印输出
    细说Oracle中NULL值
    责任成本汇总表
    NSOperationQueue小结
  • 原文地址:https://www.cnblogs.com/zhangkaijia/p/3071603.html
Copyright © 2011-2022 走看看