mgsdatatable 1.0.7 → 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.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/mgsdatatable.min.js +2 -2
  3. package/package.json +1 -1
  4. package/src/index.js +39 -35
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.8/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
- !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(){
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,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 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> &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">'.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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mgsdatatable",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
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,7 @@ 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
-
81
72
  try {
82
73
  const _mgsResponse = await fetch(_mgsFullUrl, _mgsOptions);
83
74
  const _mgsResp = await _mgsResponse.json();
@@ -90,12 +81,20 @@ const mgsDataTable = async (_mgsData) => {
90
81
  const _mgsTotalPage = Math.ceil(_total/limit);
91
82
  const _mgsPagination = (_mgsTotalPage+2);
92
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();
93
92
 
94
93
  // 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 = `
94
+ const _mgsSpinner = document.createElement('div');
95
+ _mgsSpinner.className = '_mgsSpinner';
96
+ _mgsSpinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> &nbsp; Loading...`;
97
+ _mgsSpinner.style.cssText = `
99
98
  position: fixed;
100
99
  z-index: 1031;
101
100
  width: 70%;
@@ -105,7 +104,7 @@ const mgsDataTable = async (_mgsData) => {
105
104
  align-items: center;
106
105
  font-size: 20px;
107
106
  `;
108
- _mgsContainer.insertAdjacentElement('beforebegin', spinner);
107
+ _mgsContainer.insertAdjacentElement('beforebegin', _mgsSpinner);
109
108
 
110
109
  //create limit and search
111
110
  if (_mgsCountsCheck == 0 && (isSearch || isLimit)) {
@@ -120,7 +119,7 @@ const mgsDataTable = async (_mgsData) => {
120
119
  <div class="row _mgsPerPageSearch">
121
120
  ${isLimit ? `<div class="_mgsPerPageStyle">
122
121
  <span>Show</span>
123
- <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px !important">${pageLimitData}</select>
122
+ <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit">${pageLimitData}</select>
124
123
  </div>`:``}
125
124
  ${isSearch ? `<div class="_mgsSearchStyle">
126
125
  <span>Search</span>
@@ -139,22 +138,25 @@ const mgsDataTable = async (_mgsData) => {
139
138
  target.style.paddingRight = '14px';
140
139
  target.style.marginBottom = '10px';
141
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
+
142
150
  // Optional: style search input
143
- const searchInput = target.querySelector('input[type="search"]');
151
+ const searchInput = target.querySelector('._mgsSearchAnyField');
144
152
  if (searchInput) {
145
- searchInput.style.flex = '1';
146
- searchInput.style.padding = '6px 10px';
153
+ select.style.width = '195px';
154
+ searchInput.style.padding = '8px 10px';
147
155
  searchInput.style.border = '1px solid #ccc';
148
156
  searchInput.style.borderRadius = '4px';
149
157
  }
150
158
 
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
- }
159
+
158
160
  }
159
161
  }
160
162
 
@@ -203,6 +205,7 @@ const mgsDataTable = async (_mgsData) => {
203
205
  white-space: nowrap;
204
206
  overflow: hidden;
205
207
  text-overflow: ellipsis;
208
+ text-align:left;
206
209
  padding: 2px;
207
210
  border-top: 1px solid rgb(222, 226, 230);
208
211
  `;
@@ -210,7 +213,7 @@ const mgsDataTable = async (_mgsData) => {
210
213
  });
211
214
  _mgsThead.appendChild(_mgsHeadRow);
212
215
  _mgsCreateTable.appendChild(_mgsThead);
213
-
216
+
214
217
  // Create tbody
215
218
  const _mgsTbody = document.createElement('tbody');
216
219
  if(_mgsOutput?.length > 0){
@@ -263,7 +266,6 @@ const mgsDataTable = async (_mgsData) => {
263
266
 
264
267
  // Select the table inside wrapper
265
268
  const mgsTableStyle = document.querySelector(_mgsTarget+' table');
266
- console.log(mgsTableStyle);
267
269
  if (mgsTableStyle) {
268
270
  mgsTableStyle.style.borderCollapse = 'collapse';
269
271
  mgsTableStyle.style.minWidth = '100%';
@@ -275,13 +277,8 @@ const mgsDataTable = async (_mgsData) => {
275
277
  cell.style.padding = '16px 8px';
276
278
  cell.style.borderTop = '1px solid #ddd';
277
279
  cell.style.whiteSpace = 'nowrap';
278
- });
279
-
280
- setTimeout(() => {
281
- spinner.remove();
282
- }, 500);
283
-
284
- _mgsCountsCheck++;
280
+ });
281
+
285
282
  let _mgsPaginationHtml = ``;
286
283
  if (_mgsPagination > 0) {
287
284
  let style = document.createElement('style');
@@ -407,6 +404,12 @@ const mgsDataTable = async (_mgsData) => {
407
404
  target.style.paddingLeft = '14px';
408
405
  target.style.paddingRight = '14px';
409
406
  }
407
+ if(_mgsOutput?.length > 0){
408
+ _mgsCountsCheck++;
409
+ }
410
+ setTimeout(() => {
411
+ _mgsSpinner.remove();
412
+ }, 500);
410
413
  } catch (error) {
411
414
  const _mgsErrorMessage = `
412
415
  <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;">
@@ -415,7 +418,8 @@ const mgsDataTable = async (_mgsData) => {
415
418
  `;
416
419
  _mgsContainer.innerHTML = '';
417
420
  _mgsContainer.insertAdjacentHTML('beforebegin', _mgsErrorMessage);
418
- spinner.remove();
421
+ const _mgsSpinner = document.querySelector('._mgsSpinner');
422
+ _mgsSpinner?.remove();
419
423
  }
420
424
  };
421
425