Vue.js-based Table paging component

There is a period of time not updated articles, mainly because they have been busy learning new things and forget to share, is really ashamed.

This is not, in the middle of the night to post a more article, to share a self-written Vue a small component, called Bootpage.

Do not know vue.js children's shoes can step into my previous article "talking about Vue.js" to understand.

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:

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= "Col-sm-12 pull-right">                        <Boot-page: Async= "false":d ATA= "Lists": Lens= "Lenarr":p Age-len= "Pagelen"></Boot-page>                    </Div>                </TD>            </TR>        </tfoot>    </Table>

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 paged tables, lens is an array of rows for each 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],//Display length settings per pagePagelen:5,//Number of pages that can be displayedlists: [{num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}, {num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}, {num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}, {num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}, {num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}, {num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}                    ], //tabular raw data, using server data without usingTablelist: []//Paged Component returns the paged data}}, components: {bootpage}, events: { //tabular data returned by the paging component' Data '(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:

<: 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],//Display length settings per pagePagelen:5,//Number of pages that can be displayedURL: '/bootpage/',//Request PathParam: {},//passing parameters to the serverTablelist: []//Paged Component returns the paged data}}, methods: {Refresh () { This. $broadcast (' Refresh ')//a table refresh function is provided here.}}, components: {bootpage}, events: { //table data returned by the paging component (this is the data returned by the server)' Data '(data) { This. tablelist =Data}} }</script>

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

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.

Original articles, reproduced please note from a radish a pit-blog Park [Http://www.cnblogs.com/luozhihao]

This address: http://www.cnblogs.com/luozhihao/p/5516065.html

This article was posted synchronously at: 1190000005174322

Vue.js-based Table paging component