Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Pagination on data table #6373

Open
cgarnier opened this issue Aug 9, 2017 · 19 comments
Open

[Feature Request] Pagination on data table #6373

cgarnier opened this issue Aug 9, 2017 · 19 comments

Comments

@cgarnier
Copy link

@cgarnier cgarnier commented Aug 9, 2017

Existing Component

Yes

Component Name

Table

Description

Need a way to paginate the data table. Pagination should take care of orders and filters.

@qidaizhe11 qidaizhe11 mentioned this issue Oct 23, 2017
0 of 3 tasks complete
@qidaizhe11

This comment has been minimized.

Copy link
Contributor

@qidaizhe11 qidaizhe11 commented Oct 23, 2017

I've added a pull request for 2.0 version. For those who need this feature, you can also use my custom wrapper instead, element-table-wrapper, just a simple high-order component based on el-table and el-pagination, nearly the same use as el-table, support 1.x verson of Element-ui. I'll maintain 2.0 version when it's stable.

@philippe-bourdeau

This comment has been minimized.

Copy link

@philippe-bourdeau philippe-bourdeau commented Mar 26, 2018

What if el-table had current-page and page-size props, these being already managed by el-pagination.

Any thoughts ?

@AGPDev

This comment has been minimized.

Copy link

@AGPDev AGPDev commented Apr 6, 2018

I think is very important!

@kevrousso

This comment has been minimized.

Copy link

@kevrousso kevrousso commented May 17, 2018

+1

7 similar comments
@argotri

This comment has been minimized.

Copy link

@argotri argotri commented May 19, 2018

+1

@jaime-marcondes

This comment has been minimized.

Copy link

@jaime-marcondes jaime-marcondes commented May 27, 2018

+1

@thibaultvanluchene

This comment has been minimized.

Copy link

@thibaultvanluchene thibaultvanluchene commented May 30, 2018

+1

@Va2

This comment has been minimized.

Copy link

@Va2 Va2 commented May 30, 2018

+1

@bernardobelchior

This comment has been minimized.

Copy link

@bernardobelchior bernardobelchior commented Jun 17, 2018

+1

@haegemon

This comment has been minimized.

Copy link

@haegemon haegemon commented Jun 27, 2018

+1

@thibaultvanluchene

This comment has been minimized.

Copy link

@thibaultvanluchene thibaultvanluchene commented Jun 27, 2018

+1

@gustawdaniel

This comment has been minimized.

Copy link

@gustawdaniel gustawdaniel commented Jul 8, 2018

In vue-element-admin there is example of pagination

http://panjiachen.github.io/vue-element-admin/#/table/complex-table

Unfortunately it is paginated by back-end. I think it would be nice to have pure front-end pagination.


Anyway

There is package dedicated for pagination and tables

https://github.com/zollero/el-search-table-pagination

with English and Chinese docs.

@aaabinbin

This comment has been minimized.

Copy link

@aaabinbin aaabinbin commented Aug 16, 2018

+1

2 similar comments
@maurocardoselli

This comment has been minimized.

Copy link

@maurocardoselli maurocardoselli commented Aug 29, 2018

+1

@zyh961117

This comment has been minimized.

Copy link

@zyh961117 zyh961117 commented Sep 18, 2018

+1

@gustawdaniel

This comment has been minimized.

Copy link

@gustawdaniel gustawdaniel commented Sep 19, 2018

This feature is so important that I switched from eleme.io to vuetify

https://vuetifyjs.com/en/components/data-tables

In my opinion this project can copy interface from data table proposed by vuetify. Eleme.io looks better but in aspect of tables with searching and pagination vuetify is more practical.

What creators/contributors and community of eleme.io thins about this proposition?

@efegurkan07

This comment has been minimized.

Copy link

@efegurkan07 efegurkan07 commented Oct 16, 2018

Why this is not implemented yet?

@zrk

This comment has been minimized.

Copy link

@zrk zrk commented Jun 21, 2019

If we just had a filtering API like in Tree component, for the row filtering to be initiated not only by user clicking controls...

I think pagination would've been a piece of cake: just filtering out the rows not in range.
(And the range is maintained by Pagination component).

See #3308

@mrkaluzny

This comment has been minimized.

Copy link

@mrkaluzny mrkaluzny commented Dec 6, 2019

Hi guys!

I had to write a logic for filtering and supporting pagination. This could and should be cleaner, but it works if anyone needs some code to start with 😃

here's a snippet:

// Attach this to @filter-change on table (remember to add column-key for table-column)
handleFilterChange(e) {
      const propertyName = Object.getOwnPropertyNames(e)[0]
      const value = e[propertyName]
      this.filters[propertyName] = value
      this.filterAndChunkList()
   },

// Chunks list into pages
chunkList(list) {
      const result = []
      var i, j, temparray, chunk = this.listQuery.limit;
      for (i = 0, j = list.length; i < j; i += chunk) {
        temparray = list.slice(i, i + chunk);
        result.push(temparray)
      }
      this.chunkedList = result
      this.listQuery.page = 1  // Always return to first chunk
  },

filterAndChunkList() {
      const filters = this.filters
      const list = this.unfiltered
      var filteredList = []
      let areFiltersActive = false
      var i = 0

      Object.keys(filters).forEach((key) => {
        const filterValues = filters[key]
        let filteredRows

        if (filterValues.length !== 0) {
          areFiltersActive = true
          filterValues.forEach((value, y) => {
            const listToFilter = i === 0 ? list : filteredList
            
            filteredRows = listToFilter.filter(row => row[key] === value)

           // Handle multiple filters, it switches the list based on single/multiple filters
            if (i !== 0 && y === 0) {
              filteredList = filteredRows
            } else {
              filteredList.push(...filteredRows)
            }
          })
        }
       i++
      })

      const result = areFiltersActive ? filteredList : list

      this.list = result
      this.chunkList(result) // Chunk again to provide accurate results
    },

Template to adjust:

  <el-table 
       :data="chunkedList[listQuery.page - 1]" 
       @filter-change="handleFilterChange">

  <el-pagination
      :page-size="listQuery.limit" // Limit
      :hide-on-single-page="true"
      :pager-count="11"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100, 150]"
      :total="list.length" // Size of currently displayed data
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />

data object

return {
      list: '',
      chunkedList: [],
      unfiltered: '',
      filters: {},
      listQuery: {
        page: 1,
        limit: 20,
      },
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.