├── babel.config.js
├── src
    ├── assets
    │   └── images
    │   │   ├── sort_asc.png
    │   │   ├── sort_both.png
    │   │   ├── sort_desc.png
    │   │   ├── sort_asc_disabled.png
    │   │   └── sort_desc_disabled.png
    ├── index.js
    ├── composables
    │   └── useFetch.js
    ├── table
    │   ├── General.vue
    │   ├── Body.vue
    │   └── Header.vue
    ├── Header.vue
    ├── Main.vue
    └── Footer.vue
├── .gitignore
├── LICENSE
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/images/sort_asc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonprimedev/jl-datatable/HEAD/src/assets/images/sort_asc.png


--------------------------------------------------------------------------------
/src/assets/images/sort_both.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonprimedev/jl-datatable/HEAD/src/assets/images/sort_both.png


--------------------------------------------------------------------------------
/src/assets/images/sort_desc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonprimedev/jl-datatable/HEAD/src/assets/images/sort_desc.png


--------------------------------------------------------------------------------
/src/assets/images/sort_asc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonprimedev/jl-datatable/HEAD/src/assets/images/sort_asc_disabled.png


--------------------------------------------------------------------------------
/src/assets/images/sort_desc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonprimedev/jl-datatable/HEAD/src/assets/images/sort_desc_disabled.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import component from './Main.vue'
 2 | import "bootstrap/dist/css/bootstrap.min.css";
 3 | 
 4 | function install(Vue) {
 5 |     if (install.installed) return
 6 |     install.installed = true
 7 |     Vue.component('Main', component)
 8 | }
 9 | 
10 | const plugin = {
11 |     install,
12 | }
13 | 
14 | let GlobalVue = null
15 | if (typeof window !== 'undefined') {
16 |     GlobalVue = window.Vue
17 | } else if (typeof global !== 'undefined') {
18 |     GlobalVue = global.vue
19 | }
20 | 
21 | if (GlobalVue) {
22 |     GlobalVue.use(plugin)
23 | }
24 | 
25 | component.install = install
26 | 
27 | export default component


--------------------------------------------------------------------------------
/src/composables/useFetch.js:
--------------------------------------------------------------------------------
 1 | export default function (endpoint, options = {}){
 2 |     
 3 |     const sendRequest = async() => {
 4 |         try{            
 5 |             if(Object.keys(options).length === 0){
 6 |                 options = {
 7 |                     method: 'GET',
 8 |                     headers: {
 9 |                         'Content-Type': 'application/json'
10 |                     }
11 |                 };
12 |             }            
13 |             const request = await fetch(endpoint, options);
14 |             return await request.json();
15 |         }catch(e){
16 |             throw e;            
17 |         }
18 |     }
19 | 
20 |     return { sendRequest };
21 | }


--------------------------------------------------------------------------------
/src/table/General.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <table class="table table-hover table-responsive align-middle">
 3 |         <Header
 4 |             :columns="columns"
 5 |             :order="order"
 6 |             @onUpdatedOrder="onUpdatedOrder"
 7 |         />
 8 |         <Body
 9 |             :columns="columns"
10 |             :rows="rows"
11 |         />
12 |     </table>            
13 | </template>
14 | <script>
15 | import Header from './Header.vue';
16 | import Body from './Body.vue';
17 | export default {
18 |     name: 'Table',
19 |     props: {
20 |         columns: Array,
21 |         order: Object,
22 |         rows: Array
23 |     },
24 |     components: {
25 |         Header,
26 |         Body
27 |     },
28 |     emits: ['onUpdatedOrder'],
29 |     setup(props, { emit }){
30 |         const onUpdatedOrder = (value) => {            
31 |             emit('onUpdatedOrder', value);
32 |         }
33 |         return { onUpdatedOrder }
34 |     }
35 | }
36 | </script>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Jhoni Larico
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/table/Body.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <tbody>
 3 |         <template v-for="(row, index) in rows" :key="index">
 4 |             <tr>
 5 |                 <template v-for="(column, index2) in columns" :key="index2">
 6 |                     <template v-if="Object.keys(row).find(data => data === column.data)">
 7 |                         <td>{{ row[column.data] }}</td>                        
 8 |                     </template>
 9 |                     <template v-else-if="column.component">
