Element-ui pagination with table

Hi @msslgomez

I never used this package but based on the documentation you need to pass the total items (you already do this), current-page number and page-size, based on those variables the pagination can create the pager.

Example, you have 45 items, you want to show 10 items on a page. So you pass

Total: 45

Page-size: 10

current-page: 1

You will see something like 1 | 2 | 3 | 4 | 5

If you click on another page item, event handleCurrentChange will triggered.

handleCurrentChange(val) {
    console.log(`current page: ${val}`);      
},

Based on the new current page you can do an axios request for example and getting the next/previous 10 items for in you table. I assume :data="displayData" is the data for in el-table?

Something like:

handleCurrentChange(val) {

 axios.get("your-url-to-get-new-data?page=" + ${val})
        .then(response => {
            // update displayData
        })     
},

This is the solution I got working, (from an example online). I get all the items from the db and send them so I wouldn't have to be calling back to the controller everytime I change the page, I just circle through the data that is already there.

<el-table
    :data="displayData"
    style="width: 100%">
    <el-table-column
        prop="name"
        label="Nombre">
    </el-table-column>             
</el-table>

<div style="text-align: center">
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="categories.length">
    </el-pagination>
</div>


data() {
    return {
        page: 1,
        pageSize: 4
    }
},
computed: {
    displayData() {
        if (!this.categories || this.categories.length === 0) return [];

        return this.categories.slice(this.pageSize * this.page - this.pageSize, this.pageSize * this.page)
    }
},
methods: {
    handleCurrentChange(val) {
        console.log(`current page: ${val}`);
        this.page = val;
    },
}

Would you mind checking out this other question, I want to also combine a search along with this https://laracasts.com/discuss/channels/vue/element-ui-table-combine-pagination-and-search

@msslgomez you already have solved this(I see your answer as solved in your other topic) ?

@mvd yea I figured it out yesterday, thanks for taking a look anyway!