https://sge.feemg.com.br/template/novo-assets/js/pages/crud/metronic-datatable/base/local-sort.js

1"use strict";
2// Class definition
3
4var KTDatatableLocalSortDemo = function() {
5	// Private functions
6
7	// basic demo
8	var demo = function() {
9
10		var datatable = $('.kt-datatable').KTDatatable({
11			// datasource definition
12			data: {
13				type: 'remote',
14				source: {
15					read: {
16						url: 'https://keenthemes.com/metronic/tools/preview/api/datatables/demos/default.php',
17					},
18				},
19				pageSize: 10,
20				serverPaging: false,
21				serverFiltering: true,
22				serverSorting: false,
23				saveState: {
24					cookie: true,
25					webstorage: true,
26				},
27			},
28
29			// layout definition
30			layout: {
31				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
32				footer: false, // display/hide footer
33			},
34
35			// column sorting
36			sortable: true,
37
38			pagination: true,
39
40			search: {
41				input: $('#generalSearch'),
42			},
43
44			// columns definition
45			columns: [
46				{
47					field: 'RecordID',
48					title: '#',
49					sortable: 'asc',
50					width: 30,
51					type: 'number',
52					selector: false,
53					textAlign: 'center',
54				}, {
55					field: 'OrderID',
56					title: 'Order ID',
57				}, {
58					field: 'Country',
59					title: 'Country',
60					template: function(row) {
61						return row.Country + ' ' + row.ShipCountry;
62					},
63				}, {
64					field: 'ShipDate',
65					title: 'Ship Date',
66					type: 'date',
67					format: 'MM/DD/YYYY',
68				}, {
69					field: 'TotalPayment',
70					title: 'Payment',
71					type: 'number',
72					// custom sort callback for number
73					sortCallback: function(data, sort, column) {
74						var field = column['field'];
75						return $(data).sort(function(a, b) {
76							var aField = a[field];
77							var bField = b[field];
78							if (isNaN(parseFloat(aField)) && aField != null) {
79								aField = Number(aField.replace(/[^0-9\.-]+/g, ''));
80							}
81							if (isNaN(parseFloat(bField)) && aField != null) {
82								bField = Number(bField.replace(/[^0-9\.-]+/g, ''));
83							}
84							aField = parseFloat(aField);
85							bField = parseFloat(bField);
86							if (sort === 'asc') {
87								return aField > bField ? 1 : aField < bField ? -1 : 0;
88							}
89							else {
90								return aField < bField ? 1 : aField > bField ? -1 : 0;
91							}
92						});
93					},
94				}, {
95					field: 'Status',
96					title: 'Status',
97					// callback function support for column rendering
98					template: function(row) {
99						var status = {
100							1: {'title': 'Pending', 'class': 'kt-badge--brand'},
101							2: {'title': 'Delivered', 'class': ' kt-badge--danger'},
102							3: {'title': 'Canceled', 'class': ' kt-badge--primary'},
103							4: {'title': 'Success', 'class': ' kt-badge--success'},
104							5: {'title': 'Info', 'class': ' kt-badge--info'},
105							6: {'title': 'Danger', 'class': ' kt-badge--danger'},
106							7: {'title': 'Warning', 'class': ' kt-badge--warning'},
107						};
108						return '<span class="kt-badge ' + status[row.Status].class + ' kt-badge--inline kt-badge--pill">' + status[row.Status].title + '</span>';
109					},
110				}, {
111					field: 'Type',
112					title: 'Type',
113					autoHide: false,
114					// callback function support for column rendering
115					template: function(row) {
116						var status = {
117							1: {'title': 'Online', 'state': 'danger'},
118							2: {'title': 'Retail', 'state': 'primary'},
119							3: {'title': 'Direct', 'state': 'success'},
120						};
121						return '<span class="kt-badge kt-badge--' + status[row.Type].state + ' kt-badge--dot"></span>&nbsp;<span class="kt-font-bold kt-font-' + status[row.Type].state + '">' +
122								status[row.Type].title + '</span>';
123					},
124				}, {
125					field: 'Actions',
126					title: 'Actions',
127					sortable: false,
128					width: 110,
129					overflow: 'visible',
130					autoHide: false,
131					template: function() {
132						return '\
133						<div class="dropdown">\
134							<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown">\
135                                <i class="la la-cog"></i>\
136                            </a>\
137						  	<div class="dropdown-menu dropdown-menu-right">\
138						    	<a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\
139						    	<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
140						    	<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
141						  	</div>\
142						</div>\
143						<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit details">\
144							<i class="la la-edit"></i>\
145						</a>\
146						<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete">\
147							<i class="la la-trash"></i>\
148						</a>\
149					';
150					},
151				}],
152		});
153
154    $('#kt_form_status').on('change', function() {
155      datatable.search($(this).val().toLowerCase(), 'Status');
156    });

157
158    $('#kt_form_type').on('change', function() {
159      datatable.search($(this).val().toLowerCase(), 'Type');
160    });
161
162    $('#kt_form_status,#kt_form_type').selectpicker();
163
164	};
165
166	return {
167		// public functions
168		init: function() {
169			demo();
170		},
171	};
172}();
173
174jQuery(document).ready(function() {
175	KTDatatableLocalSortDemo.init();
176});