mgsdatatable 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -114
- package/dist/mgsdatatable.min.js +2 -2
- package/package.json +1 -1
- package/src/index.js +78 -51
package/README.md
CHANGED
|
@@ -15,7 +15,39 @@ A simple, lightweight JavaScript library to create tables with **pagination**, *
|
|
|
15
15
|
|
|
16
16
|
---
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## 📄 Usage via CDN
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
<!DOCTYPE html>
|
|
22
|
+
<html>
|
|
23
|
+
<head>
|
|
24
|
+
<title>mgsDataTable</title>
|
|
25
|
+
<script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.0.8/dist/mgsdatatable.min.js"></script>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<table id="myTable"></table>
|
|
29
|
+
<script>
|
|
30
|
+
mgsDataTable({
|
|
31
|
+
target: "#myTable", // Required
|
|
32
|
+
url: "http://localhost/mgs/users", // Required
|
|
33
|
+
data: {}, // Optional
|
|
34
|
+
methodType: "post", // Optional, default is 'post'
|
|
35
|
+
pageLimits: [10, 20, 30, 50, 100], // Optional
|
|
36
|
+
page: 1, // Optional, default is 1
|
|
37
|
+
limit: 10, // Optional, default is 10
|
|
38
|
+
search: "", // Optional, default is ''
|
|
39
|
+
isLimit: true, // Optional, default is true
|
|
40
|
+
isSearch: true, // Optional, default is true
|
|
41
|
+
isResult: true, // Optional, default is true
|
|
42
|
+
isPagination: true, // Optional, default is true
|
|
43
|
+
isSorting: true // Optional, default is true
|
|
44
|
+
});
|
|
45
|
+
</script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 📦 Installation via NPM
|
|
19
51
|
|
|
20
52
|
```bash
|
|
21
53
|
npm install mgsdatatable
|
|
@@ -23,121 +55,84 @@ npm install mgsdatatable
|
|
|
23
55
|
```
|
|
24
56
|
## after installation then use it-
|
|
25
57
|
|
|
58
|
+
## Example Usage (ES Module) -
|
|
26
59
|
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</script>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
2 ->
|
|
64
|
-
<!DOCTYPE html>
|
|
65
|
-
<html>
|
|
66
|
-
<head>
|
|
67
|
-
<title>mgsDataTable</title>
|
|
68
|
-
</head>
|
|
69
|
-
<body>
|
|
70
|
-
<div id="tableContainer"></div>
|
|
71
|
-
|
|
72
|
-
<script type="module">
|
|
73
|
-
import mgsDataTable from 'mgsdatatable';
|
|
74
|
-
|
|
75
|
-
// Call the function to render table
|
|
76
|
-
mgsDataTable({
|
|
77
|
-
target:"#tableContainer",
|
|
78
|
-
url:'http://localhost/mgs/users',
|
|
79
|
-
data: {},
|
|
80
|
-
methodType:'post', // Optional, default is post
|
|
81
|
-
pageLimits : [10,20,30,50,100], // Optional
|
|
82
|
-
page : 1, // Optional, default is 1
|
|
83
|
-
limit:10, // Optional, default is 10
|
|
84
|
-
column : '', // Optional, default is ''
|
|
85
|
-
sort : 'asc', // Optional, default is asc
|
|
86
|
-
search: '', // Optional, default is ''
|
|
87
|
-
prevPage: null, // Optional, default is null
|
|
88
|
-
nextPage: null, // Optional, default is null
|
|
89
|
-
isLimit:true, // Optional, default true
|
|
90
|
-
isSearch:true, // Optional, default true
|
|
91
|
-
isResult:true, // Optional, default true
|
|
92
|
-
isPagination:true, // Optional, default true
|
|
93
|
-
isSorting:true // Optional, default true
|
|
94
|
-
});
|
|
95
|
-
</script>
|
|
96
|
-
</body>
|
|
97
|
-
</html>
|
|
60
|
+
<!DOCTYPE html>
|
|
61
|
+
<html>
|
|
62
|
+
<head>
|
|
63
|
+
<title>mgsDataTable</title>
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
<div id="tableContainer">
|
|
67
|
+
<table id="myTable"></table>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<script type="module">
|
|
71
|
+
import mgsDataTable from 'mgsdatatable';
|
|
72
|
+
|
|
73
|
+
mgsDataTable({
|
|
74
|
+
target: "#myTable", // Required
|
|
75
|
+
url: "http://localhost/mgs/users", // Required
|
|
76
|
+
data: {}, // Optional
|
|
77
|
+
methodType: "post", // Optional, default is 'post'
|
|
78
|
+
pageLimits: [10, 20, 30, 50, 100], // Optional
|
|
79
|
+
page: 1, // Optional, default is 1
|
|
80
|
+
limit: 10, // Optional, default is 10
|
|
81
|
+
search: "", // Optional, default is ''
|
|
82
|
+
isLimit: true, // Optional, default is true
|
|
83
|
+
isSearch: true, // Optional, default is true
|
|
84
|
+
isResult: true, // Optional, default is true
|
|
85
|
+
isPagination: true, // Optional, default is true
|
|
86
|
+
isSorting: true // Optional, default is true
|
|
87
|
+
});
|
|
88
|
+
</script>
|
|
89
|
+
</body>
|
|
90
|
+
</html>
|
|
98
91
|
```
|
|
99
92
|
|
|
100
|
-
##
|
|
93
|
+
## 📡 API Response Format
|
|
94
|
+
|
|
95
|
+
## The API endpoint (http://localhost/mgs/users) should return a JSON response in the following format:
|
|
101
96
|
```
|
|
102
|
-
{
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
97
|
+
{
|
|
98
|
+
"status": true,
|
|
99
|
+
"data": {
|
|
100
|
+
"column": [
|
|
101
|
+
"name",
|
|
102
|
+
"role",
|
|
103
|
+
"email",
|
|
104
|
+
"mobile",
|
|
105
|
+
"image",
|
|
106
|
+
"status",
|
|
107
|
+
"action"
|
|
108
|
+
],
|
|
109
|
+
"data": [
|
|
110
|
+
{
|
|
111
|
+
"id": 1,
|
|
112
|
+
"name": "Mangesh",
|
|
113
|
+
"role": "superadmin",
|
|
114
|
+
"email": "mangesh@gmail.com",
|
|
115
|
+
"mobile": "1234567890",
|
|
116
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
117
|
+
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
118
|
+
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"id": 2,
|
|
122
|
+
"name": "Ashwani",
|
|
123
|
+
"role": "superadmin",
|
|
124
|
+
"email": "ashwani@gmail.com",
|
|
125
|
+
"mobile": "1234567891",
|
|
126
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
127
|
+
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
128
|
+
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"from": 1,
|
|
132
|
+
"to": 10,
|
|
133
|
+
"total": 30
|
|
134
|
+
},
|
|
135
|
+
"msg": "Data found"
|
|
136
|
+
}
|
|
137
|
+
|
|
143
138
|
```
|
package/dist/mgsdatatable.min.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).mgsDataTable={})}(this,function(e){"use strict";function t(e,t,n,o,r,a
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).mgsDataTable={})}(this,function(e){"use strict";function t(e,t,n,o,r,i,a){try{var l=e[i](a),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(o,r)}function n(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function i(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(-1!==t.indexOf(o))continue;n[o]=e[o]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function a(){
|
|
2
2
|
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
3
|
-
var e,t,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",r=n.toStringTag||"@@toStringTag";function a(n,o,r,a){var i=o&&o.prototype instanceof s?o:s,d=Object.create(i.prototype);return l(d,"_invoke",function(n,o,r){var a,i,l,s=0,d=r||[],u=!1,p={p:0,n:0,v:e,a:g,f:g.bind(e,4),d:function(t,n){return a=t,i=0,l=e,p.n=n,c}};function g(n,o){for(i=n,l=o,t=0;!u&&s&&!r&&t<d.length;t++){var r,a=d[t],g=p.p,f=a[2];n>3?(r=f===o)&&(l=a[(i=a[4])?5:(i=3,3)],a[4]=a[5]=e):a[0]<=g&&((r=n<2&&g<a[1])?(i=0,p.v=o,p.n=a[1]):g<f&&(r=n<3||a[0]>o||o>f)&&(a[4]=n,a[5]=o,p.n=f,i=0))}if(r||n>1)return c;throw u=!0,o}return function(r,d,f){if(s>1)throw TypeError("Generator is already running");for(u&&1===d&&g(d,f),i=d,l=f;(t=i<2?e:l)||!u;){a||(i?i<3?(i>1&&(p.n=-1),g(i,l)):p.n=l:p.v=l);try{if(s=2,a){if(i||(r="next"),t=a[r]){if(!(t=t.call(a,l)))throw TypeError("iterator result is not an object");if(!t.done)return t;l=t.value,i<2&&(i=0)}else 1===i&&(t=a.return)&&t.call(a),i<2&&(l=TypeError("The iterator does not provide a '"+r+"' method"),i=1);a=e}else if((t=(u=p.n<0)?l:n.call(o,p))!==c)break}catch(t){a=e,i=1,l=t}finally{s=1}}return{value:t,done:u}}}(n,r,a),!0),d}var c={};function s(){}function d(){}function u(){}t=Object.getPrototypeOf;var p=[][o]?t(t([][o]())):(l(t={},o,function(){return this}),t),g=u.prototype=s.prototype=Object.create(p);function f(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,u):(e.__proto__=u,l(e,r,"GeneratorFunction")),e.prototype=Object.create(g),e}return d.prototype=u,l(g,"constructor",u),l(u,"constructor",d),d.displayName="GeneratorFunction",l(u,r,"GeneratorFunction"),l(g),l(g,r,"Generator"),l(g,o,function(){return this}),l(g,"toString",function(){return"[object Generator]"}),(i=function(){return{w:a,m:f}})()}function l(e,t,n,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}l=function(e,t,n,o){function a(t,n){l(e,t,function(e){return this._invoke(t,n,e)})}t?r?r(e,t,{value:n,enumerable:!o,configurable:!o,writable:!o}):e[t]=n:(a("next",0),a("throw",1),a("return",2))},l(e,t,n,o)}var c=["token","bearer"],s={target:"",url:"",methodType:"post",data:{},pageLimits:[10,20,30,50,100],page:1,limit:10,column:"",sort:"asc",search:"",prevPage:null,nextPage:null,isSearch:!0,isLimit:!0,isResult:!0,isPagination:!0,isSorting:!0},d=0,u=function(){var e,o=(e=i().m(function e(t){var o,l,u,g,f,m,v,y,b,h,x,P,w,_,L,S,T,j,O,k,E,C,A,I,M,H,D,N,R,q,F,z,G,B,U,J,X,K,Q,V,W,Y,Z,$,ee,te,ne,oe,re,ae,ie,le,ce,se,de,ue,pe,ge,fe,me,ve,ye,be,he,xe,Pe,we,_e,Le,Se,Te,je,Oe,ke,Ee,Ce,Ae,Ie,Me,He,De,Ne,Re,qe,Fe,ze,Ge,Be,Ue,Je,Xe,Ke,Qe,Ve,We,Ye,Ze;return i().w(function(e){for(;;)switch(e.p=e.n){case 0:if(s=r(r({},s),t),null!==(o=s)&&void 0!==o&&o.target){e.n=1;break}return alert("Target is requied."),e.a(2);case 1:if(null!==(l=s)&&void 0!==l&&l.url){e.n=2;break}return alert("URL is requied."),e.a(2);case 2:return z=null===(u=s)||void 0===u?void 0:u.target,G=null!==(g=null===(f=s)||void 0===f?void 0:f.url)&&void 0!==g?g:"/",B=r({},null===(m=s)||void 0===m?void 0:m.data),U=B.token,J=B.bearer,X=a(B,c),K=null===(v=s)||void 0===v?void 0:v.methodType,Q=null!==(y=null===(b=s)||void 0===b?void 0:b.page)&&void 0!==y?y:1,V=null!==(h=null===(x=s)||void 0===x?void 0:x.limit)&&void 0!==h?h:10,W=null!==(P=null===(w=s)||void 0===w?void 0:w.pageLimits)&&void 0!==P?P:[10,20,30,50,100],Y=null===(_=s)||void 0===_?void 0:_.search,Z=null===(L=s)||void 0===L?void 0:L.column,$=null===(S=s)||void 0===S?void 0:S.sort,ee=null!==(T=null===(j=s)||void 0===j?void 0:j.nextPage)&&void 0!==T?T:null,te=null!==(O=null===(k=s)||void 0===k?void 0:k.prevPage)&&void 0!==O?O:null,ne=null===(E=null===(C=s)||void 0===C?void 0:C.isSearch)||void 0===E||E,oe=null===(A=null===(I=s)||void 0===I?void 0:I.isLimit)||void 0===A||A,re=null===(M=null===(H=s)||void 0===H?void 0:H.isResult)||void 0===M||M,ae=null===(D=null===(N=s)||void 0===N?void 0:N.isPagination)||void 0===D||D,ie=null===(R=null===(q=s)||void 0===q?void 0:q.isSorting)||void 0===R||R,X=r(r({},X),{},{page:Q,limit:V}),null!=Y&&null!=Y&&""!=Y.trim()&&(X=r(r({},X),{},{search:Y})),null!=Z&&null!=Z&&""!=Z.trim()&&(X=r(r({},X),{},{column:Z,sort:$})),le="post"===K.toLowerCase(),(ce=new Headers).append("Content-Type","application/json"),le&&U&&ce.append("X-CSRF-Token",U),J&&ce.append("Authorization","Bearer ".concat(J)),se={method:null===(F=s)||void 0===F?void 0:F.methodType,headers:ce,body:JSON.stringify(X)},de=document.querySelector(z),(ue=de.nextElementSibling)&&ue.classList.contains("_mgsPaginateResult")&&ue.remove(),(pe=de.querySelector("tbody"))&&pe.remove(),(ge=document.createElement("div")).className="_mgsSpinner",ge.innerHTML='<i class="fa fa-spinner fa-spin"></i> Loading...',ge.style.cssText="\n position: fixed;\n z-index: 1031;\n width: 70%;\n height: 30%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n ",e.p=3,e.n=4,fetch(G,se);case 4:return be=e.v,e.n=5,be.json();case 5:if(he=e.v,xe=null!==(fe=null==he?void 0:he.data)&&void 0!==fe?fe:[],Pe=null!==(me=null==he||null===(ve=he.data)||void 0===ve?void 0:ve.data)&&void 0!==me?me:[],we=null!==(ye=null==he?void 0:he.column)&&void 0!==ye?ye:[],_e=null!=(null==xe?void 0:xe.from)&&null!=(null==xe?void 0:xe.from)&&""!=(null==xe?void 0:xe.from)?null==xe?void 0:xe.from:0,Le=null!=(null==xe?void 0:xe.to)&&null!=(null==xe?void 0:xe.to)&&""!=(null==xe?void 0:xe.to)?null==xe?void 0:xe.to:0,Se=null!=(null==xe?void 0:xe.total)&&null!=(null==xe?void 0:xe.total)&&""!=(null==xe?void 0:xe.total)?null==xe?void 0:xe.total:0,Te=Math.ceil(Se/V),je=Te+2,ee=Te>0&&null==ee&&null==te?2:ee,de.insertAdjacentElement("beforebegin",ge),0==d&&(ne||oe)&&(Oe="",oe&&W.forEach(function(e){Oe+='<option value="'.concat(e,'">').concat(e,"</option>")}),ke='\n <div class="row _mgsPerPageSearch"> \n '.concat(oe?'<div class="_mgsPerPageStyle"> \n <span>Show</span>\n <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px !important">'.concat(Oe,"</select>\n </div>"):"","\n ").concat(ne?'<div class="_mgsSearchStyle"> \n <span>Search</span> \n <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="'.concat(Y,'" placeholder="Search any field...">\n </div> '):"","\n </div>\n "),de.insertAdjacentHTML("beforebegin",ke),(Ee=document.querySelector("._mgsPerPageSearch"))&&(Ee.style.display="flex",Ee.style.justifyContent="space-between",Ee.style.alignItems="center",Ee.style.gap="10px",Ee.style.paddingLeft="14px",Ee.style.paddingRight="14px",Ee.style.marginBottom="10px",(Ce=Ee.querySelector('input[type="search"]'))&&(Ce.style.flex="1",Ce.style.padding="6px 10px",Ce.style.border="1px solid #ccc",Ce.style.borderRadius="4px"),(Ae=Ee.querySelector("select"))&&(Ae.style.padding="6px 10px",Ae.style.border="1px solid #ccc",Ae.style.borderRadius="4px"))),(Ie=document.createElement("table")).style.cssText="\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n padding: 10px 5px;\n vertical-align: top;\n border: 1px solid rgb(222, 226, 230);\n background-color: #fff;\n color: #212529;\n border-collapse: collapse;\n ",Me=document.createElement("thead"),He=document.createElement("tr"),we.forEach(function(e,t){e=p(e);var n=document.createElement("th");(null==Pe?void 0:Pe.length)>0&&ie&&n.classList.add("_mgsSort"),ie?(n.setAttribute("data-column",t),Z&&t==Z&&"desc"==$?(n.setAttribute("data-sort","desc"),n.innerHTML="".concat(e,' <i class="fa fa-arrow-down" style="font-size:10px !important"></i>')):(n.setAttribute("data-sort","asc"),n.innerHTML="".concat(e,' <i class="fa fa-arrow-up" style="font-size:10px !important"></i>'))):n.innerHTML=e,n.style.cssText="\n background-color: #f8f9fa;\n font-weight: bold;\n cursor: ".concat((null==Pe?void 0:Pe.length)>0?"pointer":"not-allowed",";\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n "),He.appendChild(n)}),Me.appendChild(He),Ie.appendChild(Me),De=document.createElement("tbody"),(null==Pe?void 0:Pe.length)>0?Pe.forEach(function(e,t){var n=document.createElement("tr");we.forEach(function(t){var o=document.createElement("td");o.style.cssText="\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n ",o.innerHTML=e[t],o.title=e[t],n.appendChild(o)}),De.appendChild(n)}):(Ne=document.createElement("tr"),(Re=document.createElement("td")).innerHTML="Data not Found",Re.setAttribute("colspan",null==we?void 0:we.length),Re.style.cssText="\n width: 100%;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n text-align: center;\n color:red;\n ",Ne.appendChild(Re),De.appendChild(Ne)),Ie.appendChild(De),de.innerHTML="",de.appendChild(Ie),setTimeout(function(){ge.remove()},500),d++,qe="",je>0)for((Fe=document.createElement("style")).textContent="\n ._mgsPagination {\n display: flex;\n list-style: none;\n padding: 0;\n gap: 6px;\n }\n ._mgsPageItem {\n display: inline-block;\n }\n ._mgsPageLink {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n padding: 0 10px;\n border: 1px solid #0ec6d5;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #0ec6d5;\n text-decoration: none;\n transition: all 0.2s ease-in-out;\n }\n ._mgsPageLink:hover {\n background-color: #0ec6d5;\n color: #fff;\n }\n ._mgsPageItem.active ._mgsPageLink {\n background-color: #0ec6d5;\n color: #fff;\n border-color: #0ec6d5;\n }\n ._mgsPageItem.disabled ._mgsPageLink {\n border-color: #ccc;\n color: #ccc;\n pointer-events: none;\n cursor: not-allowed;\n }\n ",document.head.appendChild(Fe),ze=!0,Ge=0;Ge<je;Ge++)Be=n({0:"« Previous"},je-1,"Next »"),Ue=Be[Ge]?Be[Ge]:Ge,Je="« Previous"==Be[Ge]?te:"Next »"==Be[Ge]?ee:Ge,Xe=null==Je?"cursor: not-allowed !important;":"cursor: pointer !important;",Ke=null==Je?"disabled":Je==Q?"active":"",Qe=Ue,2==je&&(Je=null,Ke="disabled"),Te>5&&["« Previous",1,2,3,"Next »"].includes(Ue)&&Q<3?(Qe=Ue,qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):Te>5&&Q>2?(Ke=null==Je?"disabled":Je+1==Q?"active":"",Qe=Q>=3&&!["« Previous","Next »"].includes(Ue)?Ue+1:Ue,1==Ge?qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="1">1</a>\n </li>'):Q-1<=Ge&&Q>=Ge&&Ge<=Q+1&&Ge<Te-2&&!["« Previous","Next »"].includes(Ue)?qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>"):Te>5&&Ge>3&&Ge<Te-1&&!["« Previous","Next »"].includes(Ue)?ze&&(ze=!1,Qe="...",qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>")):(Qe=Ue,qe+='<li class="_mgsPageItem '.concat(Ke=null==Je?"disabled":Je==Q?"active":"",'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"))):Te>5&&Ge>3&&Ge<Te-1&&!["« Previous","Next »"].includes(Ue)?ze&&(ze=!1,Qe="...",qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):(Qe=Ue,qe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(Xe,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Te,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"));Ve='\n <div class="row _mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(_e," to ").concat(Le," of ").concat(Se," results</div>"):"","\n ").concat(ae?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(qe,"\n </ul> \n </div> "):"","\n </div>"),de.insertAdjacentHTML("afterend",Ve),(We=document.querySelector("._mgsPaginateResult"))&&(We.style.display="flex",We.style.justifyContent="space-between",We.style.alignItems="center",We.style.gap="10px",We.style.paddingLeft="14px",We.style.paddingRight="14px"),e.n=7;break;case 6:e.p=6,Ze=e.v,Ye='\n <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> \n <p>Error Message : <span style=\'color: red; margin-left:10px;\'>'.concat(Ze.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",Ye),ge.remove();case 7:return e.a(2)}},e,null,[[3,6]])}),function(){var n=this,o=arguments;return new Promise(function(r,a){var i=e.apply(n,o);function l(e){t(i,r,a,l,c,"next",e)}function c(e){t(i,r,a,l,c,"throw",e)}l(void 0)})});return function(e){return o.apply(this,arguments)}}();function p(e){return e.replace(/_/g," ").replace(/\b\w/g,function(e){return e.toUpperCase()})}document.addEventListener("click",function(e){var t=e.target.closest("._mgsPageItem");if(t){e.preventDefault(),t.textContent.trim();var n=t.querySelector("._mgsPageLink"),o=null==n?void 0:n.getAttribute("href"),r=null==n?void 0:n.getAttribute("data-mxpage");if(!o||"null"===o)return n.setAttribute("disabled",!0),void(n.style.cssText="cursor: not-allowed !important;");var a=parseInt(o),i=a>=r?null:a+1,l=a<=1?null:a-1;null==n||n.setAttribute("href",i),n.style.cssText=null==i||null==l?"cursor: not-allowed !important;":"cursor: pointer !important;",u({page:a,prevPage:l,nextPage:i})}}),document.addEventListener("change",function(e){var t=e.target;if(t.classList.contains("_mgsPerPageLimit")){e.preventDefault();var n=parseInt(t.value,10);u({page:1,limit:n,prevPage:null,nextPage:null})}}),document.addEventListener("keyup",function(e){var t=e.target;if(t.classList.contains("_mgsSearchAnyField")&&(e.preventDefault(),"Enter"===e.key)){var n=t.value;document.querySelectorAll("._mgsSort").forEach(function(e){var t=p(e.textContent.trim());e.innerHTML="".concat(t,' <i class="fa fa-arrow-up" style="font-size:10px !important"></i>'),e.setAttribute("data-sort","asc")}),u({page:1,column:"",sort:"",search:n})}}),document.addEventListener("click",function(e){var t=e.target.closest("._mgsSort");if(t){e.preventDefault();var n=t.getAttribute("data-column"),o=t.getAttribute("data-sort");u({page:1,column:n,sort:"asc"===o?"desc":"asc"})}}),window.mgsDataTable=u,window._mgsCapitalizeFirstLetter=p,e._mgsCapitalizeFirstLetter=p,e.mgsDataTable=u,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
3
|
+
var e,t,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",r=n.toStringTag||"@@toStringTag";function i(n,o,r,i){var a=o&&o.prototype instanceof s?o:s,d=Object.create(a.prototype);return l(d,"_invoke",function(n,o,r){var i,a,l,s=0,d=r||[],u=!1,p={p:0,n:0,v:e,a:g,f:g.bind(e,4),d:function(t,n){return i=t,a=0,l=e,p.n=n,c}};function g(n,o){for(a=n,l=o,t=0;!u&&s&&!r&&t<d.length;t++){var r,i=d[t],g=p.p,m=i[2];n>3?(r=m===o)&&(l=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=g&&((r=n<2&&g<i[1])?(a=0,p.v=o,p.n=i[1]):g<m&&(r=n<3||i[0]>o||o>m)&&(i[4]=n,i[5]=o,p.n=m,a=0))}if(r||n>1)return c;throw u=!0,o}return function(r,d,m){if(s>1)throw TypeError("Generator is already running");for(u&&1===d&&g(d,m),a=d,l=m;(t=a<2?e:l)||!u;){i||(a?a<3?(a>1&&(p.n=-1),g(a,l)):p.n=l:p.v=l);try{if(s=2,i){if(a||(r="next"),t=i[r]){if(!(t=t.call(i,l)))throw TypeError("iterator result is not an object");if(!t.done)return t;l=t.value,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(l=TypeError("The iterator does not provide a '"+r+"' method"),a=1);i=e}else if((t=(u=p.n<0)?l:n.call(o,p))!==c)break}catch(t){i=e,a=1,l=t}finally{s=1}}return{value:t,done:u}}}(n,r,i),!0),d}var c={};function s(){}function d(){}function u(){}t=Object.getPrototypeOf;var p=[][o]?t(t([][o]())):(l(t={},o,function(){return this}),t),g=u.prototype=s.prototype=Object.create(p);function m(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,u):(e.__proto__=u,l(e,r,"GeneratorFunction")),e.prototype=Object.create(g),e}return d.prototype=u,l(g,"constructor",u),l(u,"constructor",d),d.displayName="GeneratorFunction",l(u,r,"GeneratorFunction"),l(g),l(g,r,"Generator"),l(g,o,function(){return this}),l(g,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:m}})()}function l(e,t,n,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}l=function(e,t,n,o){function i(t,n){l(e,t,function(e){return this._invoke(t,n,e)})}t?r?r(e,t,{value:n,enumerable:!o,configurable:!o,writable:!o}):e[t]=n:(i("next",0),i("throw",1),i("return",2))},l(e,t,n,o)}var c=["token","bearerToken"],s=0,d={target:"",url:"",methodType:"post",data:{},pageLimits:[10,20,30,50,100],page:1,limit:10,column:"",sort:"asc",search:"",prevPage:null,nextPage:null,isSearch:!0,isLimit:!0,isResult:!0,isPagination:!0,isSorting:!0},u=function(){var e,o=(e=a().m(function e(t){var o,l,u,g,m,f,v,y,h,b,x,P,w,_,S,L,T,j,O,k,E,A,C,I,M,q,H,D,F,N,R,z,G,B,U,X,J,W,K,Q,V,Y,Z,$,ee,te,ne,oe,re,ie,ae,le,ce,se,de,ue,pe,ge,me,fe,ve,ye,he,be,xe,Pe,we,_e,Se,Le,Te,je,Oe,ke,Ee,Ae,Ce,Ie,Me,qe,He,De,Fe,Ne,Re,ze,Ge,Be,Ue,Xe,Je,We,Ke,Qe,Ve,Ye,Ze,$e,et;return a().w(function(e){for(;;)switch(e.p=e.n){case 0:if(d=r(r({},d),t),null!==(o=d)&&void 0!==o&&o.target){e.n=1;break}return alert("Target is requied."),e.a(2);case 1:if(null!==(l=d)&&void 0!==l&&l.url){e.n=2;break}return alert("URL is requied."),e.a(2);case 2:return z=null===(u=d)||void 0===u?void 0:u.target,G=null!==(g=null===(m=d)||void 0===m?void 0:m.url)&&void 0!==g?g:"/",B=r({},null===(f=d)||void 0===f?void 0:f.data),U=B.token,X=B.bearerToken,J=i(B,c),W=null===(v=d)||void 0===v?void 0:v.methodType,K=null!==(y=null===(h=d)||void 0===h?void 0:h.page)&&void 0!==y?y:1,Q=null!==(b=null===(x=d)||void 0===x?void 0:x.limit)&&void 0!==b?b:10,V=null!==(P=null===(w=d)||void 0===w?void 0:w.pageLimits)&&void 0!==P?P:[10,20,30,50,100],Y=null===(_=d)||void 0===_?void 0:_.search,Z=null===(S=d)||void 0===S?void 0:S.column,$=null===(L=d)||void 0===L?void 0:L.sort,ee=null!==(T=null===(j=d)||void 0===j?void 0:j.nextPage)&&void 0!==T?T:null,te=null!==(O=null===(k=d)||void 0===k?void 0:k.prevPage)&&void 0!==O?O:null,ne=null===(E=null===(A=d)||void 0===A?void 0:A.isSearch)||void 0===E||E,oe=null===(C=null===(I=d)||void 0===I?void 0:I.isLimit)||void 0===C||C,re=null===(M=null===(q=d)||void 0===q?void 0:q.isResult)||void 0===M||M,ie=null===(H=null===(D=d)||void 0===D?void 0:D.isPagination)||void 0===H||H,ae=null===(F=null===(N=d)||void 0===N?void 0:N.isSorting)||void 0===F||F,J=r(r({},J),{},{page:K,limit:Q}),null!=Y&&null!=Y&&""!=Y.trim()&&(J=r(r({},J),{},{search:Y})),null!=Z&&null!=Z&&""!=Z.trim()&&(J=r(r({},J),{},{column:Z,sort:$})),le="post"===W.toLowerCase(),(ce=new Headers).append("Content-Type","application/json"),le&&U&&ce.append("X-CSRF-Token",U),X&&ce.append("Authorization","Bearer ".concat(X)),se={method:null===(R=d)||void 0===R?void 0:R.methodType,headers:ce,body:JSON.stringify(J)},de=document.querySelector(z),e.p=3,e.n=4,fetch(G,se);case 4:return fe=e.v,e.n=5,fe.json();case 5:if(ve=e.v,ye=null!==(ue=null==ve?void 0:ve.data)&&void 0!==ue?ue:[],he=null!==(pe=null==ve||null===(ge=ve.data)||void 0===ge?void 0:ge.data)&&void 0!==pe?pe:[],be=null!==(me=null==ve?void 0:ve.column)&&void 0!==me?me:[],xe=null!=(null==ye?void 0:ye.from)&&null!=(null==ye?void 0:ye.from)&&""!=(null==ye?void 0:ye.from)?null==ye?void 0:ye.from:0,Pe=null!=(null==ye?void 0:ye.to)&&null!=(null==ye?void 0:ye.to)&&""!=(null==ye?void 0:ye.to)?null==ye?void 0:ye.to:0,we=null!=(null==ye?void 0:ye.total)&&null!=(null==ye?void 0:ye.total)&&""!=(null==ye?void 0:ye.total)?null==ye?void 0:ye.total:0,_e=Math.ceil(we/Q),Se=_e+2,ee=_e>0&&null==ee&&null==te?2:ee,(Le=document.querySelector("._mgsPaginateResult"))&&Le.remove(),(Te=de.querySelector("tbody"))&&(null==he?void 0:he.length)>0&&Te.remove(),(je=document.createElement("div")).className="_mgsSpinner",je.innerHTML='<i class="fa fa-spinner fa-spin"></i> Loading...',je.style.cssText="\n position: fixed;\n z-index: 1031;\n width: 70%;\n height: 30%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n ",de.insertAdjacentElement("beforebegin",je),0==s&&(ne||oe)&&(Oe="",oe&&V.forEach(function(e){Oe+='<option value="'.concat(e,'">').concat(e,"</option>")}),ke='\n <div class="row _mgsPerPageSearch"> \n '.concat(oe?'<div class="_mgsPerPageStyle"> \n <span>Show</span>\n <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit">'.concat(Oe,"</select>\n </div>"):"","\n ").concat(ne?'<div class="_mgsSearchStyle"> \n <span>Search</span> \n <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="'.concat(Y,'" placeholder="Search any field...">\n </div> '):"","\n </div>\n "),de.insertAdjacentHTML("beforebegin",ke),(Ee=document.querySelector("._mgsPerPageSearch"))&&(Ee.style.display="flex",Ee.style.justifyContent="space-between",Ee.style.alignItems="center",Ee.style.gap="10px",Ee.style.paddingLeft="14px",Ee.style.paddingRight="14px",Ee.style.marginBottom="10px",(Ae=Ee.querySelector("._mgsPerPageLimit"))&&(Ae.style.width="100px",Ae.style.padding="8px 10px",Ae.style.border="1px solid #ccc",Ae.style.borderRadius="4px"),(Ce=Ee.querySelector("._mgsSearchAnyField"))&&(Ae.style.width="195px",Ce.style.padding="8px 10px",Ce.style.border="1px solid #ccc",Ce.style.borderRadius="4px"))),(Ie=document.createElement("table")).style.cssText="\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n padding: 10px 5px;\n vertical-align: top;\n border: 1px solid rgb(222, 226, 230);\n background-color: #fff;\n color: #212529;\n border-collapse: collapse;\n ",Me=document.createElement("thead"),qe=document.createElement("tr"),be.forEach(function(e,t){e=p(e);var n=document.createElement("th");(null==he?void 0:he.length)>0&&ae&&"Action"!=e&&n.classList.add("_mgsSort"),ae&&"Action"!=e?(n.setAttribute("data-column",t),Z&&t==Z&&"desc"==$?(n.setAttribute("data-sort","desc"),n.innerHTML="".concat(e,' <span style="font-size:14px !important">▼</span>')):(n.setAttribute("data-sort","asc"),n.innerHTML="".concat(e,' <span style="font-size:14px !important">▲</span>'))):n.innerHTML=e,n.style.cssText="\n background-color: #f8f9fa;\n font-weight: bold;\n cursor: ".concat((null==he?void 0:he.length)>0?"pointer":"not-allowed",";\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align:left;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n "),qe.appendChild(n)}),Me.appendChild(qe),Ie.appendChild(Me),He=document.createElement("tbody"),(null==he?void 0:he.length)>0?he.forEach(function(e,t){var n=document.createElement("tr");be.forEach(function(t){var o=document.createElement("td");o.style.cssText="\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n ",o.innerHTML=e[t],o.title=e[t],n.appendChild(o)}),He.appendChild(n)}):(De=document.createElement("tr"),(Fe=document.createElement("td")).innerHTML="Data not Found",Fe.setAttribute("colspan",null==be?void 0:be.length),Fe.style.cssText="\n width: 100%;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n text-align: center;\n color:red;\n ",De.appendChild(Fe),He.appendChild(De)),Ie.appendChild(He),de.innerHTML="",de.appendChild(Ie),de&&(de.style.width="100%",de.style.overflowX="auto"),(Ne=document.querySelector(z+" table"))&&(Ne.style.borderCollapse="collapse",Ne.style.minWidth="100%"),document.querySelectorAll(z+" th, "+z+" td").forEach(function(e){e.style.padding="16px 8px",e.style.borderTop="1px solid #ddd",e.style.whiteSpace="nowrap"}),Re="",Se>0)for((ze=document.createElement("style")).textContent="\n ._mgsPagination {\n display: flex;\n list-style: none;\n padding: 0;\n gap: 6px;\n }\n ._mgsPageItem {\n display: inline-block;\n }\n ._mgsPageLink {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n padding: 0 10px;\n border: 1px solid #0ec6d5;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #0ec6d5;\n text-decoration: none;\n transition: all 0.2s ease-in-out;\n }\n ._mgsPageLink:hover {\n background-color: #0ec6d5;\n color: #fff;\n }\n ._mgsPageItem.active ._mgsPageLink {\n background-color: #0ec6d5;\n color: #fff;\n border-color: #0ec6d5;\n }\n ._mgsPageItem.disabled ._mgsPageLink {\n border-color: #ccc;\n color: #ccc;\n pointer-events: none;\n cursor: not-allowed;\n }\n ",document.head.appendChild(ze),Ge=!0,Be=0;Be<Se;Be++)Ue=n({0:"« Previous"},Se-1,"Next »"),Xe=Ue[Be]?Ue[Be]:Be,Je="« Previous"==Ue[Be]?te:"Next »"==Ue[Be]?ee:Be,We=null==Je?"cursor: not-allowed !important;":"cursor: pointer !important;",Ke=null==Je?"disabled":Je==K?"active":"",Qe=Xe,2==Se&&(Je=null,Ke="disabled"),_e>5&&["« Previous",1,2,3,"Next »"].includes(Xe)&&K<3?(Qe=Xe,Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):_e>5&&K>2?(Ke=null==Je?"disabled":Je+1==K?"active":"",Qe=K>=3&&!["« Previous","Next »"].includes(Xe)?Xe+1:Xe,1==Be?Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="1">1</a>\n </li>'):K-1<=Be&&K>=Be&&Be<=K+1&&Be<_e-2&&!["« Previous","Next »"].includes(Xe)?Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>"):_e>5&&Be>3&&Be<_e-1&&!["« Previous","Next »"].includes(Xe)?Ge&&(Ge=!1,Qe="...",Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>")):(Qe=Xe,Re+='<li class="_mgsPageItem '.concat(Ke=null==Je?"disabled":Je==K?"active":"",'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"))):_e>5&&Be>3&&Be<_e-1&&!["« Previous","Next »"].includes(Xe)?Ge&&(Ge=!1,Qe="...",Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):(Qe=Xe,Re+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(_e,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"));Ve='\n <div class="row _mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(xe," to ").concat(Pe," of ").concat(we," results</div>"):"","\n ").concat(ie?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(Re,"\n </ul> \n </div> "):"","\n </div>"),de.insertAdjacentHTML("afterend",Ve),(Ye=document.querySelector("._mgsPaginateResult"))&&(Ye.style.display="flex",Ye.style.justifyContent="space-between",Ye.style.alignItems="center",Ye.style.gap="10px",Ye.style.paddingLeft="14px",Ye.style.paddingRight="14px"),(null==he?void 0:he.length)>0&&s++,setTimeout(function(){je.remove()},500),e.n=7;break;case 6:e.p=6,et=e.v,Ze='\n <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> \n <p>Error Message : <span style=\'color: red; margin-left:10px;\'>'.concat(et.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",Ze),null==($e=document.querySelector("._mgsSpinner"))||$e.remove();case 7:return e.a(2)}},e,null,[[3,6]])}),function(){var n=this,o=arguments;return new Promise(function(r,i){var a=e.apply(n,o);function l(e){t(a,r,i,l,c,"next",e)}function c(e){t(a,r,i,l,c,"throw",e)}l(void 0)})});return function(e){return o.apply(this,arguments)}}();function p(e){return e.replace(/_/g," ").replace(/\b\w/g,function(e){return e.toUpperCase()})}document.addEventListener("click",function(e){var t=e.target.closest("._mgsPageItem");if(t){e.preventDefault(),t.textContent.trim();var n=t.querySelector("._mgsPageLink"),o=null==n?void 0:n.getAttribute("href"),r=null==n?void 0:n.getAttribute("data-mxpage");if(!o||"null"===o)return n.setAttribute("disabled",!0),void(n.style.cssText="cursor: not-allowed !important;");var i=parseInt(o),a=i>=r?null:i+1,l=i<=1?null:i-1;null==n||n.setAttribute("href",a),n.style.cssText=null==a||null==l?"cursor: not-allowed !important;":"cursor: pointer !important;",u({page:i,prevPage:l,nextPage:a})}}),document.addEventListener("change",function(e){var t=e.target;if(t.classList.contains("_mgsPerPageLimit")){e.preventDefault();var n=parseInt(t.value,10);u({page:1,limit:n,prevPage:null,nextPage:null})}}),document.addEventListener("keyup",function(e){var t=e.target;if(t.classList.contains("_mgsSearchAnyField")&&(e.preventDefault(),"Enter"===e.key)){var n=t.value;document.querySelectorAll("._mgsSort").forEach(function(e){var t=p(e.textContent.trim());e.innerHTML="".concat(t,' <span style="font-size:14px !important">▲</span>'),e.setAttribute("data-sort","asc")}),u({page:1,column:"",sort:"",search:n})}}),document.addEventListener("click",function(e){var t=e.target.closest("._mgsSort");if(t){e.preventDefault();var n=t.getAttribute("data-column"),o=t.getAttribute("data-sort");u({page:1,column:n,sort:"asc"===o?"desc":"asc"})}}),window.mgsDataTable=u,window._mgsCapitalizeFirstLetter=p,e._mgsCapitalizeFirstLetter=p,e.mgsDataTable=u,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
// create a datatable with sortig, searching, pagination and limiting
|
|
2
|
+
let _mgsCountsCheck = 0;
|
|
1
3
|
let _mgsCommonData = {
|
|
2
4
|
target : '',
|
|
3
5
|
url : '',
|
|
@@ -17,9 +19,8 @@ let _mgsCommonData = {
|
|
|
17
19
|
isPagination: true,
|
|
18
20
|
isSorting: true,
|
|
19
21
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
_mgsCommonData = {..._mgsCommonData, ...data};
|
|
22
|
+
const mgsDataTable = async (_mgsData) => {
|
|
23
|
+
_mgsCommonData = {..._mgsCommonData, ..._mgsData};
|
|
23
24
|
if(!_mgsCommonData?.target){
|
|
24
25
|
alert('Target is requied.');
|
|
25
26
|
return;
|
|
@@ -30,7 +31,7 @@ const mgsDataTable = async (data) => {
|
|
|
30
31
|
}
|
|
31
32
|
let _mgsTarget = _mgsCommonData?.target;
|
|
32
33
|
let _mgsFullUrl = _mgsCommonData?.url ?? '/';
|
|
33
|
-
let { token,
|
|
34
|
+
let { token, bearerToken, ...allData} = {..._mgsCommonData?.data};
|
|
34
35
|
let methodType = _mgsCommonData?.methodType;
|
|
35
36
|
let page = _mgsCommonData?.page ?? 1;
|
|
36
37
|
let limit = _mgsCommonData?.limit ?? 10;
|
|
@@ -59,7 +60,7 @@ const mgsDataTable = async (data) => {
|
|
|
59
60
|
const headers = new Headers();
|
|
60
61
|
headers.append("Content-Type", "application/json");
|
|
61
62
|
if (_mgsIsPost && token) headers.append("X-CSRF-Token", token);
|
|
62
|
-
if (
|
|
63
|
+
if (bearerToken) headers.append("Authorization", `Bearer ${bearerToken}`);
|
|
63
64
|
|
|
64
65
|
const _mgsOptions = {
|
|
65
66
|
method: _mgsCommonData?.methodType,
|
|
@@ -67,30 +68,7 @@ const mgsDataTable = async (data) => {
|
|
|
67
68
|
body: JSON.stringify(allData)
|
|
68
69
|
};
|
|
69
70
|
|
|
70
|
-
// Clean up previous results
|
|
71
71
|
const _mgsContainer = document.querySelector(_mgsTarget);
|
|
72
|
-
const nextPaginate = _mgsContainer.nextElementSibling;
|
|
73
|
-
if (nextPaginate && nextPaginate.classList.contains('_mgsPaginateResult')) {
|
|
74
|
-
nextPaginate.remove();
|
|
75
|
-
}
|
|
76
|
-
const tbody = _mgsContainer.querySelector('tbody');
|
|
77
|
-
if (tbody) tbody.remove();
|
|
78
|
-
|
|
79
|
-
// Initial setup for first time
|
|
80
|
-
const spinner = document.createElement('div');
|
|
81
|
-
spinner.className = '_mgsSpinner';
|
|
82
|
-
spinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> Loading...`;
|
|
83
|
-
spinner.style.cssText = `
|
|
84
|
-
position: fixed;
|
|
85
|
-
z-index: 1031;
|
|
86
|
-
width: 70%;
|
|
87
|
-
height: 30%;
|
|
88
|
-
display: flex;
|
|
89
|
-
justify-content: center;
|
|
90
|
-
align-items: center;
|
|
91
|
-
font-size: 20px;
|
|
92
|
-
`;
|
|
93
|
-
|
|
94
72
|
try {
|
|
95
73
|
const _mgsResponse = await fetch(_mgsFullUrl, _mgsOptions);
|
|
96
74
|
const _mgsResp = await _mgsResponse.json();
|
|
@@ -103,9 +81,32 @@ const mgsDataTable = async (data) => {
|
|
|
103
81
|
const _mgsTotalPage = Math.ceil(_total/limit);
|
|
104
82
|
const _mgsPagination = (_mgsTotalPage+2);
|
|
105
83
|
nextPage = (_mgsTotalPage > 0 && nextPage == null && prevPage == null)? 2 : nextPage;
|
|
84
|
+
|
|
85
|
+
// Clean up previous results
|
|
86
|
+
const nextPaginate = document.querySelector('._mgsPaginateResult');
|
|
87
|
+
if (nextPaginate) {
|
|
88
|
+
nextPaginate.remove();
|
|
89
|
+
}
|
|
90
|
+
const tbody = _mgsContainer.querySelector('tbody');
|
|
91
|
+
if (tbody && _mgsOutput?.length > 0) tbody.remove();
|
|
92
|
+
|
|
93
|
+
// Initial setup for first time
|
|
94
|
+
const _mgsSpinner = document.createElement('div');
|
|
95
|
+
_mgsSpinner.className = '_mgsSpinner';
|
|
96
|
+
_mgsSpinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> Loading...`;
|
|
97
|
+
_mgsSpinner.style.cssText = `
|
|
98
|
+
position: fixed;
|
|
99
|
+
z-index: 1031;
|
|
100
|
+
width: 70%;
|
|
101
|
+
height: 30%;
|
|
102
|
+
display: flex;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
align-items: center;
|
|
105
|
+
font-size: 20px;
|
|
106
|
+
`;
|
|
107
|
+
_mgsContainer.insertAdjacentElement('beforebegin', _mgsSpinner);
|
|
106
108
|
|
|
107
109
|
//create limit and search
|
|
108
|
-
_mgsContainer.insertAdjacentElement('beforebegin', spinner);
|
|
109
110
|
if (_mgsCountsCheck == 0 && (isSearch || isLimit)) {
|
|
110
111
|
let pageLimitData = '';
|
|
111
112
|
if(isLimit){
|
|
@@ -118,7 +119,7 @@ const mgsDataTable = async (data) => {
|
|
|
118
119
|
<div class="row _mgsPerPageSearch">
|
|
119
120
|
${isLimit ? `<div class="_mgsPerPageStyle">
|
|
120
121
|
<span>Show</span>
|
|
121
|
-
<select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit"
|
|
122
|
+
<select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit">${pageLimitData}</select>
|
|
122
123
|
</div>`:``}
|
|
123
124
|
${isSearch ? `<div class="_mgsSearchStyle">
|
|
124
125
|
<span>Search</span>
|
|
@@ -137,22 +138,25 @@ const mgsDataTable = async (data) => {
|
|
|
137
138
|
target.style.paddingRight = '14px';
|
|
138
139
|
target.style.marginBottom = '10px';
|
|
139
140
|
|
|
141
|
+
// Optional: style select dropdown
|
|
142
|
+
const select = target.querySelector('._mgsPerPageLimit');
|
|
143
|
+
if (select) {
|
|
144
|
+
select.style.width = '100px';
|
|
145
|
+
select.style.padding = '8px 10px';
|
|
146
|
+
select.style.border = '1px solid #ccc';
|
|
147
|
+
select.style.borderRadius = '4px';
|
|
148
|
+
}
|
|
149
|
+
|
|
140
150
|
// Optional: style search input
|
|
141
|
-
const searchInput = target.querySelector('
|
|
151
|
+
const searchInput = target.querySelector('._mgsSearchAnyField');
|
|
142
152
|
if (searchInput) {
|
|
143
|
-
|
|
144
|
-
searchInput.style.padding = '
|
|
153
|
+
select.style.width = '195px';
|
|
154
|
+
searchInput.style.padding = '8px 10px';
|
|
145
155
|
searchInput.style.border = '1px solid #ccc';
|
|
146
156
|
searchInput.style.borderRadius = '4px';
|
|
147
157
|
}
|
|
148
158
|
|
|
149
|
-
|
|
150
|
-
const select = target.querySelector('select');
|
|
151
|
-
if (select) {
|
|
152
|
-
select.style.padding = '6px 10px';
|
|
153
|
-
select.style.border = '1px solid #ccc';
|
|
154
|
-
select.style.borderRadius = '4px';
|
|
155
|
-
}
|
|
159
|
+
|
|
156
160
|
}
|
|
157
161
|
}
|
|
158
162
|
|
|
@@ -176,17 +180,17 @@ const mgsDataTable = async (data) => {
|
|
|
176
180
|
_mgsColumn.forEach((text, key) => {
|
|
177
181
|
text = _mgsCapitalizeFirstLetter (text);
|
|
178
182
|
const th = document.createElement('th');
|
|
179
|
-
if(_mgsOutput?.length > 0 && isSorting){
|
|
183
|
+
if(_mgsOutput?.length > 0 && isSorting && text != 'Action'){
|
|
180
184
|
th.classList.add('_mgsSort');
|
|
181
185
|
}
|
|
182
|
-
if(isSorting){
|
|
186
|
+
if(isSorting && text != 'Action'){
|
|
183
187
|
th.setAttribute('data-column', key); // or actual key if mapping to backend
|
|
184
188
|
if (column && key == column && sort == 'desc') {
|
|
185
189
|
th.setAttribute('data-sort', 'desc');
|
|
186
|
-
th.innerHTML = `${text} <
|
|
190
|
+
th.innerHTML = `${text} <span style="font-size:14px !important">▼</span>`;
|
|
187
191
|
}else{
|
|
188
192
|
th.setAttribute('data-sort', 'asc');
|
|
189
|
-
th.innerHTML = `${text} <
|
|
193
|
+
th.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
190
194
|
}
|
|
191
195
|
}else{
|
|
192
196
|
th.innerHTML = text;
|
|
@@ -201,6 +205,7 @@ const mgsDataTable = async (data) => {
|
|
|
201
205
|
white-space: nowrap;
|
|
202
206
|
overflow: hidden;
|
|
203
207
|
text-overflow: ellipsis;
|
|
208
|
+
text-align:left;
|
|
204
209
|
padding: 2px;
|
|
205
210
|
border-top: 1px solid rgb(222, 226, 230);
|
|
206
211
|
`;
|
|
@@ -208,7 +213,7 @@ const mgsDataTable = async (data) => {
|
|
|
208
213
|
});
|
|
209
214
|
_mgsThead.appendChild(_mgsHeadRow);
|
|
210
215
|
_mgsCreateTable.appendChild(_mgsThead);
|
|
211
|
-
|
|
216
|
+
|
|
212
217
|
// Create tbody
|
|
213
218
|
const _mgsTbody = document.createElement('tbody');
|
|
214
219
|
if(_mgsOutput?.length > 0){
|
|
@@ -254,11 +259,26 @@ const mgsDataTable = async (data) => {
|
|
|
254
259
|
_mgsContainer.innerHTML = ''; // clear previous content
|
|
255
260
|
_mgsContainer.appendChild(_mgsCreateTable);
|
|
256
261
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
262
|
+
if (_mgsContainer) {
|
|
263
|
+
_mgsContainer.style.width = '100%';
|
|
264
|
+
_mgsContainer.style.overflowX = 'auto';
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// Select the table inside wrapper
|
|
268
|
+
const mgsTableStyle = document.querySelector(_mgsTarget+' table');
|
|
269
|
+
if (mgsTableStyle) {
|
|
270
|
+
mgsTableStyle.style.borderCollapse = 'collapse';
|
|
271
|
+
mgsTableStyle.style.minWidth = '100%';
|
|
272
|
+
}
|
|
260
273
|
|
|
261
|
-
|
|
274
|
+
// Select all th and td inside the wrapper table
|
|
275
|
+
const cells = document.querySelectorAll(_mgsTarget+' th, '+_mgsTarget+' td');
|
|
276
|
+
cells.forEach(cell => {
|
|
277
|
+
cell.style.padding = '16px 8px';
|
|
278
|
+
cell.style.borderTop = '1px solid #ddd';
|
|
279
|
+
cell.style.whiteSpace = 'nowrap';
|
|
280
|
+
});
|
|
281
|
+
|
|
262
282
|
let _mgsPaginationHtml = ``;
|
|
263
283
|
if (_mgsPagination > 0) {
|
|
264
284
|
let style = document.createElement('style');
|
|
@@ -384,6 +404,12 @@ const mgsDataTable = async (data) => {
|
|
|
384
404
|
target.style.paddingLeft = '14px';
|
|
385
405
|
target.style.paddingRight = '14px';
|
|
386
406
|
}
|
|
407
|
+
if(_mgsOutput?.length > 0){
|
|
408
|
+
_mgsCountsCheck++;
|
|
409
|
+
}
|
|
410
|
+
setTimeout(() => {
|
|
411
|
+
_mgsSpinner.remove();
|
|
412
|
+
}, 500);
|
|
387
413
|
} catch (error) {
|
|
388
414
|
const _mgsErrorMessage = `
|
|
389
415
|
<div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;">
|
|
@@ -392,7 +418,8 @@ const mgsDataTable = async (data) => {
|
|
|
392
418
|
`;
|
|
393
419
|
_mgsContainer.innerHTML = '';
|
|
394
420
|
_mgsContainer.insertAdjacentHTML('beforebegin', _mgsErrorMessage);
|
|
395
|
-
|
|
421
|
+
const _mgsSpinner = document.querySelector('._mgsSpinner');
|
|
422
|
+
_mgsSpinner?.remove();
|
|
396
423
|
}
|
|
397
424
|
};
|
|
398
425
|
|
|
@@ -448,7 +475,7 @@ document.addEventListener('keyup', function (e) {
|
|
|
448
475
|
let sort = '';
|
|
449
476
|
document.querySelectorAll('._mgsSort').forEach((el) => {
|
|
450
477
|
const text = _mgsCapitalizeFirstLetter (el.textContent.trim());
|
|
451
|
-
el.innerHTML = `${text} <
|
|
478
|
+
el.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
452
479
|
el.setAttribute('data-sort', 'asc');
|
|
453
480
|
});
|
|
454
481
|
mgsDataTable({page,column, sort, search});
|