本文實(shí)例講述了ThinkPHP5.1+Ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)功能。分享給大家供大家參考，具體如下：
無(wú)刷新分頁(yè)可以減輕服務(wù)器負(fù)擔(dān)，利用Ajax技術(shù)，請(qǐng)求部分信息，提高網(wǎng)站訪問(wèn)速度，是網(wǎng)站建設(shè)的必備技術(shù)。
需要在后臺(tái)展示自定義屬性列表（lst.html），其中的列表部分摘出來(lái)，放到（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ù)器端傳遞過(guò)來(lái)的自定義屬性，并進(jìn)行了分頁(yè)操作：
$selfattribute_select = db("selfattribute")->paginate(5);
$this->assign("self",$selfattribute_select);
因?yàn)閘st.html把列表摘了出來(lái)，所以還要在引入回去，才能使頁(yè)面完整，同時(shí)，為了方便進(jìn)行jquery操作，把列表用帶id的div包裹起來(lái)：
div id="paginate">
{include file="selfattribute/paginate1"}
/div>
ThinkPHP5.1帶的分頁(yè)類使用的是BootStrap樣式，它在頁(yè)面顯示時(shí)實(shí)際會(huì)有一個(gè)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是怎么來(lái)的。
然后開始寫js代碼，因?yàn)槲覀兊姆猪?yè)按鈕也在被請(qǐng)求的頁(yè)面當(dāng)中，屬于“未來(lái)”的元素，所以這里我們要用on方法，這個(gè)方法是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是為了阻止默認(rèn)事件，防止直接跳轉(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)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
標(biāo)簽：寶雞 銅川 黃南 宜賓 南陽(yáng) 湛江 婁底 鎮(zhèn)江
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《ThinkPHP5.1+Ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)功能示例》，本文關(guān)鍵詞 ThinkPHP5.1+Ajax,實(shí)現(xiàn),的,無(wú),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
