diff --git a/dist/index.js b/dist/index.js index a6319bb..7f96dac 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2,7 +2,7 @@ * vue-datatables-net * Vue jQuery DataTables.net wrapper component * - * @version v1.5.1 + * @version v1.5.2 * @author friends@niiknow.org * @repository https://github.com/niiknow/vue-datatables-net.git */ @@ -535,7 +535,7 @@ var myUniqueId = 1; }); } - $el.find('#vdtnetable1_wrapper').on('remove', function () { + $el.on('remove', function () { if (that.dataTable) { that.dataTable.destroy(true); } diff --git a/dist/index.js.map b/dist/index.js.map index f27dfe3..822f385 100644 --- a/dist/index.js.map +++ b/dist/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sources":["webpack://VdtnetTable/webpack/universalModuleDefinition","webpack://VdtnetTable/./src/VdtnetTable.vue?8e78","webpack://VdtnetTable/./src/VdtnetTable.vue?8f44","webpack://VdtnetTable/./node_modules/css-loader/dist/runtime/api.js","webpack://VdtnetTable/./src/VdtnetTable.vue","webpack://VdtnetTable/./src/VdtnetTable.vue?245f","webpack://VdtnetTable/./src/VdtnetTable.vue?0f0e","webpack://VdtnetTable/./node_modules/vue-loader/lib/runtime/componentNormalizer.js","webpack://VdtnetTable/./src/VdtnetTable.vue?fcec","webpack://VdtnetTable/./node_modules/vue-style-loader/lib/addStylesClient.js","webpack://VdtnetTable/./node_modules/vue-style-loader/lib/listToStyles.js","webpack://VdtnetTable/webpack/bootstrap","webpack://VdtnetTable/webpack/runtime/compat get default export","webpack://VdtnetTable/webpack/runtime/define property getters","webpack://VdtnetTable/webpack/runtime/hasOwnProperty shorthand","webpack://VdtnetTable/webpack/runtime/make namespace object","webpack://VdtnetTable/./src/index.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"VdtnetTable\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"VdtnetTable\"] = factory();\n\telse\n\t\troot[\"VdtnetTable\"] = factory();\n})(self, function() {\nreturn ","//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar myUniqueId = 1;\nexport default {\n name: 'VdtnetTable',\n props: {\n /**\n * The table id\n *\n * @type String\n */\n id: {\n type: String,\n \"default\": null\n },\n\n /**\n * Set the container classes.\n *\n * @type String\n */\n containerClassName: {\n type: String,\n \"default\": 'table-responsive d-print-inline'\n },\n\n /**\n * Set the input column search classes.\n *\n * @type String\n */\n columnSearchClassName: {\n type: String,\n \"default\": 'form-control form-control-sm'\n },\n\n /**\n * Set the tfoot classes.\n *\n * @type String\n */\n tfootClassName: {\n type: String\n },\n\n /**\n * Set the thead classes.\n *\n * @type String\n */\n theadClassName: {\n type: String\n },\n\n /**\n * Set the table classes you wish to use, default with bootstrap4\n * but you can override with: themeforest, foundation, etc..\n *\n * @type String\n */\n className: {\n type: String,\n \"default\": 'table table-striped table-bordered nowrap w-100'\n },\n\n /**\n * the options object: https://datatables.net/manual/options\n *\n * @type Object\n */\n opts: {\n type: Object\n },\n\n /**\n * List all fields to be converted to opts columns\n *\n * @type Object\n */\n fields: {\n type: Object\n },\n\n /**\n * Pass in DataTables.Net jQuery to resolve any conflict from\n * multiple jQuery loaded in the browser\n *\n * @type Object\n */\n jquery: {\n type: Object\n },\n\n /**\n * Pass in Vue to resolve any conflict from multiple loaded\n *\n * @type Object\n */\n vue: {\n type: Object\n },\n\n /**\n * The select-checkbox column index (start at 1)\n * Current implementation require datatables.net-select\n *\n * @type Number\n */\n selectCheckbox: {\n type: Number,\n \"default\": -1\n },\n\n /**\n * Provide custom local data loading. Warning: this option has not been\n * thoroughly tested. Please use ajax and serverSide instead.\n *\n * @type Function\n */\n dataLoader: {\n type: Function\n },\n\n /**\n * true to hide the footer of the table\n *\n * @type Boolean\n */\n hideFooter: {\n type: Boolean\n },\n\n /**\n * true to hide the tfoot of the table\n *\n * @type Boolean\n */\n hideTfoot: {\n type: Boolean,\n \"default\": true\n },\n\n /**\n * true to hide the individual column search of the table\n *\n * @type Boolean\n */\n columnSearch: {\n type: Boolean,\n \"default\": false\n },\n\n /**\n * The details column configuration of master/details.\n *\n * @type {Object}\n */\n details: {\n type: Object\n }\n },\n data: function data() {\n // initialize defaults\n return {\n tableId: null,\n options: {\n /*eslint-disable */\n dom: \"tr<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>\",\n\n /*eslint-enable */\n columns: [],\n language: {\n infoFiltered: ''\n },\n lengthMenu: [[15, 100, 500, 1000, -1], [15, 100, 500, 1000, 'All']],\n pageLength: 15,\n buttons: [] // remove any button defaults\n\n },\n dataTable: null,\n vdtnet: this\n };\n },\n computed: {\n jq: function jq() {\n return this.jquery || window.jQuery;\n },\n myVue: function myVue() {\n return this.vue || window.Vue;\n },\n classes: function classes() {\n var that = this;\n var classes = \"\".concat(that.containerClassName, \" vdtnet-container\");\n\n if (this.hideFooter) {\n classes += ' hide-footer';\n }\n\n return classes;\n }\n },\n created: function created() {\n var that = this;\n var jq = that.jq;\n var startCol = 0;\n var icol = 0;\n that.tableId = that.id || \"vdtnetable\".concat(myUniqueId++); // allow user to override default options\n\n if (that.opts) {\n that.options = jq.extend({}, that.options, that.opts);\n }\n\n that.options.order = that.options.order || [[startCol, 'asc']];\n\n if (that.fields) {\n var fields = that.fields;\n var cols = that.options.columns;\n var orders = that.options.order;\n\n for (var k in fields) {\n var field = fields[k];\n field.name = field.name || k; // disable search and sort for local field\n\n if (field.isLocal) {\n field.searchable = false;\n field.sortable = false;\n } // generate\n\n\n var col = {\n label: field.label || field.name,\n data: field.data || field.name,\n width: field.width,\n name: field.name,\n className: field.className,\n index: field.index || icol + 1\n };\n\n if (field.hasOwnProperty('defaultContent')) {\n col.defaultContent = field.defaultContent;\n }\n\n if (field.hasOwnProperty('sortable')) {\n col.orderable = field.sortable;\n }\n\n if (field.hasOwnProperty('visible')) {\n col.visible = field.visible;\n }\n\n if (field.hasOwnProperty('searchable')) {\n col.searchable = field.searchable;\n }\n\n if (field.hasOwnProperty('editField')) {\n col.editField = field.editField;\n }\n\n if (field.hasOwnProperty('classHeaderName')) {\n col.classHeaderName = field.classHeaderName;\n }\n\n if (field.hasOwnProperty('classFooterName')) {\n col.classFooterName = field.classFooterName;\n }\n\n if (field.template) {\n col.template = field.template;\n }\n\n if (field.render) {\n col.render = field.render;\n } // console.log(col)\n\n\n cols.push(col);\n\n if (field.defaultOrder) {\n orders.push([icol, field.defaultOrder]);\n }\n\n icol++;\n }\n }\n\n if (that.selectCheckbox) {\n // create checkbox column\n var _col = {\n orderable: false,\n searchable: false,\n name: '_select_checkbox',\n className: 'select-checkbox d-print-none',\n data: null,\n defaultContent: '',\n index: that.selectCheckbox - 1\n };\n that.options.columns.splice(that.selectCheckbox - 1, 0, _col); // console.log(that.options.columns)\n\n that.options.select = that.options.select || {\n style: 'os',\n selector: 'td.select-checkbox'\n };\n\n if (that.selectCheckbox === 1) {\n startCol++;\n }\n } // handle master details\n\n\n if (that.details) {\n var detailsIndex = that.details.index || 1; // create details column\n\n var _col2 = {\n orderable: false,\n searchable: false,\n name: '_details_control',\n className: 'details-control d-print-none',\n data: null,\n defaultContent: that.details.icons || '+-',\n index: detailsIndex - 1\n };\n that.options.columns.splice(detailsIndex - 1, 0, _col2);\n\n if (detailsIndex === 1) {\n startCol++;\n }\n }\n\n if (startCol > 0) {\n if (that.options.order) {\n that.options.order.forEach(function (v) {\n v[0] += startCol;\n });\n } else {\n that.options.order = [[startCol, 'asc']];\n }\n }\n },\n mounted: function mounted() {\n var that = this;\n var jq = that.jq;\n var $el = jq(that.$refs.table);\n var cols = that.options.columns;\n\n for (var k in cols) {\n var col = cols[k];\n\n if (col.template || that.$scopedSlots[col.name]) {\n col.render = that.compileTemplate(col, that.$scopedSlots[col.name]);\n }\n\n if (col.render) {\n if (!col.render.templated) {\n (function () {\n var myRender = col.render;\n\n col.render = function () {\n return myRender.apply(that, Array.prototype.slice.call(arguments));\n };\n })();\n }\n }\n\n if (col.template) {\n delete col.template;\n }\n } // handle local data loader\n\n\n if (that.dataLoader) {\n delete that.options.ajax;\n that.options.serverSide = false;\n }\n\n if (!that.hideFooter && that.columnSearch) {\n that.options.initComplete = function () {\n var api = this.api();\n var state = api.state.loaded();\n api.columns().every(function () {\n var that = this;\n var colIdx = this.index();\n\n if (state) {\n var colSearch = state.columns[colIdx].search;\n\n if (colSearch.search) {\n jq('input', this.footer()).val(colSearch.search);\n }\n }\n\n jq('input', this.footer()).on('keyup change clear search', function () {\n if (that.search() !== this.value) {\n that.search(this.value).draw();\n }\n });\n });\n };\n } // you can access and update the that.options and $el here before we create the DataTable\n\n\n that.$emit('table-creating', that, $el);\n that.dataTable = $el.DataTable(that.options);\n\n if (that.selectCheckbox) {\n // handle select all checkbox\n $el.on('click', 'th input.select-all-checkbox', function (e) {\n if (jq(e.target).is(':checked')) {\n that.dataTable.rows().select();\n } else {\n that.dataTable.rows().deselect();\n }\n }); // handle individual row select events\n\n that.dataTable.on('select deselect', function (e, dt, type, indexes) {\n var $input = $el.find('th input.select-all-checkbox');\n\n if (that.dataTable.rows({\n selected: true\n }).count() !== that.dataTable.rows().count()) {\n jq('th.select-checkbox').removeClass('selected');\n $input.attr('checked', false);\n } else {\n jq('th.select-checkbox').addClass('selected');\n $input.attr('checked', true);\n } // type is select/deselect so event become row-select or row-deselect\n\n\n that.$emit('row-' + e.type, {\n dataTable: that.dataTable,\n e: e,\n dt: dt,\n type: type,\n indexes: indexes\n }); // to get data, see const examples below\n // const rows = event.dataTable.rows( event.indexes )\n // const data = rows.data()\n });\n }\n\n $el.find('#vdtnetable1_wrapper').on('remove', function () {\n if (that.dataTable) {\n that.dataTable.destroy(true);\n }\n\n that.dataTable = null;\n }); // wire up edit, delete, and/or action buttons\n\n $el.on('click', '[data-action]', function (e) {\n e.preventDefault();\n e.stopPropagation();\n var target = jq(e.target);\n var action = target.attr('data-action'); // no action, simply exit\n\n if (!action) {\n return;\n } else {\n var tr = target; // detect if action is inside a row\n // get data from parent row/tr\n\n if (target.prop('tagName') !== 'TR') {\n tr = target.closest('tr');\n }\n\n if (tr) {\n // if child row, get previous/parent row\n if (tr.hasClass('master-details')) {\n tr = tr.prev();\n }\n\n var row = that.dataTable.row(tr);\n var data = row.data();\n that.$emit(action, data, row, tr, target);\n } else {\n // not a row click, must be other kind of action\n // such as bulk, csv, pdf, etc...\n that.$emit(action, null, null, null, target);\n }\n }\n }); // handle master/details\n\n if (that.details) {\n // default to render function\n var renderFunc = that.details.render; // must be string template\n\n if (that.details.template || that.$scopedSlots['_details']) {\n renderFunc = that.compileTemplate(that.details, that.$scopedSlots['_details']);\n } else if (renderFunc) {\n renderFunc = function renderFunc() {\n return that.details.render.apply(that, Array.prototype.slice.call(arguments));\n };\n } // handle master/details\n // Add event listener for opening and closing details\n\n\n $el.on('click', 'td.details-control', function (e) {\n e.preventDefault();\n e.stopPropagation();\n var target = jq(e.target);\n var tr = target.closest('tr');\n\n if (tr.hasClass('master-details')) {\n tr = tr.prev();\n }\n\n var row = that.dataTable.row(tr);\n\n if (row.child.isShown()) {\n // This row is already open - close it\n row.child.hide();\n tr.removeClass('master');\n } else {\n // Open this row\n var data = row.data();\n row.child(renderFunc(data, 'child', row, tr)).show();\n tr.addClass('master').next().addClass('master-details');\n }\n });\n }\n\n that.$emit('table-created', that); // finally, load data\n\n if (that.dataLoader) {\n that.reload();\n }\n },\n methods: {\n /**\n * Vue.compile a template string and return the compiled function\n *\n * @param {Object} object with template property\n * @param {Object} the slot\n * @return {Function} the compiled template function\n */\n compileTemplate: function compileTemplate(field, slot) {\n var that = this;\n var jq = that.jq;\n var vue = that.myVue;\n var res = vue.compile(\"