Vue Component Bootpage Implement simple paging functionality _javascript skills

A period of time did not update the article, mainly because they have been busy learning new things and forget to share, really ashamed.

This is not, Big midnight issued a more article, sharing a vue of their own writing a small component, called Bootpage.

Do not know Vue.js's children's shoes can be used to my last article "talking about Vue.js" to understand.

Introduction to Bootpage Components

It's not really a tall component anymore, instead, it is a simple page-paging component, primarily a form-paging component in its most recent project, and the Vue official component library is either too powerful or not suitable for me, so I wrote a makeshift Maybe someone and I need such a simple paging component to achieve a simple paging function, I will be here to share, we consciously landfills slightly.

For tall components, you can vue the official component library: Https://github.com/vuejs/awesome-vue

Bootpage is a table paging component that supports static data and server data, which enables you to adjust the number of rows and page numbers displayed per page, based on Bootstrap, like this:

Online Demo: Https://luozhihao.github.io/B ...

How to use

In the. Vue component file, we write template, that is, HTML code:

 <table class= "table Table-hover table-bordered" > <thead> <tr> &L t;th width= "10%" >id</th> <th width= "30%" >name</th> <th width= "40%" >content</th>
  ; th width= "20%" >remark</th> </tr> </thead> <tbody> <tr v-for= "data in Tablelist" > <TD v-text= "Data.num" ></td> <td v-text= "Data.author" ></td> <td v-text= "Data.contents" ></td> <td v-text= "Data.remark" ></td> </tr> </tbody> <tfoot> <tr> & LT;TD colspan= "4" > <div class= "pull-left" > <button class= "btn btn-default" v-on:click= "Refresh" > Refresh ;/button> </div> <div class= "Pull-right" > <boot-page:async= "false":d ata= "lists": lens= "Lenarr" ":p age-len=" Pagelen ":p aram=" param "></boot-page> </div> </td> </tr> </tfoot> ;/table> 

<boot-page> Label Async refers to whether to obtain data from the server side, False is no; Data is a static array of tables, lens an array of rows for each page; Page-len is the number of pages that can be displayed;

The JavaScript code that uses static data, which is inside the script tag, reads as follows:

<script> import Bootpage from './components/bootpage.vue ' export default {data () {return {lenarr: [10 , 50, 100],//per-page display length set Pagelen:5,//Can be displayed in pages lists: [{num:1, Author: ' Luozh ', Contents: ' Bootpage is a support for static data and services
   Table paging component of data remark: ' DSDS '}, {num:2, Author: ' Luozh ', Contents: ' Support to adjust the number of rows per page and number of pages displayed, style based on Bootstrap ', remark: ' DSDs '}, {num:3, Author: ' Luozh ', contents: ' <boot-page> tags async refers to whether to obtain data from the server, false to No ', remark: ' DSDs '}, {num:4, author : ' Luozh ', Contents: ' Data is a static array of tabular data; ', remark: ' DSDs '}, {num:5, Author: ' Luozh ', Contents: ' Lens an array of rows for each page ', remark: ' DSDs '}, {num:6, Author: ' Luozh ', Contents: ' Page-len as the number of pages to display ', remark: ' DSDs '}, {num:7, Author: ' Luozh ', contents : ' Server return parameter is {data:[], page_num:6}, where data is tabular, Page_num is total page ', remark: ' DSDs '}, {num:8, Author: ' Luozh ', contents: ' Can be adjusted
  Use this. $refs. Page.refresh () To refresh tabular data ', remark: ' DSDS '}],//tabular raw data, using server data without the use of tablelist: []//Paging component back-page data}}, Components: {BOOTPAGE}, Events: {//Page component returns form data {this.tablelist = data}} </script>

 

In general, we rarely use static tabular data, most applications are obtained from the server side, so this provides a way to get server paging data:

The component HTML that uses server data is as follows:

<boot-page v-ref:page:async= "true": lens= "Lenarr": url= "url":p age-len= "Pagelen":p aram= "param" ></ Boot-page>
Where the URL is the server's request address; Param is the parameter object that needs to be sent to the server;

The code for using the server data JavaScript is as follows:

<script>
 import bootpage from './components/bootpage.vue '

 export default {
  data () {return
  {
   Lenarr: [10, 50, 100],//per page display length set
   pagelen:5,//Can be displayed pagination
   URL: '/bootpage/',///request path
   param: {},///Send to Server Parameter
   tablelist: []//page after paging component returned data
  }
  },
  methods: {
  Refresh () {this
   . $refs. Page.refresh () A table refresh feature is provided here
  }
  ,
  components: {
  bootpage
  },
  events: {

  // Tabular data returned by the paging component (this is the data returned by the server)
  ' data ' {
   this.tablelist = Data
  },

  //Refresh Data
  ' Refresh ' () {
   This.refresh (
 )
}}} </script>

Note: the server, in addition to the array content to the Component table, also requires a key name for the total number of pages, named Page_num

The parameters that the component passes to the server are:

{
Active:1,//Current page number
Length:5//per page display number
}

The parameters returned by the server should be:

{
Data: [],//Tables
Page_num:5//Total pages
}

Component Source Code

As for paging the realization of the source code here is not shown, all the source code I have uploaded to my github, the address is: https://github.com/luozhihao/BootPage

Here in advance a wake up: Because this component is I use a few hours to drive out, so for the Vue components of the writing format and norms must be considered ill-conceived, not completely independent out, so consciously landfills slightly, here only to share.

Of course, you can also arbitrarily modify the components of the code to suit the use of their own projects, after all, the implementation of all-inclusive paging component is still relatively complex.

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.