// 功能需求分析
// 1.有个内容显示区（创建内容并打印）
// 2.有个分页按钮显示区（创建按钮并打印）
// 3.内容显示区要显示的条数（分页大小）
// 4.点击按钮可以打印内容并按钮进行切换（给按钮绑定点击事件），可以用事件委托或创建元素的时候同时绑定事件；
<div id="contantBox"></div> //显示内容区
<div id="pageBox"></div> //显示页码区
<script>// 打印内容函数；（这一部分调用的时候改成自己的打印函数）
var aStu=["a","b",'c',"d","e","f","g","h"];
function showInfo(ary,oContantBox){
var oP=document.createElement("p"); //创建P元素
oP.innerHTML=ary; //把数据内容打印到p元素中
oContantBox.appendChild(oP); //将p元素添加到oContantBox中
}
// 将分页功能进行封装；
/**
* [paging description]
* @param {[ary||obj]} data [总数据]
* @param {[string]} size [分页大小]
* @param {[number]} pageCur [当前页]
* @param {[string]} contantId [内容显示区域]
* @param {[string]} pageId [页码显示区域]
* @param {[function]} func [打印内容函数]
*/
function paging(data,size,pageCur,contantId,pageId,func){
var oContantBox=document.getElementById(contantId); //获取打印区域div
var opageBox=document.getElementById(pageId); //获取分页按钮div
var pageSize=size; //设置分页大小
var pageCount=Math.ceil(data.length/pageSize); //获取总页数
var pageCurr=pageCur; //设置当前页
var start=(pageCurr-1)*pageSize; //根据当前页设置开始打印的位置
var end=pageCurr*pageSize; //根据当前页设置结束打印的位置
oContantBox.innerHTML=""; //清除之前打印的内容；
opageBox.innerHTML=""; //清除之前打印的分页按钮；
if(end>data.length){ //判断打印结束位置是否大于数据总长度；因为最后一页end可能比数据总长度大，这样就会报错（解决最后一页的问题）
end=data.length //将end的值重新设置为数据总长度
}
for(var i=1;i<=pageCount;i++){ //使用for循环打印页数按钮
var oInput=document.createElement("input"); //创建input元素
oInput.value=i; //设置的input的value值
oInput.type="button"; //设置input的类型为button
opageBox.appendChild(oInput); //将创建的元素添加到pageBox中
}
// 打印首页内容
for(var j=start;j<end;j++){ //使用for循环打印内容
func(data[j],oContantBox); //打印内容的封装函数；
}
//分页按钮点击事件委托给已存在的父级执行
opageBox.onclick=function(e){
var e=e||window.event; //解决IE兼容性问题
if(e.target.tagName=="INPUT"){ //判断点击的目标是不是input分页按钮
pageCurr=e.target.value; //设置当前页等于分页按钮的值
paging(data,3,pageCurr,"contantBox","pageBox",showInfo); //点击分页按钮重新执行函数
}
}
}
paging(aStu,3,1,"contantBox","pageBox",showInfo); //执行函数
</script>