discuz蓝色城市门户论坛网站模板seo关键词分析

背景：

调用PHP后端给的接口，以实现分页的功能。由于我是没造轮子的能力，所以翻了不少技术博客，经过整合才算完成整个分页功能。从一番查阅中，不难看出大概分为两种不同的分页：

一种是纯前端的，就是在一次性加载完所有数据以后，通过隐藏多出来的部分，之后根据按钮获取列表长度中的每一小段，来实现分页的效果；另一种是直接调用接口获取到每一小段数据后分页。第二种方法中，相当于后台已经为我们做了分页，前端只需要为每一个按钮设置不同的节点获取数据就行。此外由于第一种方法是一次性加载完全部数据，所以在数据量较大的情况下首次加载的时间也会变长。下面会把两种方法都罗列一下。

相关链接：

纯javascript实现分页(两种方法) http://www.lai18.com/content/438532.html?from=cancel

简单封装分页功能pageView.js http://web.jobbole.com/87590/

利用JS生成分页式table： http://blog.sciencenet.cn/blog-448935-603809.html

JS实现的分页效果 http://www.kanqianduan.com/archives/469

　　纯js实现分页 http://www.cnblogs.com/jiechn/p/4095029.html

分页的处理分为两个部分，一个是内容的显示部分区域。一个是分页按钮区域。最后显示区域的部分按照 纯js实现分页 来改的，按钮区域按照  JS实现的分页效果  的分页思路，用ajax对接后端数据实现。对于按钮方面，其中主要就是关于if判断的思路，分布式完成每一个if。再改变每一个if中的效果，按照实际的UI稿要求做分页的按钮就可以了。

在这个项目中，由于后端给的接口不同，两种不同的加载方式都使用到了。

效果展示

现在先来说说按钮区域

<div class="pager"  id="pagination" name="pagination"><!--<li><a href="#">上一页</a></li><li><a href="#" class="active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">下一页</a></li>-->
</div>

 

HTML的部分就是这个样子，我们需要获取 pagination，然后在里面输出分页页签。并且提前写好active的样式。

window.onload = function (){……page({id:"pagination",   //当前idnowNum:1,//当前页allNum:10, //显示总页妈callBack:function(pno){//回调函数，在这里写相关显示传参数，如对于列表页的展示
       ……
});function page(opt){if (!opt.id) {return false;}var obj = document.getElementById(opt.id);         var nowNum = opt.nowNum || 1;//默认值1var allNum = opt.allNum || 5;//默认值5var callBack = opt.callBack || function(){};//显示    首页btnif(nowNum>=4 && allNum>=6){var oA = document.createElement("a");//创建a标签oA.href = "#1";//设置#的值oA.innerHTML = "首页"//输出内容obj.appendChild(oA);//添加oA
    }//显示    上一页btnif(nowNum>=2){var oA = document.createElement("a");oA.href = "#" + (nowNum -1);oA.innerHTML = "上一页"obj.appendChild(oA);}//当总页数小于等于5的时候if (allNum<=5) {//总页数值为多少，输出多少按钮for (var i =1;i<=allNum;i++) {//创建a标签var oA = document.createElement("a");oA.href = "#"+i;//当前页码效果if (nowNum == i) {oA.className = "active";//新增样式oA.innerHTML = i;}//其他页码效果else{oA.innerHTML = i;}obj.appendChild(oA);}}
//当总页数大于5的时候else{for (var i =1;i<=5;i++) {var oA = document.createElement("a");//当当前按钮是1或者2时，会出现负数，需要控制if (nowNum == 1 || nowNum == 2) {oA.href = "#" + i;if (nowNum == i) {oA.className = "active";oA.innerHTML = i;}else{oA.innerHTML = i;}     }                                 //通过总页-当前页的结果，判断点击最后的按钮时，如何输出                                else if((allNum -nowNum) == 0 ||(allNum -nowNum) == 1){oA.href = "#" + (allNum - 5 + i);                                     if ((allNum -nowNum) == 0 && i==5) {oA.className = "active";oA.innerHTML = (allNum - 5 + i);}else if((allNum -nowNum) == 1 && i==4){oA.className = "active";oA.innerHTML = (allNum - 5 + i);}else{oA.innerHTML =(allNum - 5 + i);}                                         }else{oA.href = "#" + (nowNum - 3 + i);if (i==3) {//使当前页签始终处于中间oA.className = "active";oA.innerHTML =(nowNum - 3 + i);}else{oA.innerHTML = (nowNum - 3 + i);}}obj.appendChild(oA);}}                 //显示    尾页btn  if((allNum - nowNum)>=3 && allNum >=6){var oA = document.createElement("a");oA.href = "#" + allNum;oA.innerHTML = "尾页"obj.appendChild(oA);    }//显示    下一页btn      if((allNum - nowNum)>=1){var oA = document.createElement("a");oA.href = "#" + (nowNum +1);oA.innerHTML = "下一页"obj.appendChild(oA);    }//callBack函数执行
    callBack(nowNum,allNum);//ithead 为表格需要输出的内容var ithead = document.getElementById("idData");//获得表格的行数长度var num = idData.childNodes.length;//无数据如何输出if(num == 0){obj.style.display="none";var oB = document.getElementById("warning");oB.innerHTML = "当前无成员周报数据";}else{//给a添加点击事件var aA = obj.getElementsByTagName("a");for (var i =0;i<aA.length;i++) {aA[i].onclick = function(){var nowNum = parseInt(this.getAttribute("href").substring(1));obj.innerHTML = "";page({//重新赋值
                                    id:opt.id,nowNum:nowNum,allNum:allNum,callBack:callBack});return false;     };}}      
}