10 |                         <td>
11 |                             <component                                                                    
12 |                                 :is="column.component" 
13 |                                 :row="row"
14 |                                 :column="column"                                
15 |                             ></component>
16 |                         </td>
17 |                     </template>
18 |                 </template>
19 |             </tr>
20 |         </template>
21 |     </tbody>
22 | </template>
23 | <script>
24 | export default {
25 |     name: 'Body',
26 |     props: {
27 |         rows: Array,
28 |         columns: Array
29 |     }
30 | }
31 | </script>


--------------------------------------------------------------------------------
/src/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="d-flex flex-column flex-lg-row align-items-center justify-content-between">
 3 |         <div class="row">
 4 |             <div class="col-auto">
 5 |                 <label for="inputSearch">Show</label>
 6 |             </div>
 7 |             <div class="col-auto">
 8 |                 <select class="form-select form-select-sm" v-model="length" @change="updatedMenu()" >
 9 |                     <option v-for="menu in lengthMenu" :key="menu" :value="menu">{{ menu }}</option>
10 |                 </select>
11 |             </div>
12 |             <div class="col-auto">
13 |                 <label for="inputSearch" class="col-form-label">Entries</label>
14 |             </div>
15 |         </div>
16 |         <div class="row">
17 |             <div class="col-auto">
18 |                 <label class="col-form-label">Search</label>
19 |             </div>
20 |             <div class="col-auto">
21 |                 <input type="search" class="form-control form-control-sm" v-model="search" @input="updatedSearch()" />
22 |             </div>
23 |         </div>
24 |     </div>
25 | </template>
26 | <script>
27 | import debounce from 'lodash/debounce';
28 | import {ref} from 'vue';
29 | export default {
30 |     name: 'Header',
31 |     props: {
32 |         length: {
33 |             type: Number,
34 |             default: 10
35 |         },
36 |         lengthMenu: Array
37 |     },
38 |     emits: ['onUpdatedMenu', 'onUpdatedSearch'],
39 |     setup(props, { emit }){
40 |         const search = ref('');
41 | 
42 |         const updatedMenu = () => {
43 |             emit('onUpdatedMenu', props.length);
44 |         }
45 | 
46 |         const updatedSearch = debounce(function() {            
47 |             emit('onUpdatedSearch', search);
48 |         }, 500);
49 | 
50 |         return { search, updatedMenu, updatedSearch }
51 |     }
52 |     
53 | }
54 | </script>


--------------------------------------------------------------------------------
/src/table/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <thead class="table-light">
 3 |         <tr>
 4 |             <template v-for="(column, index) in columns" :key="index">
 5 |                 <th data-sortable="true" @click="sort(index)">
 6 |                     <span>{{ column.label }}</span>
 7 |                     <img v-if="isSort(index)" :src="imgSort(index)" >
 8 |                 </th>                
 9 |             </template>
