jquery整合thinkphp的bootstrap分页

thinkphp版本 3.2.3 bootstrap的版本3.3.5

先看效果：

php关键代码 tp控制器

$message = M(‘message’); // 实例化message对象
$count      = $message->count();// 查询满足要求的总记录数
$Page  = new \Think\Page($count,10);// 实例化分页类 传入总记录数和每页显示的记录数(10)
$Page->setConfig(‘prev’,’上一页’);
$Page->setConfig(‘next’,’下一页’);
$this->page       = $Page->show();// 赋值分页输出
$this->list = $message->order(‘addtime desc’)->limit($Page->firstRow.’,’.$Page->listRows)->select();

模版关键代码

<div><ul class=”pagination”><{$page}></ul></div>

这样生成的代码格式为

<ul class=”pagination”>
<div>
<a href=”/Admin/Message/index/p/2.html” class=”prev”>上一页</a>
<a href=”/Admin/Message/index/p/1.html” class=”num”>1</a>
<a href=”/Admin/Message/index/p/2.html” class=”num”>2</a>
<span class=”current”>3</span>
<a href=”/Admin/Message/index/p/4.html” class=”num”>4</a>
<a href=”/Admin/Message/index/p/4.html” class=”next”>下一页</a>
</div>
</ul>

然后用jquery改变其结构  js代码

$(document).ready(function(){
//bootstarp 分页

var str=”;
$(“.pagination div”).children().each(function(i,currdom){

if($(currdom).attr(“class”) == “current”){
str += ‘<li class=”active”><a>’+$(currdom).html()+'</a></li>’;
}else{
str += ‘<li><a href=”‘+$(currdom).attr(“href”)+'”>’+$(currdom).html()+'</a></li>’;
}

});
if(str.length > 0){
$(“.pagination”).html(str);
}
});

最终生成的代码为

<ul class=”pagination”>
<li><a href=”/Admin/Message/index/p/2.html”>上一页</a></li>
<li><a href=”/Admin/Message/index/p/1.html”>1</a></li>
<li><a href=”/Admin/Message/index/p/2.html”>2</a></li>
<li class=”active”><a>3</a></li>
<li><a href=”/Admin/Message/index/p/4.html”>4</a></li>
<li><a href=”/Admin/Message/index/p/4.html”>下一页</a></li>
</ul>