Vuejs Practical Use Laypage Plug-in implementation paging (3) _javascript tips

Objective

In the last two chapters of the work, we successfully achieved the first page of the rendering, but only to render a sheet of data. We may need to render more data, at which point we need to consider paging.

There are many ways to page pagination, for example, the asynchronous loading of paging. But for friends who don't have much of the front-end template framework, it may be a bit more difficult to use this approach on the first step. Therefore, the pagination implementation of our chapter is done on the basis of common link pagination.

After we have more experience with the front-end framework, we can use a richer paging approach.

As a matter of fact, it is not not possible to build a paging component on our own, but I do it in my own code on the mobile side. However, what I would recommend here is to use the Laypage page plugin, whose official web site is (http://laypage.layui.com/).

Paging Rule Development

First, let's take a look at the interface instructions

Here is the Get interface, so, as shown in the figure above, the correct way to request this is to append the parameters directly to the URL behind the interface.

http://cnodejs.org/api/v1/topics?page=11

OK, then our URL address can be//xxx/index.shtml?1 because I am not ready to use other parameters, as long as the paging to complete. So, you can add a paging ID directly behind it, and then get this ID in the URL from a function to append to the interface. Then we can achieve our needs.

Write code to achieve!

Gets the ID in the URL

As you can see above, we need a function that correctly obtains the ID that we have appended to the URL address for good sleep.

function Geturlid () {
 var host = window.location.href;
 var id = host.substring (host.indexof ("?") +1,host.length);
 return ID;
}

As the code, through this function method, we can get the ID appended to the URL, test the

$ (function () {
 var id = geturlid ();
 Console.log (ID);
 var url = "Http://cnodejs.org/api/v1/topics";
 Getjson (url,pushdom);
});

As shown in the following illustration:

By ID We're going to get different data.

$ (function () {
 var id = geturlid ();
 var url = "http://cnodejs.org/api/v1/topics?page=" +ID;
 Getjson (url,pushdom);
});

As above, you can get different data based on different URLs.

Using Laypage to implement paging

First of all, it's a reference file.

<script src= "Res/js/plugins/laypage/laypage.js" ></script>

In the appropriate part of the HTML, add the paging component to the box, as follows:

<div class= "page" ></div>

Then we copied the code on the official website. Modify the code as follows

$ (function () {
 var id = geturlid ();
 var url = "http://cnodejs.org/api/v1/topics?page=" +ID;
 Getjson (url,pushdom);
 Laypage ({
 cont: $ (". Page"),
 pages:100,
 curr:id,
 jump:function (E, a) {
 if (!first) {
 Location.href = '? ' +e.curr}}})

The final effect is shown in the following illustration:

Summary

In this chapter, our content is not in fact related to Vue. However, whatever content is used, the end result is the completion of the project. With the plug-ins that have been developed to achieve, can greatly improve our efficiency.

Appendix

Vue official website
Cnodejs Api Detailed Introduction
This series of tutorials source download

Vuejs actual Combat Tutorial Chapter One, build the foundation and render out the list
Vuejs Combat Tutorial Chapter II, repair errors and beautify time
Vuejs actual Combat Tutorial Chapter III, the use of laypage plug-ins to achieve pagination

This article by Fungleo original

Starting Address: http://blog.csdn.net/FungLeo/article/details/51649074

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.