创建按钮的方式方法其实都是一样的，需要注意的是赋值和判断的问题。而分页展示区域的代码则放在回调函数里。并且在此之前需要声明变量。

这里在成功获取了后台ajax数据以后，先需要确定一共有多少行数据，确定每页有多少行，该例子中每页5行，故使用 总行数/每页行数 = 总页数。因为可能并非整除，故需要使用   Math.ceil   向上取整。

$.ajax({type:"get",url:"/api/admin/show_weekly.php?session="+session_id,dataType:'json',              success:function(json){var num = json["data"].length;//JSON字符串的条数var pageSize = 5;    //每页显示行数 var page_num = Math.ceil(num/pageSize);   //总页数var page_now = page_num -(page_num-1);    //等于第一页 

 

为对象设置好变量值，回调函数中直接调用接口输出数据。

        page({id:"pagination",   //当前idnowNum:page_now,//当前页allNum:page_num, //显示总页妈callBack:function(pno){var itable = document.getElementById("idData");$("#idData").html("");for (var i =0; i <num;i++) {itable.innerHTML += "<tr><td>"+ group(json["data"][i].group_id)  + "</td>" +"<td>"+ json["data"][i].name + "</td>" +"<td>"+ json["data"][i].week_num + "</td>" +"<td>"+ status(json["data"][i].status) + "</td>" +"<td>"+ json["data"][i].text+ "</td></tr>";};

 

之前提到有一次性加载数据和后台处理以后调用接口分次加载两种处理数据的方式。如果调用的是第二种，下面代码可直接省略。以下为对于每页多出行数数据的处理。

            //如果调用的是非一次性输出所有数据的接口，以下隐藏处理可以省略var totalPage = 0;   //   总页数      //总共分几页if(num/pageSize>parseInt(num/pageSize)){totalPage = parseInt(num/pageSize)+1;}else{totalPage = parseInt(num/pageSize);
            }var currentPage = pno;//当前页数var startRow = (currentPage - 1) * pageSize +1;var endRow = currentPage * pageSize;endRow = (endRow >num)? num:endRow;for (var i=1;i<(num+1);i++) {var irow = itable.rows[i-1];if (i>=startRow && i <=endRow) {irow.style.display = "table-row";} else{//超出的部分隐藏掉irow.style.display = "none";}}}});},                      error:function(json){if (json.error != null) {alert(json.error)}else{alert("缺少必要的参数或参数为非数字");}}
});

后台SQL控制的好，完全可以将数据的切割交由他们，比起一次性加载完所有数据，由后台来控制数据显然更合理。