用JqueryMobile创建分页控件标签

1.问题：

手机appCan开发中。可能几个窗体都使用到分页。上一页、下一页、末页、或者点击某个数字到达某页。

如果效果：

末页效果：                            

首页效果

到达第一页时，上一页禁用。末页第九页时，下一页禁用。

实现步骤：

建立一个JS文件用来存储分页公用代码：

//分页处理
var PageHtml="";//html字符串
var sumCount=100;//总共默认条数
var curPage=1;//当前页默认为第一页.
var curCount=15;//默认每页显示15条

//调用每次调用此函数时，传入当前pageiNDEX
 function selectChange(index)
 {
  curPage=index;
pageHelper(curCount)
 }
function pageHelper(eachPage)
{   
    curCount=eachPage==""||eachPage==null?curCount:eachPage;//每页显示条数
var sumPage=Math.ceil(sumCount/curCount);//总共21.2页取最大22页

    //上一页按钮标签
var prePage="<button id='prebtn' οnclick='prePage();lodData();'"+(curPage==1?" disabled='disabled'":"" )+">上一页</button>";
//下一页按钮标签
var nextPage="<button id='nextbtn' οnclick='nextPage();lodData();'"+(curPage==sumPage?"disabled='disabled'":"" )+">下一页</button>";;
var option="<select οnchange='selectChange(this.value);lodData();'>";

for(var i=1;i<=sumPage;i++)
{ //三元表达式判断是当前页，是的话加上selected选中属性
option+="<option value='"+i+"' "+( curPage==i? " selected='selected'":"")+">"+i+"</option>";
}
option+="</select>";

PageHtml="<center><div data-role='controlgroup' data-theme='b' data-type='horizontal' >"+prePage+option+nextPage+"</div></center>";

//在HTML页面创建一个div或者其他标签。将此拼接的html加载过去，即成为我们的分页控件

document.getElementById("pageHtml").innerHTML=sumCount>0?PageHtml:"";
//return PageHtml;

//重新渲染样式
$("#pageHtml").trigger("create");

}

//两个减号 你懂的。上一页。下同
function prePage()
{
curPage--;
pageHelper(curCount)
}
function nextPage()
{
curPage++;
pageHelper(curCount)

}

在使用此js的时候。一定将js放到jqueryMobile链接下面。以保证选着器等功能不发生冲突

前台调用的时候。

必须将sumCount总条数设置好后。执行此方法

//假如通过AJAX获取到总记录数120条；

  sumCount=120
  
          if(sumCount>0)
{   
 pageHelper(15);

             }

具体怎么调用，自己摸索吧。或者留言。谢谢

看相关电影视频请到：坝坝电影