jl-datatable/dist/jl-datatable.umd.js

A datatable server side rendering mode - Vue JS 3 ⚙️

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash/debounce"),require("vue"),require("qs"),require("bootstrap/dist/css/bootstrap.min.css")):"function"==typeof define&&define.amd?define(["exports","lodash/debounce","vue","qs","bootstrap/dist/css/bootstrap.min.css"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JlDatatable={},e.debounce,e.vue,e.qs)}(this,(function(e,t,r,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),l=o(n),s={name:"Header",props:{length:{type:Number,default:10},lengthMenu:Array},emits:["onUpdatedMenu","onUpdatedSearch"],setup(e,{emit:t}){const n=r.ref(""),o=a.default((function(){t("onUpdatedSearch",n)}),500);return{search:n,updatedMenu:()=>{t("onUpdatedMenu",e.length)},updatedSearch:o}}};const c={class:"d-flex flex-column flex-lg-row align-items-center justify-content-between"},d={class:"row"},i=r.createElementVNode("div",{class:"col-auto"},[r.createElementVNode("label",{for:"inputSearch"},"Show")],-1),u={class:"col-auto"},m=["value"],p=r.createElementVNode("div",{class:"col-auto"},[r.createElementVNode("label",{for:"inputSearch",class:"col-form-label"},"Entries")],-1),g={class:"row"},b=r.createElementVNode("div",{class:"col-auto"},[r.createElementVNode("label",{class:"col-form-label"},"Search")],-1),h={class:"col-auto"};s.render=function(e,t,n,o,a,l){return r.openBlock(),r.createElementBlock("div",c,[r.createElementVNode("div",d,[i,r.createElementVNode("div",u,[r.withDirectives(r.createElementVNode("select",{class:"form-select form-select-sm","onUpdate:modelValue":t[0]||(t[0]=e=>n.length=e),onChange:t[1]||(t[1]=e=>o.updatedMenu())},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.lengthMenu,(e=>(r.openBlock(),r.createElementBlock("option",{key:e,value:e},r.toDisplayString(e),9,m)))),128))],544),[[r.vModelSelect,n.length]])]),p]),r.createElementVNode("div",g,[b,r.createElementVNode("div",h,[r.withDirectives(r.createElementVNode("input",{type:"search",class:"form-control form-control-sm","onUpdate:modelValue":t[2]||(t[2]=e=>o.search=e),onInput:t[3]||(t[3]=e=>o.updatedSearch())},null,544),[[r.vModelText,o.search]])])])])},s.__file="src/Header.vue";var f={name:"Footer",props:{length:Number,start:Number,recordsFiltered:Number,recordsTotal:Number},emits:["onUpdatedPagination"],setup(e,{emit:t}){const n=r.reactive({paginations:[],start:e.start,length:e.length,number:1,next:{number:0,class:"disabled"},before:{number:0,class:"disabled"},startF:0,toF:0,filteredStr:""});return r.watch(e,(()=>{n.start!=e.start&&(n.number=1),n.start=e.start,n.recordsFiltered=e.recordsFiltered,n.recordsTotal=e.recordsTotal,n.length=e.length,(()=>{let e=Math.ceil(n.recordsFiltered/n.length),t=[...Array(e-1+1).keys()].map((e=>e+1));t.length>7&&(t=n.number>=1&&n.number<=4?[...t.slice(0,5),0,t.at(-1)]:n.number<=t.at(-1)&&n.number>=t.at(-4)?[t.at(0),0,...t.slice(t.at(-1)-5,t.at(-1))]:[t.at(0),0,...t.slice(n.number-2,n.number+1),0,t.at(-1)]),n.paginations=t.map((e=>({number:0!=e?e:"...",class:0!=e?n.number==e?"active":"":"disabled"})));const r=n.paginations.find((e=>"active"==e.class&&e.number>1)),o=n.paginations.find((e=>"active"==e.class&&e.number<n.paginations.at(-1).number));r?(n.before.number=r.number-1,n.before.class=""):n.before={number:0,class:"disabled"},o?(n.next.number=o.number+1,n.next.class=""):n.next={number:0,class:"disabled"},n.number==t.at(-1)?(n.startF=n.start+1,n.toF=n.recordsFiltered):(n.startF=n.start+1,n.toF=n.number*n.length),n.filteredStr=n.recordsFiltered!=n.recordsTotal?`(filtered from ${n.recordsTotal} total entries)`:""})()})),{...r.toRefs(n),updatedPagination:e=>{"..."!=e.number&&n.number!=e.number&&(n.number=e.number,n.start=n.length*e.number-n.length,t("onUpdatedPagination",n.start))}}}};const y={class:"d-flex flex-column flex-lg-row align-items-center justify-content-between"},k={class:"pagination"},v=["onClick"];function E(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}E("\nli[data-v-b672bd58] {\r\n        cursor: pointer;\n}\r\n"),f.render=function(e,t,n,o,a,l){return r.openBlock(),r.createElementBlock("div",y,[r.createElementVNode("div",null,"Showing "+r.toDisplayString(e.startF)+" to "+r.toDisplayString(e.toF)+" of "+r.toDisplayString(n.recordsFiltered)+" entries "+r.toDisplayString(e.filteredStr),1),r.createElementVNode("nav",null,[r.createElementVNode("ul",k,[r.createElementVNode("li",{class:r.normalizeClass(["page-item",e.before.class])},[r.createElementVNode("a",{class:"page-link",onClick:t[0]||(t[0]=t=>o.updatedPagination(e.before))},"Previous")],2),(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.paginations,((e,t)=>(r.openBlock(),r.createElementBlock("li",{key:t,class:r.normalizeClass(["page-item",e.class])},[r.createElementVNode("a",{class:"page-link",onClick:t=>o.updatedPagination(e)},r.toDisplayString(e.number),9,v)],2)))),128)),r.createElementVNode("li",{class:r.normalizeClass(["page-item",e.next.class])},[r.createElementVNode("a",{class:"page-link",onClick:t[1]||(t[1]=t=>o.updatedPagination(e.next))},"Next")],2)])])])},f.__scopeId="data-v-b672bd58",f.__file="src/Footer.vue";const B=require("./sort_asc.png"),w=require("./sort_desc.png"),N=require("./sort_both.png");var S={props:{columns:Array,order:Object},emits:["onUpdatedOrder"],setup(e,{emit:t}){const n=r.reactive({column:e.order.column,dir:e.order.dir}),o="ASC",a="DESC",l=t=>!1!==e.columns[t].orderable;return{sort:(e=0)=>{l(e)&&(n.column===e&&n.dir===o?n.dir=a:n.dir=o,n.column=e,t("onUpdatedOrder",{...n}))},imgSort:(e=0,t=o)=>n.column===e?n.dir===t?B:w:N,isSort:l}}};const F={class:"table-light"},O=["onClick"],V=["src"];E("\nth[data-v-9f8fad32]:hover {\r\n        cursor: pointer;\n}\r\n"),S.render=function(e,t,n,o,a,l){return r.openBlock(),r.createElementBlock("thead",F,[r.createElementVNode("tr",null,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.columns,((e,t)=>(r.openBlock(),r.createElementBlock("th",{key:t,"data-sortable":"true",onClick:e=>o.sort(t)},[r.createElementVNode("span",null,r.toDisplayString(e.label),1),o.isSort(t)?(r.openBlock(),r.createElementBlock("img",{key:0,src:o.imgSort(t)},null,8,V)):r.createCommentVNode("v-if",!0)],8,O)))),128))])])},S.__scopeId="data-v-9f8fad32",S.__file="src/table/Header.vue";var U={name:"Body",props:{rows:Array,columns:Array}};const C={key:0},T={key:1};U.render=function(e,t,n,o,a,l){return r.openBlock(),r.createElementBlock("tbody",null,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.rows,((e,t)=>(r.openBlock(),r.createElementBlock("tr",{key:t},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.columns,((t,n)=>(r.openBlock(),r.createElementBlock(r.Fragment,{key:n},[Object.keys(e).find((e=>e===t.data))?(r.openBlock(),r.createElementBlock("td",C,r.toDisplayString(e[t.data]),1)):t.component?(r.openBlock(),r.createElementBlock("td",T,[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.component),{row:e,column:t},null,8,["row","column"]))])):r.createCommentVNode("v-if",!0)],64)))),128))])))),128))])},U.__file="src/table/Body.vue";var M={name:"Table",props:{columns:Array,order:Object,rows:Array},components:{Header:S,Body:U},emits:["onUpdatedOrder"],setup:(e,{emit:t})=>({onUpdatedOrder:e=>{t("onUpdatedOrder",e)}})};const _={class:"table table-hover table-responsive align-middle"};M.render=function(e,t,n,o,a,l){const s=r.resolveComponent("Header"),c=r.resolveComponent("Body");return r.openBlock(),r.createElementBlock("table",_,[r.createVNode(s,{columns:n.columns,order:n.order,onOnUpdatedOrder:o.onUpdatedOrder},null,8,["columns","order","onOnUpdatedOrder"]),r.createVNode(c,{columns:n.columns,rows:n.rows},null,8,["columns","rows"])])},M.__file="src/table/General.vue";var x={name:"JlDatatable",props:{url:String,requestOptions:{type:Object,default:{}},columns:Array,order:{type:Object,default:{column:0,dir:"ASC"}},pageLength:{type:Number,default:10},lengthMenu:{type:Array,default:[10,25,50,100]},reset:String},emits:["gettingEntries","entriesFetched"],components:{Footer:f,Header:s,Table:M},setup(e,{emit:t}){const n=r.reactive({columns:e.columns,length:e.pageLength,start:0,search:"",order:e.order,start:0,recordsFiltered:0,recordsTotal:0,rows:[]}),o=async()=>{const r={columns:[...n.columns].map(a),length:n.length,search:n.search,order:n.order,start:n.start},o=l.default.stringify(r,{encode:!1}),s=`${e.url}?${o}`,c=await function(e,t={}){return{sendRequest:async()=>{try{0===Object.keys(t).length&&(t={method:"GET",headers:{"Content-Type":"application/json"}});const r=await fetch(e,t);return await r.json()}catch(e){throw e}}}}(s,{...e.requestOptions});t("gettingEntries");const d=await c.sendRequest();t("entriesFetched"),n.rows=d.data,n.recordsFiltered=d.recordsFiltered,n.recordsTotal=d.recordsTotal},a=e=>{const t={...e};return t.hasOwnProperty("orderable")||(t.orderable=!0),t.hasOwnProperty("searchable")||(t.searchable=!0),t.hasOwnProperty("component")&&delete t.component,t};return r.onMounted((async()=>{o()})),r.watch((()=>e.reset),((t,r)=>{n.columns=e.columns,n.length=e.pageLength,n.order=e.order,n.start=0,n.search="",n.recordsFiltered=0,n.recordsTotal=0,n.rows=[],o()})),{...r.toRefs(n),onUpdatedMenu:e=>{n.length=e,n.start=0,o()},onUpdatedSearch:e=>{n.search=e,n.start=0,o()},onUpdatedOrder:e=>{n.order=e,n.start=0,o()},onUpdatedPagination:e=>{n.start=e,o()}}}};const P={class:"row"};function q(e){q.installed||(q.installed=!0,e.component("Main",x))}x.render=function(e,t,n,o,a,l){const s=r.resolveComponent("Header"),c=r.resolveComponent("Table"),d=r.resolveComponent("Footer");return r.openBlock(),r.createElementBlock(r.Fragment,null,[r.createVNode(s,{lengthMenu:n.lengthMenu,length:e.length,onOnUpdatedMenu:o.onUpdatedMenu,onOnUpdatedSearch:o.onUpdatedSearch},null,8,["lengthMenu","length","onOnUpdatedMenu","onOnUpdatedSearch"]),r.createElementVNode("div",P,[r.createVNode(c,{columns:n.columns,order:n.order,rows:e.rows,onOnUpdatedOrder:o.onUpdatedOrder},null,8,["columns","order","rows","onOnUpdatedOrder"]),r.createVNode(d,{length:e.length,start:e.start,recordsFiltered:e.recordsFiltered,recordsTotal:e.recordsTotal,onOnUpdatedPagination:o.onUpdatedPagination},null,8,["length","start","recordsFiltered","recordsTotal","onOnUpdatedPagination"])])],64)},x.__file="src/Main.vue";const D={install:q};let j=null;"undefined"!=typeof window?j=window.Vue:"undefined"!=typeof global&&(j=global.vue),j&&j.use(D),x.install=q,e.default=x,Object.defineProperty(e,"__esModule",{value:!0})}));