Vue.js-based Table paging component

Introduction to Bootpage Components

Actually is not what big on the component, on the contrary really a simple table pagination component, mainly is oneself recent project need a table pagination component, and Vue official component library in the paging component is too powerful or not suitable for me, so I wrote a make do with, Maybe someone like me need such a simple paging component to achieve a simple paging function, I will share here, we consciously pits.

For tall components, you can shift to Vue's official component library: Https://github.com/vuejs/awesome-vue#libraries--plugins

Bootpage is a table paging component that supports static data and server data, and supports adjusting 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 the template, which is the HTML code:

<TableClass= "Table Table-hover table-bordered"><Thead><Tr><ThWidth= "10%">id</Th><ThWidth= "30%">name</Th><ThWidth= "40%">content</Th><ThWidth= "20%">remark</Th></Tr></Thead><Tbody><TrV-for= "Data in Tablelist"><TdV-text= "Data.num"></Td><TdV-text= "Data.author"></Td><TdV-text= "Data.contents"></Td><TdV-text= "Data.remark"></Td></Tr></Tbody><Tfoot><Tr><Tdcolspan= "4"><DivClass= "Pull-left"><buttonClass= "Btn Btn-default"V-on:click= "Refresh"> Refresh</button></Div><DivClass= "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< Span style= "COLOR: #0000ff" >>            

In the <boot-page> tag, async refers to whether the data is fetched from the server side, False to No, data is a static array of tables, lens is an array of rows per page, and Page-len is the number of pages that can be displayed;

The JavaScript code that uses static data is the following in the script tag:

<script>Import Bootpage from './components/bootpage.vue 'ExportDefault{data () {Return{lenarr: [10, 50, 100],//Each page shows the length setting Pagelen:5,//Number of pages that can be displayedLists: [{num:1, Author: ' Luozh ', Contents: ' Bootpage is a table pagination component that supports static data and server data ', remark: ' DSDs '}, {num:2, Author: ' Luozh ', Contents: ' Support to adjust the number of rows and page numbers displayed per page, style based on Bootstrap ', remark: ' DSDs '}, {num:3, Author: ' Luozh ', contents: ' <boot-page> tag async refers to whether to fetch data from the server side, false to No ', remark: ' DSDs '}, {num:4, Author: ' Luozh ', Contents: ' Data is a static tabular data array; ', remark: ' DSDs '}, {num:5, Author: ' Luozh ', Contents: ' Lens ' shows an array of rows per page ', remark: ' DSDs '}, {num:6, Author: ' Luozh ', Contents: ' Page-len as the number of pages to display ', remark: ' DSDs ' }, {num:8, Author: ' Luozh ', Contents: ' Can invoke this. $refs. Page.refresh () Refresh tabular data ', Remark: ' DSDs ' }], // Tabular raw data, using server data without using tablelist: [] // pagination component returned after paging data }}, components: {bootpage}, events: {// pagination component returns data ' this.tablelist = Data}}}</script>           

In general, we seldom use static tabular data, and most of the application's data is obtained from the server side, so here's a way to get the server paging data:

The component HTML that uses server data is as follows:

<V-ref:page:async= "true" : Lens= "Lenarr" : url= "url" :p age-len= "Pagelen" :p Aram= "param"></boot-page>          

Where the URL is the request address of the server; param is the parameter object that needs to be sent to the server;

The code for using server data JavaScript is as follows:

<script>Import Bootpage from './components/bootpage.vue 'ExportDefault{data () {Return{lenarr: [10, 50, 100],//Each page shows the length setting Pagelen:5,//Number of page URLs that can be displayed: '/bootpage/',//Request path param: {},// pass parameters to the server tablelist: [] / / pagination component returned after paging data this. $refs. Page.refresh () // Here's a table refresh feature. Span style= "COLOR: #000000" >}}, components: {bootpage}, events: {// The paging component returns the table data (this is the data returned by the server) '  This.tablelist = data}, // Refresh Data ' refresh '  () {this           

Note: In addition to the array contents of the Component table, the server needs a key name of the total number of pages, named Page_num

The parameters passed to the server by the component are:

{    // Current page    length:5  // page show number}   

The parameters of the server callback should be:

{    // table Data    page_num:5  // Total pages}   

Component Source Code

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

Here in advance to wake up: Because this component is I use a few hours out, so for the Vue component format and specifications are certainly considered ill-conceived, not completely independent, so consciously pits, here only for sharing.

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 chatty paging component is still relatively complex.

We are welcome to comment.

Reprint please specify from--public number: Front hula hoop (love-fed)

Vue.js-based Table paging component