10 |         </tr>
11 |     </thead>
12 | </template>
13 | <script>
14 | import imgSortAsc from '../assets/images/sort_asc.png';
15 | import imgSortDesc from '../assets/images/sort_desc.png';
16 | import imgSortBoth from '../assets/images/sort_both.png';
17 | import { reactive } from 'vue';
18 | export default {
19 |     props: {
20 |         columns: Array,
21 |         order: Object
22 |     },
23 |     emits: ['onUpdatedOrder'],
24 |     setup(props, { emit }){
25 |         const data = reactive({
26 |             column: props.order.column,
27 |             dir: props.order.dir,            
28 |         });
29 | 
30 |         const sortStr = {
31 |             asc: 'ASC',
32 |             desc: 'DESC'
33 |         };
34 | 
35 |         const sort = (index = 0) => {        
36 |             if(isSort(index)){
37 |                 if(data.column === index){                
38 |                     if(data.dir === sortStr.asc){                    
39 |                         data.dir = sortStr.desc;
40 |                     }else {                
41 |                         data.dir = sortStr.asc;
42 |                     }
43 |                 }else{                
44 |                     data.dir = sortStr.asc;
45 |                 }            
46 |                 data.column = index;          
47 |                 emit('onUpdatedOrder', {...data});                
48 |             }            
49 |         };
50 | 
51 |         const imgSort = (index = 0, dir = sortStr.asc) => {
52 |             return data.column === index ? (data.dir === dir ? imgSortAsc : imgSortDesc) : imgSortBoth;                                        
53 |         };
54 | 
55 |         const isSort = (index) => {
56 |             return props.columns[index].orderable !== false;
57 |         }
58 | 
59 |         return {                  
60 |             sort,
61 |             imgSort,
62 |             isSort            
63 |         }
64 |     }
65 | }
66 | </script>
67 | 
68 | <style lang="css" scoped>
69 |     th:hover {
70 |         cursor: pointer;
71 |     }
72 | </style>>
73 |     
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jl-datatable",
 3 |   "description": "A datatable server side rendering mode - Vue JS 3 ⚙️",
 4 |   "version": "1.1.1",
 5 |   "private": false,
 6 |   "main": "dist/jl-datatable.umd.js",
 7 |   "module": "dist/jl-datatable.esm.js",
 8 |   "unpkg": "dist/jl-datatable.min.js",
 9 |   "browser": {
10 |     "./sfc": "src/Main.vue"
11 |   },
12 |   "files": [
13 |     "dist/*",
14 |     "src/*"
15 |   ],
16 |   "scripts": {
17 |     "lint": "vue-cli-service lint",
18 |     "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
19 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/jl-datatable.umd.js",
20 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/jl-datatable.esm.js",
21 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/jl-datatable.min.js"
22 |   },
23 |   "keywords": [
24 |     "vue3",
25 |     "vue",
26 |     "vue-data-table",
27 |     "datatable-server-side",
28 |     "grid",
29 |     "datatable",
30 |     "pagination",
31 |     "vue component"
32 |   ],
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "https://github.com/jhonijlm/jl-datatable"
36 |   },
37 |   "bugs": {
38 |     "url": "https://github.com/jhonijlm/jl-datatable/issues"
39 |   },
40 |   "homepage": "",
41 |   "author": "Jhoni Larico <jhoni.jlm97@gmail.com>",
42 |   "license": "MIT",
43 |   "dependencies": {
44 |     "bootstrap": "^5.1.3",
45 |     "core-js": "^3.23.1",
46 |     "lodash": "^4.17.21",
47 |     "qs": "^6.10.5",
48 |     "vue": "^3.2.37"
49 |   },
50 |   "devDependencies": {
51 |     "@vue/cli-plugin-babel": "~5.0.6",
52 |     "@vue/cli-plugin-eslint": "~5.0.6",
53 |     "@vue/cli-service": "~5.0.6",
54 |     "@vue/compiler-sfc": "^3.2.37",
55 |     "babel-eslint": "^10.1.0",
56 |     "eslint": "^8.17.0",
57 |     "eslint-plugin-vue": "^9.1.1",
58 |     "rollup": "^2.75.6",
59 |     "rollup-plugin-image-files": "^1.4.2",
60 |     "rollup-plugin-postcss": "^4.0.2",
61 |     "rollup-plugin-terser": "^7.0.2",
62 |     "rollup-plugin-vue": "^6.0.0"
63 |   },
64 |   "eslintConfig": {
65 |     "root": true,
66 |     "env": {
67 |       "node": true
68 |     },
69 |     "extends": [
70 |       "plugin:vue/vue3-essential",
71 |       "eslint:recommended"
72 |     ],
73 |     "parserOptions": {
74 |       "parser": "babel-eslint"
75 |     },
76 |     "rules": {}
77 |   },
78 |   "browserslist": [
79 |     "> 1%",
80 |     "last 2 versions",
81 |     "not dead"
82 |   ]
83 | }
84 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">JL Datatable</h1>
 2 | 
 3 | <p align="center"><strong>A datatable server side rendering mode made with Vue JS 3</strong> ⚙️</p>
 4 | 
 5 | 
 6 | ![capture](https://user-images.githubusercontent.com/29264001/141651144-c1f7c920-e36c-4b0e-9c13-448ef603c92d.png)
 7 | 
 8 | 
 9 | ## 🚀 There is an online demo:
10 | 
11 | ### Front End  👉 [Repository Github](https://github.com/jhonijlm/vuejs-datatable-app)
12 | 
13 | ### Backend with Laravel 👉 [Repository Github](https://github.com/jhonijlm/laravel-datatable-api)
14 | 
15 | 
16 | ## Basic usage
17 | ```html
18 | <jl-datatable
19 |     :url='http://localhost/api/users'
20 |     :columns="[
21 |         {
22 |             label: 'ID',
23 |             data: 'id'
24 |         },   
25 |         {
26 |             label: 'Name',
27 |             data: 'name' 
28 |         },
29 |         {
30 |             label: 'Last Name',
31 |             data: 'last_name'
32 |         },    
33 |     ]"  
34 | />
35 | ```
36 | 
37 | ## Installing
38 | Install the JlDatatable package:
39 | ```sh
40 | npm install jl-datatable
41 | # or
42 | yarn add jl-datatable
43 | ```
44 | 
45 | Register it as you usually would:
46 | ```js
47 | import {createApp } from 'vue'
48 | import App from './App.vue'
49 | 
50 | import JlDatatable from 'jl-datatable'
51 | 
52 | const app = createApp(App)
53 | 
54 | app.component('jl-datatable', JlDatatable)
55 | 
56 | app.mount('#app')
57 | ```
58 | ### Props - General
59 | 
60 | Property Name | Type | Required | Default Value | Description
61 | --- | --- | --- | --- | ---
62 | `url` | String | Yes | NULL | URL to get entries.
63 | `requestOptions` | Object | No | `{method: 'GET'}` | Allows to add more parameters in the request to be made to the server.
64 | `columns` | Array Object | Yes | `[]` | 	An array of objects that specifies how to render each column.
65 | `pageLength` | Integer | No | `10` | Length of records shown in the table.
66 | `lengthMenu` | Array Integer | No | `[10, 25, 50, 100]` | List of lengths for the menu to display in the table.
67 | `order` | Object | No | `{ column: 0, dir: 'ASC'}` | Sort the records, for sort you have two options of ascending (ASC) and descending (DESC) sorting.
68 | `reset` | String | No | NULL | Reset the data from the datatable. Only a random string different from the previous one should be sent.
69 | 
70 | 
71 | ### Prop: `columns`
72 | Property Name | Type | Required | Default Value | Description
73 | --- | --- | --- | --- | ---
74 | `label` | String | Yes | NULL | Is what is shown in the table header.
75 | `data` | String | Yes | NULL | Allows to identify the data to be obtained by means of key and value.
76 | `orderable` | Boolean | No | `True` | If true, sorting is activated for the column.
77 | `searchable` | Boolean | No | `True` |  If true, the search for the column is activated.
78 | `component` | Object | No | NULL | Allows you to add a component, e.g. edit and delete buttons.
79 | 
80 | ### Events
81 | Name | Return | Description
82 | --- | --- | --- 
83 | `gettingEntries` | Object | Returns the request to be made to the server.
84 | `entriesFetched` | Object | Returns the request made to the server and the data.
85 | ## License
86 | 
87 | MIT


--------------------------------------------------------------------------------
/src/Main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <Header 
  3 |         :lengthMenu="lengthMenu"
  4 |         :length="length"
  5 |         @onUpdatedMenu="onUpdatedMenu"
  6 |         @onUpdatedSearch="onUpdatedSearch"
  7 |     />
  8 |     <div class="row">
  9 |         <Table
 10 |             :columns="columns"
 11 |             :order="order"
 12 |             :rows="rows"
 13 |             @onUpdatedOrder="onUpdatedOrder"
 14 |         />
 15 |         <Footer
 16 |             :length="length"
 17 |             :start="start"
 18 |             :recordsFiltered="recordsFiltered"
 19 |             :recordsTotal="recordsTotal"
 20 |             @onUpdatedPagination="onUpdatedPagination"
 21 |         />
 22 |     </div>    
 23 | </template>
 24 | <script>
 25 | import Header from './Header.vue';
 26 | import Footer from './Footer.vue';
 27 | import Table from './table/General.vue';
 28 | import { onMounted, reactive, toRefs, watch } from 'vue';
 29 | import useFetch from './composables/useFetch';
 30 | import qs from 'qs' 
 31 | export default {
 32 |     name:'JlDatatable',
 33 |     props: {
 34 |         url: String,
 35 |         requestOptions: {
 36 |             type: Object,
 37 |             default: {}
 38 |         },
 39 |         columns: Array,
 40 |         order: {
 41 |             type: Object,
 42 |             default: {
 43 |                 column: 0,
 44 |                 dir: 'ASC'
 45 |             }
 46 |         },
 47 |         pageLength: {
 48 |             type: Number,
 49 |             default: 10
 50 |         },
 51 |         lengthMenu: {
 52 |             type: Array,
 53 |             default: [10, 25, 50, 100]
 54 |         },
 55 |         reset: String
 56 |     },
 57 |     emits: ['gettingEntries', 'entriesFetched'],
 58 |     components: {
 59 |         Footer,
 60 |         Header,
 61 |         Table
 62 |     },
 63 |     setup(props, { emit} ){
 64 | 
 65 |         const data = reactive({
 66 |             columns: props.columns,
 67 |             length: props.pageLength,
 68 |             start: 0,
 69 |             search: '',
 70 |             order: props.order,
 71 |             start: 0,
 72 |             recordsFiltered: 0,
 73 |             recordsTotal: 0,
 74 |             rows: []
 75 |         });
 76 | 
 77 |         const onUpdatedMenu = (value) => {
 78 |             data.length = value;
 79 |             data.start = 0;
 80 |             getData();
 81 |         }
 82 | 
 83 |         const onUpdatedSearch = (value) => {
 84 |             data.search = value;
 85 |             data.start = 0; // reset
 86 |             getData();
 87 |         }
 88 | 
 89 |         const onUpdatedOrder = (value) => {
 90 |             data.order = value;
 91 |             data.start = 0; // reset
 92 |             getData();
 93 |         }
 94 | 
 95 |         const onUpdatedPagination = (value) => {            
 96 |             data.start = value;            
 97 |             getData();
 98 |         }
 99 | 
100 |         const getData = async() => {
101 |             const parameters = {
102 |                 columns: [...data.columns].map(columnsMap),                
103 |                 length: data.length,
104 |                 search: data.search,
105 |                 order: data.order,
106 |                 start: data.start
107 |             };
108 |             
109 |             const stringParams = qs.stringify(parameters, { encode: false });
110 | 
111 |             const endpoint = `${props.url}?${stringParams}`;            
112 |             const request = await useFetch(endpoint, {...props.requestOptions});
113 |             emit('gettingEntries');
114 |             const response = await request.sendRequest();
115 |             emit('entriesFetched');
116 |             data.rows = response.data;
117 |             data.recordsFiltered = response.recordsFiltered;
118 |             data.recordsTotal = response.recordsTotal;            
119 |         }
120 |         
121 |         const columnsMap = (column) => {
122 |             const newColumn =  {...column};
123 |             if(!newColumn.hasOwnProperty('orderable')){
124 |                 newColumn.orderable = true;
125 |             }
126 |             if(!newColumn.hasOwnProperty('searchable')){
127 |                 newColumn.searchable = true;
128 |             }
129 |             if(newColumn.hasOwnProperty('component')){                
130 |                 delete newColumn.component; 
131 |             }
132 |             return newColumn;
133 |         }
134 | 
135 |         const updatedReset = () => {
136 |             data.columns = props.columns;
137 |             data.length = props.pageLength;
138 |             data.order = props.order;          
139 |             data.start = 0;
140 |             data.search = '';
141 |             data.recordsFiltered = 0;
142 |             data.recordsTotal = 0;
143 |             data.rows = [];
144 |         }
145 | 
146 |         onMounted(async () => {
147 |             getData();
148 |         });
149 | 
150 |         watch(() => props.reset, (first, second) => {              
151 |             updatedReset();            
152 |             getData();
153 |         });
154 | 
155 |         return {
156 |             ...toRefs(data),
157 |             onUpdatedMenu,
158 |             onUpdatedSearch,
159 |             onUpdatedOrder,
160 |             onUpdatedPagination            
161 |         }
162 |     }
163 | }
164 | </script>


--------------------------------------------------------------------------------
/src/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="d-flex flex-column flex-lg-row align-items-center justify-content-between">
  3 |         <div>Showing {{ startF }} to {{ toF }} of {{ recordsFiltered }} entries {{ filteredStr }}</div>
  4 |         <nav>
  5 |             <ul class="pagination">
  6 |                 <li class="page-item" :class="before.class">
  7 |                     <a class="page-link"  @click="updatedPagination(before)" >Previous</a>
  8 |                 </li>
  9 |                 <li v-for="(pagination, index) in paginations" :key="index"  class="page-item" :class="pagination.class">
 10 |                     <a class="page-link"  @click="updatedPagination(pagination)">{{ pagination.number }}</a>
 11 |                 </li>                
 12 |                 <li class="page-item" :class="next.class">
 13 |                     <a class="page-link" @click="updatedPagination(next)" >Next</a>
 14 |                 </li>
 15 |             </ul>
 16 |         </nav>
 17 |     </div>    
 18 | </template>
 19 | <script>
 20 | import { reactive, toRefs, watch } from 'vue';
 21 | export default {
 22 |     name: 'Footer',
 23 |     props: {
 24 |         length: Number,
 25 |         start: Number,
 26 |         recordsFiltered: Number,
 27 |         recordsTotal: Number
 28 |     },
 29 |     emits: ['onUpdatedPagination'],
 30 |     setup(props, { emit }){
 31 |         
 32 |         const data = reactive({
 33 |             paginations: [],
 34 |             start: props.start,
 35 |             length: props.length,            
 36 |             number: 1,
 37 |             next: {
 38 |                 number: 0,
 39 |                 class: 'disabled'
 40 |             },
 41 |             before: {
 42 |                 number: 0,
 43 |                 class: 'disabled'
 44 |             },
 45 |             startF: 0,
 46 |             toF: 0,
 47 |             filteredStr: ''
 48 |         })
 49 | 
 50 |         const getPaginations = () => {
 51 |             
 52 |             let paginationsCount = Math.ceil(data.recordsFiltered / data.length);
 53 |             let listPaginations = [...Array(paginationsCount - 1 + 1).keys()].map(x => x + 1);
 54 |             if(listPaginations.length > 7){
 55 | 
 56 |                 // to initlal
 57 |                 if(data.number >= 1 && data.number <= 4){
 58 |                     listPaginations = [...listPaginations.slice(0, 5), 0, listPaginations.at(-1)];
 59 |                 }else if(data.number <=  listPaginations.at(-1) && data.number >= listPaginations.at(-4)){
 60 |                     // to final
 61 |                     listPaginations = [listPaginations.at(0), 0, ...listPaginations.slice(listPaginations.at(-1) - 5, listPaginations.at(-1))];
 62 |                 }else {
 63 |                     // to mid
 64 |                     listPaginations = [listPaginations.at(0), 0, ...listPaginations.slice(data.number -2, data.number + 1) , 0, listPaginations.at(-1)];
 65 |                 }             
 66 |             }
 67 |             
 68 |             data.paginations = listPaginations.map((pagination) => {
 69 |                 return {
 70 |                     number: pagination != 0 ? pagination : '...',
 71 |                     class: pagination != 0 ? data.number == pagination ? 'active' : '': 'disabled'                    
 72 |                 }
 73 |             });
 74 |             
 75 |             const before = data.paginations.find(p => p.class == 'active' && p.number > 1);            
 76 |             const next = data.paginations.find(p => p.class == 'active' && p.number < data.paginations.at(-1).number);
 77 |             if(before){
 78 |                 data.before.number = before.number - 1;
 79 |                 data.before.class = '';
 80 |             }else{
 81 |                 data.before = {
 82 |                     number: 0,
 83 |                     class: 'disabled'
 84 |                 };
 85 |             }
 86 | 
 87 |             if(next){
 88 |                 data.next.number = next.number + 1;
 89 |                 data.next.class = '';
 90 |             }else{
 91 |                 data.next = {
 92 |                     number: 0,
 93 |                     class: 'disabled'
 94 |                 };
 95 |             }
 96 |             
 97 |             // footer string
 98 |             if(data.number == listPaginations.at(-1)){                
 99 |                 data.startF = data.start + 1;
100 |                 data.toF = data.recordsFiltered;
101 |             }else{
102 |                 data.startF = data.start + 1;
103 |                 data.toF = data.number * data.length;
104 |             }
105 | 
106 |             // footer strinf filtered            
107 |             data. filteredStr = data.recordsFiltered != data.recordsTotal ? `(filtered from ${data.recordsTotal} total entries)` : '';
108 |         }
109 | 
110 |         const updatedPagination = (pagination) => {            
111 |             if(pagination.number != '...' && data.number != pagination.number){                
112 |                 data.number = pagination.number;                
113 |                 data.start = (data.length * pagination.number) - data.length;
114 |                 
115 |                 emit('onUpdatedPagination', data.start);
116 |             }
117 |         }
118 | 
119 | 
120 |         watch(props, () => {         
121 |             if(data.start != props.start){
122 |                 data.number = 1;
123 |             }
124 | 
125 |             data.start = props.start; 
126 |             data.recordsFiltered = props.recordsFiltered; 
127 |             data.recordsTotal = props.recordsTotal; 
128 |             data.length = props.length; 
129 |             getPaginations();
130 |         });
131 | 
132 |         return {
133 |             ...toRefs(data),
134 |             updatedPagination
135 |         }
136 |     }
137 | }
138 | </script>
139 | 
140 | <style lang="css" scoped>
141 |     li {
142 |         cursor: pointer;
143 |     }
144 | </style>>
145 |     
146 | 


--------------------------------------------------------------------------------