本文實例講述了ThinkPHP5.1+Ajax實現(xiàn)的無刷新分頁功能。分享給大家供大家參考，具體如下：
無刷新分頁可以減輕服務(wù)器負擔，利用Ajax技術(shù)，請求部分信息，提高網(wǎng)站訪問速度，是網(wǎng)站建設(shè)的必備技術(shù)。
需要在后臺展示自定義屬性列表（lst.html），其中的列表部分摘出來，放到（paginate1.html）中：
div class="row">
div class="col-sm-12">
div class="ibox float-e-margins">
div class="ibox-content">
table class="table table-bordered">
thead>
tr>
th>ID/th>
th>名稱/th>
th>取值/th>
th>顯示/th>
th>排序/th>
th>操作/th>
/tr>
/thead>
tbody>
{volist name="self" id="vo"}
tr>
td>{$vo.id}/td>
td>{$vo.name}/td>
td>{$vo.value}/td>
td>
{if $vo.isshow==1}
button type="button" class="btn btn-success btn-sm">是/button>
{else/}
button type="button" class="btn btn-danger btn-sm">否/button>
{/if}
/td>
td>input type="text" value="{$vo.order}" name="">/td>
td>
div class="btn-group open">
button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 span class="caret">/span>
/button>
ul class="dropdown-menu">
li>a href="">修改/a>
/li>
li>a href="">刪除/a>
/li>
/ul>
/div>
/td>
/tr>
{/volist}
/tbody>
/table>
{$self|raw}
div class="row">
div class="col-sm-2">
button class="btn btn-success" type="button" id="changeOrder">
i class="fa fa-plus-square">/i>nbsp;nbsp;
span class="bold">排序/span>
/button>
/div>
/div>
/div>
/div>
/div>
/div>
其中self是服務(wù)器端傳遞過來的自定義屬性，并進行了分頁操作：
$selfattribute_select = db("selfattribute")->paginate(5);
$this->assign("self",$selfattribute_select);
因為lst.html把列表摘了出來，所以還要在引入回去，才能使頁面完整，同時，為了方便進行jquery操作，把列表用帶id的div包裹起來：
div id="paginate">
{include file="selfattribute/paginate1"}
/div>
ThinkPHP5.1帶的分頁類使用的是BootStrap樣式，它在頁面顯示時實際會有一個pagination的類，查看源代碼如下：
ul class="pagination">
li class="disabled">
span>laquo;/span>/li>
li class="active">
span>1/span>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=2" rel="external nofollow" rel="external nofollow" >2/a>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=3" rel="external nofollow" >3/a>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=4" rel="external nofollow" >4/a>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=5" rel="external nofollow" >5/a>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=6" rel="external nofollow" >6/a>/li>
li>
a href="/xkershouche/public/admin/selfattribute/lst.html?page=2" rel="external nofollow" rel="external nofollow" >raquo;/a>/li>
/ul>
這就是好多人搞不懂的pagination是怎么來的。
然后開始寫js代碼，因為我們的分頁按鈕也在被請求的頁面當中，屬于“未來”的元素，所以這里我們要用on方法，這個方法是jquery1.7以后的方法，注意自己的jquery版本。
script type="text/javascript">
$(document).on('click', '.pagination a', function(event) {
var url = $(this).attr('href');
$.ajax({
url: url,
type: 'get',
})
.done(function(data) {
$("#paginate").html(data);
})
return false;
});
/script>
其中.done()方法和success方法是一樣的，return false是為了阻止默認事件，防止直接跳轉(zhuǎn)。
那么服務(wù)器端就可以根據(jù)情況渲染模板了，代碼如下：
public function lst()
{
$selfattribute_select = db("selfattribute")->paginate(5);
$this->assign("self",$selfattribute_select);
if (request()->isAjax()) {
return view("paginate1");
} else {
return view();
}
}
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。
您可能感興趣的文章:- thinkphp5框架擴展redis類方法示例
- thinkphp5使html5實現(xiàn)動態(tài)跳轉(zhuǎn)的例子
- Thinkphp5 如何隱藏入口文件index.php(URL重寫)
- Thinkphp5+Redis實現(xiàn)商品秒殺代碼實例講解
