Comments (8)
ratiw
commented on May 28, 2024
1
@madhusudhan1234 Use :load-on-start="false" prop. You can then force it to load by dispatching vuetable:refresh.
from vue-table.
thekordy
commented on May 28, 2024
Well I don't know if there is an easier way to do it, this is the bootstrap template I ended with:
<template id="vuetable-pagination-bootstrap-template">
<nav>
<ul class="pagination pull-right">
<li class="@{{isOnFirstPage ? disabledClass : ''}}">
<a @click="loadPage('prev')"><i class="glyphicon glyphicon-chevron-left"></i></a>
</li>
<li v-if="tablePagination.current_page > (onEachSide + 1) || tablePagination.current_page - (onEachSide + 1) == 1">
<a @click="loadPage(1)">1</a>
</li>
<li v-if="tablePagination.current_page > (onEachSide + 1) && tablePagination.current_page - (onEachSide + 1) != 1" class="@{{ disabledClass }}">
<a href="#">..</a>
</li>
<template v-for="n in totalPage">
<li class="@{{isCurrentPage(n+1) ? ' active' : ''}}"
v-if="n < (tablePagination.current_page + onEachSide) && n > (tablePagination.current_page - (onEachSide + 2))"
>
<a @click="loadPage(n+1)"> @{{ n+1 }}</a>
</li>
</template>
<li v-if="tablePagination.current_page < (tablePagination.last_page - onEachSide) && tablePagination.current_page + (onEachSide + 1) != tablePagination.last_page" class="@{{ disabledClass }}">
<a href="#">..</a>
</li>
<li v-if="tablePagination.current_page < (tablePagination.last_page - onEachSide) || tablePagination.current_page + (onEachSide + 1) == tablePagination.last_page">
<a @click="loadPage(tablePagination.last_page)">@{{ tablePagination.last_page }}</a>
</li>
<li class="@{{isOnLastPage ? disabledClass : ''}}">
<a @click="loadPage('next')"><i class="glyphicon glyphicon-chevron-right"></i></a>
</li>
</ul>
</nav>
</template>result:
from vue-table.
gurghet
commented on May 28, 2024
This doesn't have the 'first' 'last' shortcuts but it's what I have put as default in my component:
<footer>
<div :class="wrapperClasses">
<a class="icon item" @click="pag('prev')">
<i class="left chevron icon"></i>
</a>
<a v-for="n in 5"
:class="n+offset === currentPage ? (pageButtonClasses + ' disabled') : pageButtonClasses"
@click="pag(n+offset)"
>
{{n+offset}}</a>
<a class="icon item" @click="pag('next')">
<i class="right chevron icon"></i>
</a>
</div>
</footer>
Where I have the computed property offset
computed: {
offset () {
return Math.max(1, Math.min(this.numPages - 4, this.currentPage - 2))
}
}
Or, if you don't want 5 buttons you can use the more general formula
offset (length = 5) {
return Math.max(1, Math.min(this.numPages - (length - 1), Math.round(this.currentPage - length / 2)))
}
from vue-table.
ratiw
commented on May 28, 2024
@thekordy If you just want normal pagination using Bootstrap, you do not have to make your own pagination component anymore. The default pagination (vuetable-pagination) can now work with Bootstrap and is a sliding pagination by default. Please see this example You can also limit the number of links shown using on-each-side prop.
from vue-table.
thekordy
commented on May 28, 2024
@ratiw works very well, thank you very much
from vue-table.
madhusudhan1234
commented on May 28, 2024
I am beginner for vue js, I want to use this vue table.
so can i change the pagination to make it lazy load like when user clicks then only the data should be loaded so js shouldn't load it fully. Thanks in advance.
from vue-table.
madhusudhan1234
commented on May 28, 2024
Thank You For the Help @ratiw
from vue-table.
madhusudhan1234
commented on May 28, 2024
Hey @ratiw , I just added 10 K records and tried it out, It seems ridiculously fast on my localhost. I will try it on server soon. Thank you for the package.
from vue-table.
Related Issues (20)
- Search with a extra data. HOT 6
- problem with scroll HOT 1
- Demo does not work in chrome HOT 4
- Error compiling template!!!! HELP ME!!! HOT 6
- Row totals HOT 3
- Is this an expected behavior of field callback?
- Can't style my grid to fit the content or a specific column HOT 2
- How use it for laravel HOT 1
- cell class cb
- Is it possible to add/del row dynamically? HOT 1
- unable to filter dates HOT 3
- No Data Available HOT 1
- Can I apply paging on client side? HOT 2
- Loading table with pre settings like sorting and page
- The word prev is spelled with the word next by mistake
- Pagination data not being transpile by polyfill
- Can i add `data-xxx` attribute to table head field? HOT 1
- http-fetch not showing data
- how to make columns resizable？
- How to use Cursor-Pagination
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-table.