95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="paginationInfo.pages > 0"
|
||
|
|
class="d-flex align-items-center mb-4"
|
||
|
|
:class="pagination.alignment['between']"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<span>{{
|
||
|
|
paginationInfo.offset * paginationInfo.limit + paginationInfo.limit
|
||
|
|
}}</span>
|
||
|
|
<span> - </span>
|
||
|
|
<span>{{ paginationInfo.offset * paginationInfo.limit }}</span>
|
||
|
|
<span> از </span>
|
||
|
|
<span>{{ paginationInfo.total }}</span>
|
||
|
|
<span> رکورد</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center ">
|
||
|
|
<div class="form-group d-flex align-items-center ml-3 mb-0">
|
||
|
|
<label for="exampleFormControlSelect1" class="no-wrap mx-2 mb-0">
|
||
|
|
تعداد سطرها
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<select
|
||
|
|
v-model="paginationInfo.limit"
|
||
|
|
@change="limitChanged"
|
||
|
|
class="form-control"
|
||
|
|
id="exampleFormControlSelect1"
|
||
|
|
>
|
||
|
|
<option :value="5">5</option>
|
||
|
|
<option :value="10">10</option>
|
||
|
|
<option :value="15">15</option>
|
||
|
|
<option :value="20">20</option>
|
||
|
|
<option :value="25">25</option>
|
||
|
|
<option :value="50">50</option>
|
||
|
|
<option :value="75">75</option>
|
||
|
|
<option :value="100">100</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<paginate
|
||
|
|
v-model="paginationInfo.page"
|
||
|
|
:page-count="paginationInfo.pages"
|
||
|
|
:page-range="3"
|
||
|
|
:margin-pages="2"
|
||
|
|
:click-handler="clickCallback"
|
||
|
|
:prev-text="'قبلی'"
|
||
|
|
:next-text="'بعدی'"
|
||
|
|
:last-button-text="'آخر'"
|
||
|
|
:first-button-text="'ابتدا'"
|
||
|
|
:container-class="pagination.containerClass"
|
||
|
|
:page-class="pagination.pageClass"
|
||
|
|
:page-link-class="pagination.linkClass"
|
||
|
|
:prev-class="pagination.prevClass"
|
||
|
|
:prev-link-class="pagination.prevLinkClass"
|
||
|
|
:next-class="pagination.nextClass"
|
||
|
|
:next-link-class="pagination.nextLinkClass"
|
||
|
|
>
|
||
|
|
</paginate>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import tableAndListMixin from "../mixins/tableAndListMixin";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
paginationInfo:{
|
||
|
|
default(){
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.my-handle {
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .sortable-ghost {
|
||
|
|
// visibility: hidden;
|
||
|
|
// opacity: 0;
|
||
|
|
// display: none;
|
||
|
|
// }
|
||
|
|
// .sortable-choosen {
|
||
|
|
// visibility: hidden;
|
||
|
|
// opacity: 0;
|
||
|
|
// display: none;
|
||
|
|
// }
|
||
|
|
</style>
|