主頁 > 知識庫 > ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例

ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例

熱門標(biāo)簽:揚(yáng)州地圖標(biāo)注app 騰訊外呼管理系統(tǒng) 岳陽外呼型呼叫中心系統(tǒng)在哪里 山西回?fù)芡夂粝到y(tǒng) 青島語音外呼系統(tǒng)招商 百應(yīng)電話機(jī)器人服務(wù) 山西探意電話機(jī)器人 河南電銷卡外呼系統(tǒng)哪家強(qiáng) 昭通辦理400電話

本文實(shí)例講述了ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能。分享給大家供大家參考,具體如下:

無刷新分頁可以減輕服務(wù)器負(fù)擔(dān),利用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ù)器端傳遞過來的自定義屬性,并進(jìn)行了分頁操作:

$selfattribute_select = db("selfattribute")->paginate(5);
$this->assign("self",$selfattribute_select);

因?yàn)閘st.html把列表摘了出來,所以還要在引入回去,才能使頁面完整,同時,為了方便進(jìn)行jquery操作,把列表用帶id的div包裹起來:

div id="paginate">
    {include file="selfattribute/paginate1"}
/div>

ThinkPHP5.1帶的分頁類使用的是BootStrap樣式,它在頁面顯示時實(shí)際會有一個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代碼,因?yàn)槲覀兊姆猪摪粹o也在被請求的頁面當(dāng)中,屬于“未來”的元素,所以這里我們要用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是為了阻止默認(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é)》。

希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。

您可能感興趣的文章:
  • thinkphp5框架擴(kuò)展redis類方法示例
  • thinkphp5使html5實(shí)現(xiàn)動態(tài)跳轉(zhuǎn)的例子
  • Thinkphp5 如何隱藏入口文件index.php(URL重寫)
  • Thinkphp5+Redis實(shí)現(xiàn)商品秒殺代碼實(shí)例講解

標(biāo)簽:寶雞 銅川 黃南 宜賓 南陽 湛江 婁底 鎮(zhèn)江

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例》,本文關(guān)鍵詞  ThinkPHP5.1+Ajax,實(shí)現(xiàn),的,無,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例》相關(guān)的同類信息!
  • 本頁收集關(guān)于ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章