mgsdatatable 1.0.7 → 1.0.9

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.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/mgsdatatable.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/index.js +57 -49
package/README.md CHANGED
@@ -22,7 +22,7 @@ A simple, lightweight JavaScript library to create tables with **pagination**, *
22
22
  <html>
23
23
  <head>
24
24
  <title>mgsDataTable</title>
25
- <script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.0.4/dist/mgsdatatable.min.js"></script>
25
+ <script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.0.9/dist/mgsdatatable.min.js"></script>
26
26
  </head>
27
27
  <body>
28
28
  <table id="myTable"></table>
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,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> &nbsp; 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})});
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,_,S,L,T,j,O,k,E,A,C,M,I,q,H,D,F,N,R,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,Se,Le,Te,je,Oe,ke,Ee,Ae,Ce,Me,Ie,qe,He,De,Fe,Ne,Re,ze,Ge,Be,Ue,Xe,Je,We,Ke,Qe,Ve,Ye,Ze,$e,et,tt;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===(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===(M=d)||void 0===M?void 0:M.isLimit)||void 0===C||C,re=null===(I=null===(q=d)||void 0===q?void 0:q.isResult)||void 0===I||I,ae=null===(H=null===(D=d)||void 0===D?void 0:D.isPagination)||void 0===H||H,ie=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),null==(ue=document.querySelector("._mgsErrorMessage"))||ue.remove(),(pe=document.createElement("div")).className="_mgsSpinner",pe.innerHTML='<i class="fa fa-spinner fa-spin"></i> &nbsp; Loading...',pe.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",pe),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,Se=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,Le=Math.ceil(Se/Q),Te=Le+2,ee=Le>1&&null==ee&&null==te?2:ee,(je=document.querySelector("._mgsPaginateResult"))&&je.remove(),(Oe=de.querySelector("tbody"))&&(null==xe?void 0:xe.length)>0&&Oe.remove(),0==s&&(ne||oe)&&(ke="",oe&&V.forEach(function(e){ke+='<option value="'.concat(e,'">').concat(e,"</option>")}),Ee='\n <div class="row _mgsPerPageSearch"> \n '.concat(oe?'<div class="_mgsPerPageStyle"> \n <span>Show</span>\n <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit">'.concat(ke,"</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",Ee),(Ae=document.querySelector("._mgsPerPageSearch"))&&(Ae.style.display="flex",Ae.style.justifyContent="space-between",Ae.style.alignItems="center",Ae.style.gap="10px",Ae.style.paddingLeft="14px",Ae.style.paddingRight="14px",Ae.style.marginBottom="10px",(Ce=Ae.querySelector("._mgsPerPageLimit"))&&(Ce.style.width="100px",Ce.style.padding="8px 10px",Ce.style.border="1px solid #ccc",Ce.style.borderRadius="4px"),(Me=Ae.querySelector("._mgsSearchAnyField"))&&(Ce.style.width="195px",Me.style.padding="8px 10px",Me.style.border="1px solid #ccc",Me.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 ",qe=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 text-align:left;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n "),He.appendChild(n)}),qe.appendChild(He),Ie.appendChild(qe),De=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)}),De.appendChild(n)}):(Fe=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 ",Fe.appendChild(Ne),De.appendChild(Fe)),Ie.appendChild(De),de.innerHTML="",de.appendChild(Ie),de&&(de.style.width="100%",de.style.overflowX="auto"),(Re=document.querySelector(z+" table"))&&(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"}),ze="",Te>0)for((Ge=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(Ge),Be=!0,Ue=0;Ue<Te;Ue++)Xe=n({0:"« Previous"},Te-1,"Next »"),Je=Xe[Ue]?Xe[Ue]:Ue,We="« Previous"==Xe[Ue]?te:"Next »"==Xe[Ue]?ee:Ue,Ke=null==We?"cursor: not-allowed !important;":"cursor: pointer !important;",Qe=null==We?"disabled":We==K?"active":"",Ve=Je,2==Te&&(We=null,Qe="disabled"),Le>5&&["« Previous",1,2,3,"Next »"].includes(Je)&&K<3?(Ve=Je,ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We,'">').concat(Ve,"</a>\n </li>")):Le>5&&K>2?(Qe=null==We?"disabled":We+1==K?"active":"",Ve=K>=3&&!["« Previous","Next »"].includes(Je)?Je+1:Je,1==Ue?ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="1">1</a>\n </li>'):K-1<=Ue&&K>=Ue&&Ue<=K+1&&Ue<Le-2&&!["« Previous","Next »"].includes(Je)?ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We+1,'">').concat(Ve,"</a>\n </li>"):Le>5&&Ue>3&&Ue<Le-1&&!["« Previous","Next »"].includes(Je)?Be&&(Be=!1,Ve="...",ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We+1,'">').concat(Ve,"</a>\n </li>")):(Ve=Je,ze+='<li class="_mgsPageItem '.concat(Qe=null==We?"disabled":We==K?"active":"",'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We,'">').concat(Ve,"</a>\n </li>"))):Le>5&&Ue>3&&Ue<Le-1&&!["« Previous","Next »"].includes(Je)?Be&&(Be=!1,Ve="...",ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We,'">').concat(Ve,"</a>\n </li>")):(Ve=Je,ze+='<li class="_mgsPageItem '.concat(Qe,'" style="').concat(Ke,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(We,'">').concat(Ve,"</a>\n </li>"));Ye='\n <div class="row _mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(we," to ").concat(_e," of ").concat(Se," results</div>"):"","\n ").concat(ae?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(ze,"\n </ul> \n </div> "):"","\n </div>"),de.insertAdjacentHTML("afterend",Ye),(Ze=document.querySelector("._mgsPaginateResult"))&&(Ze.style.display="flex",Ze.style.justifyContent="space-between",Ze.style.alignItems="center",Ze.style.gap="10px",Ze.style.paddingLeft="14px",Ze.style.paddingRight="14px"),(null==xe?void 0:xe.length)>0&&s++,setTimeout(function(){pe.remove()},500),e.n=7;break;case 6:e.p=6,tt=e.v,$e='\n <div class="row _mgsErrorMessage" 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(tt.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",$e),null==(et=document.querySelector("._mgsSpinner"))||et.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,prevPage:null,nextPage:null})}}),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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mgsdatatable",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "main": "dist/mgsdatatable.min.js",
5
5
  "browser": "dist/mgsdatatable.min.js",
6
6
  "type": "module",
package/src/index.js CHANGED
@@ -20,7 +20,6 @@ let _mgsCommonData = {
20
20
  isSorting: true,
21
21
  }
22
22
  const mgsDataTable = async (_mgsData) => {
23
-
24
23
  _mgsCommonData = {..._mgsCommonData, ..._mgsData};
25
24
  if(!_mgsCommonData?.target){
26
25
  alert('Target is requied.');
@@ -69,15 +68,25 @@ const mgsDataTable = async (_mgsData) => {
69
68
  body: JSON.stringify(allData)
70
69
  };
71
70
 
72
- // Clean up previous results
73
71
  const _mgsContainer = document.querySelector(_mgsTarget);
74
- const nextPaginate = _mgsContainer.nextElementSibling;
75
- if (nextPaginate && nextPaginate.classList.contains('_mgsPaginateResult')) {
76
- nextPaginate.remove();
77
- }
78
- const tbody = _mgsContainer.querySelector('tbody');
79
- if (tbody) tbody.remove();
80
-
72
+ const _mgsErrorMessage = document.querySelector('._mgsErrorMessage');
73
+ _mgsErrorMessage?.remove();
74
+
75
+ // Initial setup for first time
76
+ const _mgsSpinner = document.createElement('div');
77
+ _mgsSpinner.className = '_mgsSpinner';
78
+ _mgsSpinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> &nbsp; Loading...`;
79
+ _mgsSpinner.style.cssText = `
80
+ position: fixed;
81
+ z-index: 1031;
82
+ width: 70%;
83
+ height: 30%;
84
+ display: flex;
85
+ justify-content: center;
86
+ align-items: center;
87
+ font-size: 20px;
88
+ `;
89
+ _mgsContainer.insertAdjacentElement('beforebegin', _mgsSpinner);
81
90
  try {
82
91
  const _mgsResponse = await fetch(_mgsFullUrl, _mgsOptions);
83
92
  const _mgsResp = await _mgsResponse.json();
@@ -89,23 +98,15 @@ const mgsDataTable = async (_mgsData) => {
89
98
  const _total = (_mgsResult?.total != undefined && _mgsResult?.total != null && _mgsResult?.total != '')?_mgsResult?.total :0;
90
99
  const _mgsTotalPage = Math.ceil(_total/limit);
91
100
  const _mgsPagination = (_mgsTotalPage+2);
92
- nextPage = (_mgsTotalPage > 0 && nextPage == null && prevPage == null)? 2 : nextPage;
93
-
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> &nbsp; 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
- _mgsContainer.insertAdjacentElement('beforebegin', spinner);
101
+ nextPage = (_mgsTotalPage > 1 && nextPage == null && prevPage == null)? 2 : nextPage;
102
+
103
+ // Clean up previous results
104
+ const nextPaginate = document.querySelector('._mgsPaginateResult');
105
+ if (nextPaginate) {
106
+ nextPaginate.remove();
107
+ }
108
+ const tbody = _mgsContainer.querySelector('tbody');
109
+ if (tbody && _mgsOutput?.length > 0) tbody.remove();
109
110
 
110
111
  //create limit and search
111
112
  if (_mgsCountsCheck == 0 && (isSearch || isLimit)) {
@@ -120,7 +121,7 @@ const mgsDataTable = async (_mgsData) => {
120
121
  <div class="row _mgsPerPageSearch">
121
122
  ${isLimit ? `<div class="_mgsPerPageStyle">
122
123
  <span>Show</span>
123
- <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px !important">${pageLimitData}</select>
124
+ <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit">${pageLimitData}</select>
124
125
  </div>`:``}
125
126
  ${isSearch ? `<div class="_mgsSearchStyle">
126
127
  <span>Search</span>
@@ -139,22 +140,25 @@ const mgsDataTable = async (_mgsData) => {
139
140
  target.style.paddingRight = '14px';
140
141
  target.style.marginBottom = '10px';
141
142
 
143
+ // Optional: style select dropdown
144
+ const select = target.querySelector('._mgsPerPageLimit');
145
+ if (select) {
146
+ select.style.width = '100px';
147
+ select.style.padding = '8px 10px';
148
+ select.style.border = '1px solid #ccc';
149
+ select.style.borderRadius = '4px';
150
+ }
151
+
142
152
  // Optional: style search input
143
- const searchInput = target.querySelector('input[type="search"]');
153
+ const searchInput = target.querySelector('._mgsSearchAnyField');
144
154
  if (searchInput) {
145
- searchInput.style.flex = '1';
146
- searchInput.style.padding = '6px 10px';
155
+ select.style.width = '195px';
156
+ searchInput.style.padding = '8px 10px';
147
157
  searchInput.style.border = '1px solid #ccc';
148
158
  searchInput.style.borderRadius = '4px';
149
159
  }
150
160
 
151
- // Optional: style select dropdown
152
- const select = target.querySelector('select');
153
- if (select) {
154
- select.style.padding = '6px 10px';
155
- select.style.border = '1px solid #ccc';
156
- select.style.borderRadius = '4px';
157
- }
161
+
158
162
  }
159
163
  }
160
164
 
@@ -203,6 +207,7 @@ const mgsDataTable = async (_mgsData) => {
203
207
  white-space: nowrap;
204
208
  overflow: hidden;
205
209
  text-overflow: ellipsis;
210
+ text-align:left;
206
211
  padding: 2px;
207
212
  border-top: 1px solid rgb(222, 226, 230);
208
213
  `;
@@ -210,7 +215,7 @@ const mgsDataTable = async (_mgsData) => {
210
215
  });
211
216
  _mgsThead.appendChild(_mgsHeadRow);
212
217
  _mgsCreateTable.appendChild(_mgsThead);
213
-
218
+
214
219
  // Create tbody
215
220
  const _mgsTbody = document.createElement('tbody');
216
221
  if(_mgsOutput?.length > 0){
@@ -263,7 +268,6 @@ const mgsDataTable = async (_mgsData) => {
263
268
 
264
269
  // Select the table inside wrapper
265
270
  const mgsTableStyle = document.querySelector(_mgsTarget+' table');
266
- console.log(mgsTableStyle);
267
271
  if (mgsTableStyle) {
268
272
  mgsTableStyle.style.borderCollapse = 'collapse';
269
273
  mgsTableStyle.style.minWidth = '100%';
@@ -275,13 +279,8 @@ const mgsDataTable = async (_mgsData) => {
275
279
  cell.style.padding = '16px 8px';
276
280
  cell.style.borderTop = '1px solid #ddd';
277
281
  cell.style.whiteSpace = 'nowrap';
278
- });
279
-
280
- setTimeout(() => {
281
- spinner.remove();
282
- }, 500);
283
-
284
- _mgsCountsCheck++;
282
+ });
283
+
285
284
  let _mgsPaginationHtml = ``;
286
285
  if (_mgsPagination > 0) {
287
286
  let style = document.createElement('style');
@@ -407,15 +406,22 @@ const mgsDataTable = async (_mgsData) => {
407
406
  target.style.paddingLeft = '14px';
408
407
  target.style.paddingRight = '14px';
409
408
  }
409
+ if(_mgsOutput?.length > 0){
410
+ _mgsCountsCheck++;
411
+ }
412
+ setTimeout(() => {
413
+ _mgsSpinner.remove();
414
+ }, 500);
410
415
  } catch (error) {
411
416
  const _mgsErrorMessage = `
412
- <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;">
417
+ <div class="row _mgsErrorMessage" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;">
413
418
  <p>Error Message : <span style='color: red; margin-left:10px;'>${error.message}</span></p>
414
419
  </div>
415
420
  `;
416
421
  _mgsContainer.innerHTML = '';
417
422
  _mgsContainer.insertAdjacentHTML('beforebegin', _mgsErrorMessage);
418
- spinner.remove();
423
+ const _mgsSpinner = document.querySelector('._mgsSpinner');
424
+ _mgsSpinner?.remove();
419
425
  }
420
426
  };
421
427
 
@@ -474,7 +480,9 @@ document.addEventListener('keyup', function (e) {
474
480
  el.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
475
481
  el.setAttribute('data-sort', 'asc');
476
482
  });
477
- mgsDataTable({page,column, sort, search});
483
+ let prevPage = null;
484
+ let nextPage = null;
485
+ mgsDataTable({page,column, sort, search, prevPage, nextPage});
478
486
  }
479
487
  }
480
488
  });