mgsdatatable 1.0.6 → 1.0.7
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 +1 -1
- package/package.json +1 -1
- package/src/index.js +49 -26
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.4/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
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,i){try{var l=e[a](i),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 a(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 a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function i(){
|
|
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 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,m=a[2];n>3?(r=m===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<m&&(r=n<3||a[0]>o||o>m)&&(a[4]=n,a[5]=o,p.n=m,i=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),i=d,l=m;(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 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]"}),(i=function(){return{w:a,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 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","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=i().m(function e(t){var o,l,u,g,m,f,v,y,h,b,x,P,w,_,L,S,T,j,O,k,E,A,C,I,M,H,q,D,N,R,F,z,G,B,U,X,J,W,K,Q,V,Y,Z,$,ee,te,ne,oe,re,ae,ie,le,ce,se,de,ue,pe,ge,me,fe,ve,ye,he,be,xe,Pe,we,_e,Le,Se,Te,je,Oe,ke,Ee,Ae,Ce,Ie,Me,He,qe,De,Ne,Re,Fe,ze,Ge,Be,Ue,Xe,Je,We,Ke,Qe,Ve,Ye,Ze,$e;return i().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=a(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===(L=d)||void 0===L?void 0:L.column,$=null===(S=d)||void 0===S?void 0:S.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===(H=d)||void 0===H?void 0:H.isResult)||void 0===M||M,ae=null===(q=null===(D=d)||void 0===D?void 0:D.isPagination)||void 0===q||q,ie=null===(N=null===(R=d)||void 0===R?void 0:R.isSorting)||void 0===N||N,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===(F=d)||void 0===F?void 0:F.methodType,headers:ce,body:JSON.stringify(J)},de=document.querySelector(z),(ue=de.nextElementSibling)&&ue.classList.contains("_mgsPaginateResult")&&ue.remove(),(pe=de.querySelector("tbody"))&&pe.remove(),e.p=3,e.n=4,fetch(G,se);case 4:return ye=e.v,e.n=5,ye.json();case 5:if(he=e.v,be=null!==(ge=null==he?void 0:he.data)&&void 0!==ge?ge:[],xe=null!==(me=null==he||null===(fe=he.data)||void 0===fe?void 0:fe.data)&&void 0!==me?me:[],Pe=null!==(ve=null==he?void 0:he.column)&&void 0!==ve?ve:[],we=null!=(null==be?void 0:be.from)&&null!=(null==be?void 0:be.from)&&""!=(null==be?void 0:be.from)?null==be?void 0:be.from:0,_e=null!=(null==be?void 0:be.to)&&null!=(null==be?void 0:be.to)&&""!=(null==be?void 0:be.to)?null==be?void 0:be.to:0,Le=null!=(null==be?void 0:be.total)&&null!=(null==be?void 0:be.total)&&""!=(null==be?void 0:be.total)?null==be?void 0:be.total:0,Se=Math.ceil(Le/Q),Te=Se+2,ee=Se>0&&null==ee&&null==te?2:ee,(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" 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",(Ae=Ee.querySelector('input[type="search"]'))&&(Ae.style.flex="1",Ae.style.padding="6px 10px",Ae.style.border="1px solid #ccc",Ae.style.borderRadius="4px"),(Ce=Ee.querySelector("select"))&&(Ce.style.padding="6px 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"),He=document.createElement("tr"),Pe.forEach(function(e,t){e=p(e);var n=document.createElement("th");(null==xe?void 0:xe.length)>0&&ie&&"Action"!=e&&n.classList.add("_mgsSort"),ie&&"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==xe?void 0:xe.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),qe=document.createElement("tbody"),(null==xe?void 0:xe.length)>0?xe.forEach(function(e,t){var n=document.createElement("tr");Pe.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)}),qe.appendChild(n)}):(De=document.createElement("tr"),(Ne=document.createElement("td")).innerHTML="Data not Found",Ne.setAttribute("colspan",null==Pe?void 0:Pe.length),Ne.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(Ne),qe.appendChild(De)),Ie.appendChild(qe),de.innerHTML="",de.appendChild(Ie),de&&(de.style.width="100%",de.style.overflowX="auto"),Re=document.querySelector(z+" table"),console.log(Re),Re&&(Re.style.borderCollapse="collapse",Re.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"}),setTimeout(function(){je.remove()},500),s++,Fe="",Te>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<Te;Be++)Ue=n({0:"« Previous"},Te-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==Te&&(Je=null,Ke="disabled"),Se>5&&["« Previous",1,2,3,"Next »"].includes(Xe)&&K<3?(Qe=Xe,Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):Se>5&&K>2?(Ke=null==Je?"disabled":Je+1==K?"active":"",Qe=K>=3&&!["« Previous","Next »"].includes(Xe)?Xe+1:Xe,1==Be?Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="1">1</a>\n </li>'):K-1<=Be&&K>=Be&&Be<=K+1&&Be<Se-2&&!["« Previous","Next »"].includes(Xe)?Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>"):Se>5&&Be>3&&Be<Se-1&&!["« Previous","Next »"].includes(Xe)?Ge&&(Ge=!1,Qe="...",Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je+1,'">').concat(Qe,"</a>\n </li>")):(Qe=Xe,Fe+='<li class="_mgsPageItem '.concat(Ke=null==Je?"disabled":Je==K?"active":"",'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"))):Se>5&&Be>3&&Be<Se-1&&!["« Previous","Next »"].includes(Xe)?Ge&&(Ge=!1,Qe="...",Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>")):(Qe=Xe,Fe+='<li class="_mgsPageItem '.concat(Ke,'" style="').concat(We,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Je,'">').concat(Qe,"</a>\n </li>"));Ve='\n <div class="row _mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(we," to ").concat(_e," of ").concat(Le," results</div>"):"","\n ").concat(ae?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(Fe,"\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"),e.n=7;break;case 6:e.p=6,$e=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($e.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",Ze),spinner.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,' <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,9 @@ let _mgsCommonData = {
|
|
|
17
19
|
isPagination: true,
|
|
18
20
|
isSorting: true,
|
|
19
21
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
_mgsCommonData = {..._mgsCommonData, ...
|
|
22
|
+
const mgsDataTable = async (_mgsData) => {
|
|
23
|
+
|
|
24
|
+
_mgsCommonData = {..._mgsCommonData, ..._mgsData};
|
|
23
25
|
if(!_mgsCommonData?.target){
|
|
24
26
|
alert('Target is requied.');
|
|
25
27
|
return;
|
|
@@ -30,7 +32,7 @@ const mgsDataTable = async (data) => {
|
|
|
30
32
|
}
|
|
31
33
|
let _mgsTarget = _mgsCommonData?.target;
|
|
32
34
|
let _mgsFullUrl = _mgsCommonData?.url ?? '/';
|
|
33
|
-
let { token,
|
|
35
|
+
let { token, bearerToken, ...allData} = {..._mgsCommonData?.data};
|
|
34
36
|
let methodType = _mgsCommonData?.methodType;
|
|
35
37
|
let page = _mgsCommonData?.page ?? 1;
|
|
36
38
|
let limit = _mgsCommonData?.limit ?? 10;
|
|
@@ -59,7 +61,7 @@ const mgsDataTable = async (data) => {
|
|
|
59
61
|
const headers = new Headers();
|
|
60
62
|
headers.append("Content-Type", "application/json");
|
|
61
63
|
if (_mgsIsPost && token) headers.append("X-CSRF-Token", token);
|
|
62
|
-
if (
|
|
64
|
+
if (bearerToken) headers.append("Authorization", `Bearer ${bearerToken}`);
|
|
63
65
|
|
|
64
66
|
const _mgsOptions = {
|
|
65
67
|
method: _mgsCommonData?.methodType,
|
|
@@ -75,21 +77,6 @@ const mgsDataTable = async (data) => {
|
|
|
75
77
|
}
|
|
76
78
|
const tbody = _mgsContainer.querySelector('tbody');
|
|
77
79
|
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
80
|
|
|
94
81
|
try {
|
|
95
82
|
const _mgsResponse = await fetch(_mgsFullUrl, _mgsOptions);
|
|
@@ -104,8 +91,23 @@ const mgsDataTable = async (data) => {
|
|
|
104
91
|
const _mgsPagination = (_mgsTotalPage+2);
|
|
105
92
|
nextPage = (_mgsTotalPage > 0 && nextPage == null && prevPage == null)? 2 : nextPage;
|
|
106
93
|
|
|
107
|
-
//
|
|
94
|
+
// Initial setup for first time
|
|
95
|
+
const spinner = document.createElement('div');
|
|
96
|
+
spinner.className = '_mgsSpinner';
|
|
97
|
+
spinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> Loading...`;
|
|
98
|
+
spinner.style.cssText = `
|
|
99
|
+
position: fixed;
|
|
100
|
+
z-index: 1031;
|
|
101
|
+
width: 70%;
|
|
102
|
+
height: 30%;
|
|
103
|
+
display: flex;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
align-items: center;
|
|
106
|
+
font-size: 20px;
|
|
107
|
+
`;
|
|
108
108
|
_mgsContainer.insertAdjacentElement('beforebegin', spinner);
|
|
109
|
+
|
|
110
|
+
//create limit and search
|
|
109
111
|
if (_mgsCountsCheck == 0 && (isSearch || isLimit)) {
|
|
110
112
|
let pageLimitData = '';
|
|
111
113
|
if(isLimit){
|
|
@@ -176,17 +178,17 @@ const mgsDataTable = async (data) => {
|
|
|
176
178
|
_mgsColumn.forEach((text, key) => {
|
|
177
179
|
text = _mgsCapitalizeFirstLetter (text);
|
|
178
180
|
const th = document.createElement('th');
|
|
179
|
-
if(_mgsOutput?.length > 0 && isSorting){
|
|
181
|
+
if(_mgsOutput?.length > 0 && isSorting && text != 'Action'){
|
|
180
182
|
th.classList.add('_mgsSort');
|
|
181
183
|
}
|
|
182
|
-
if(isSorting){
|
|
184
|
+
if(isSorting && text != 'Action'){
|
|
183
185
|
th.setAttribute('data-column', key); // or actual key if mapping to backend
|
|
184
186
|
if (column && key == column && sort == 'desc') {
|
|
185
187
|
th.setAttribute('data-sort', 'desc');
|
|
186
|
-
th.innerHTML = `${text} <
|
|
188
|
+
th.innerHTML = `${text} <span style="font-size:14px !important">▼</span>`;
|
|
187
189
|
}else{
|
|
188
190
|
th.setAttribute('data-sort', 'asc');
|
|
189
|
-
th.innerHTML = `${text} <
|
|
191
|
+
th.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
190
192
|
}
|
|
191
193
|
}else{
|
|
192
194
|
th.innerHTML = text;
|
|
@@ -254,6 +256,27 @@ const mgsDataTable = async (data) => {
|
|
|
254
256
|
_mgsContainer.innerHTML = ''; // clear previous content
|
|
255
257
|
_mgsContainer.appendChild(_mgsCreateTable);
|
|
256
258
|
|
|
259
|
+
if (_mgsContainer) {
|
|
260
|
+
_mgsContainer.style.width = '100%';
|
|
261
|
+
_mgsContainer.style.overflowX = 'auto';
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Select the table inside wrapper
|
|
265
|
+
const mgsTableStyle = document.querySelector(_mgsTarget+' table');
|
|
266
|
+
console.log(mgsTableStyle);
|
|
267
|
+
if (mgsTableStyle) {
|
|
268
|
+
mgsTableStyle.style.borderCollapse = 'collapse';
|
|
269
|
+
mgsTableStyle.style.minWidth = '100%';
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// Select all th and td inside the wrapper table
|
|
273
|
+
const cells = document.querySelectorAll(_mgsTarget+' th, '+_mgsTarget+' td');
|
|
274
|
+
cells.forEach(cell => {
|
|
275
|
+
cell.style.padding = '16px 8px';
|
|
276
|
+
cell.style.borderTop = '1px solid #ddd';
|
|
277
|
+
cell.style.whiteSpace = 'nowrap';
|
|
278
|
+
});
|
|
279
|
+
|
|
257
280
|
setTimeout(() => {
|
|
258
281
|
spinner.remove();
|
|
259
282
|
}, 500);
|
|
@@ -448,7 +471,7 @@ document.addEventListener('keyup', function (e) {
|
|
|
448
471
|
let sort = '';
|
|
449
472
|
document.querySelectorAll('._mgsSort').forEach((el) => {
|
|
450
473
|
const text = _mgsCapitalizeFirstLetter (el.textContent.trim());
|
|
451
|
-
el.innerHTML = `${text} <
|
|
474
|
+
el.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
452
475
|
el.setAttribute('data-sort', 'asc');
|
|
453
476
|
});
|
|
454
477
|
mgsDataTable({page,column, sort, search});
|