Thinkphp5.1 + Ajax implementation of no refresh paging function example

Time:2021-7-23

In this paper, an example of ThinkPHP 5.1 + Ajax implementation of no refresh paging function. The details are as follows:

No refresh paging can reduce the burden of the server, using Ajax technology to request part of the information, improve the speed of website access, is a necessary technology for website construction.

The user-defined attribute list (LST. HTML) needs to be displayed in the background. The list part needs to be picked out and put into (paginate1. HTML):

<div>
  <div>
    <div>
      <div>
          <table>
            <thead>
              <tr>
                <th>ID</th>
                < th > name < / th >
                < th > value < / th >
                < th > display
                < th > sort
                < th > operation
              </tr>
            </thead>
            <tbody>
              {volist name="self"}
              <tr>
                <td>{$vo.id}</td>
                <td>{$vo.name}</td>
                <td>{$vo.value}</td>
                <td>
                  {if $vo.isshow==1}
                  < button type = "button" > is < / button >
                  {else/}
                  < button type = "button" > no < / button >
                  {/if}
                </td>
                <td><input type="text" value="{$vo.order}" name=""></td>
                <td>
                  <div>
                    < button data toggle = "dropdown" aria expanded = "true" > operation < span > 0</span>
                    </button>
                    <ul>
                      <li>Modify</a>
                      </li>
                      <li>Delete</a>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              {/volist}
            </tbody>
          </table>
        {$self|raw}
        <div>
          <div>
            <button type="button">
              <i></i>&nbsp;&nbsp;
              <span>Sort</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Among them, self is the custom attribute passed by the server, and paging operation is carried out


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

Because lst.html extracts the list, it needs to be imported back to make the page complete. At the same time, in order to facilitate jQuery operation, wrap the list with div with ID:


<div>
    {include file="selfattribute/paginate1"}
</div>

The paging class in ThinkPHP 5.1 uses the bootstrap style. It actually has a pagination class when the page is displayed. Check the source code as follows:


<ul>
  <li>
    <span>&laquo;</span></li>
  <li>
    <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>

This is what many people don’t understand about pagination.

Then start to write JS code, because our paging button is also in the requested page, belonging to the “future” element, so here we need to use the on method, which is the method after jQuery 1.7. Pay attention to your jQuery version.


<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>

The. Done () method is the same as the success method. Return false is to prevent default events and direct jump.

Then the server can render the template according to the situation. The code is as follows:


public function lst()
  {
    $selfattribute_select = db("selfattribute")->paginate(5);
    $this->assign("self",$selfattribute_select);
    if (request()->isAjax()) {
      return view("paginate1");
    } else {
      return view();
    }
  }

For more information about ThinkPHP, interested readers can check out the following topics: introduction to ThinkPHP, summary of operation skills of ThinkPHP template, summary of common methods of ThinkPHP, introduction to CodeIgniter, CI (CodeIgniter) framework advanced course, Zend framework introduction course and PHP template technology summary.

I hope this article will be helpful to the design of PHP program based on ThinkPHP framework.

Recommended Today

. net Maui preview 5 function Preview

Although Microsoft build has just passed, we will continue to share our continuous progress in. Net multi platform application UI (. Net Maui). In this release, we have enabled animation and view transformation, completed the migration of multiple UI components, and improved a single project template.We also released the first batch of preview documents covering […]