731 lines
24 KiB
JavaScript
731 lines
24 KiB
JavaScript
/**
|
|
* App eCommerce review
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
// apex-chart
|
|
(function () {
|
|
let cardColor, shadeColor, labelColor, headingColor;
|
|
|
|
if (isDarkStyle) {
|
|
cardColor = config.colors_dark.cardColor;
|
|
labelColor = config.colors_dark.textMuted;
|
|
headingColor = config.colors_dark.headingColor;
|
|
shadeColor = 'dark';
|
|
} else {
|
|
cardColor = config.colors.cardColor;
|
|
labelColor = config.colors.textMuted;
|
|
headingColor = config.colors.headingColor;
|
|
shadeColor = '';
|
|
}
|
|
|
|
// Visitor Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const visitorBarChartEl = document.querySelector('#reviewsChart'),
|
|
visitorBarChartConfig = {
|
|
chart: {
|
|
height: 160,
|
|
width: 190,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: '75%',
|
|
columnWidth: '40%',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded',
|
|
borderRadius: 5,
|
|
distributed: true
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -25,
|
|
bottom: -12
|
|
}
|
|
},
|
|
colors: [
|
|
config.colors_label.success,
|
|
config.colors_label.success,
|
|
config.colors_label.success,
|
|
config.colors_label.success,
|
|
config.colors.success,
|
|
config.colors_label.success,
|
|
config.colors_label.success
|
|
],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
series: [
|
|
{
|
|
data: [20, 40, 60, 80, 100, 80, 60]
|
|
}
|
|
],
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 0,
|
|
options: {
|
|
chart: {
|
|
width: '100%'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1440,
|
|
options: {
|
|
chart: {
|
|
height: 150,
|
|
width: 190,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 6,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1400,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 6,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options: {
|
|
chart: {
|
|
height: 130,
|
|
width: 190,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 6,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 992,
|
|
chart: {
|
|
height: 150,
|
|
width: 190,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 5,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 883,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 5,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
options: {
|
|
chart: {
|
|
height: 150,
|
|
width: 190,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '40%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 576,
|
|
options: {
|
|
chart: {
|
|
width: '100%',
|
|
height: '200',
|
|
type: 'bar'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 6,
|
|
columnWidth: '30% '
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 420,
|
|
options: {
|
|
plotOptions: {
|
|
chart: {
|
|
width: '100%',
|
|
height: '200',
|
|
type: 'bar'
|
|
},
|
|
bar: {
|
|
borderRadius: 3,
|
|
columnWidth: '30%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (typeof visitorBarChartEl !== undefined && visitorBarChartEl !== null) {
|
|
const visitorBarChart = new ApexCharts(visitorBarChartEl, visitorBarChartConfig);
|
|
visitorBarChart.render();
|
|
}
|
|
})();
|
|
|
|
// Datatable (jquery)
|
|
$(function () {
|
|
let borderColor, bodyBg, headingColor;
|
|
|
|
if (isDarkStyle) {
|
|
borderColor = config.colors_dark.borderColor;
|
|
bodyBg = config.colors_dark.bodyBg;
|
|
headingColor = config.colors_dark.headingColor;
|
|
} else {
|
|
borderColor = config.colors.borderColor;
|
|
bodyBg = config.colors.bodyBg;
|
|
headingColor = config.colors.headingColor;
|
|
}
|
|
|
|
// Variable declaration for table
|
|
var dt_customer_review = $('.datatables-review'),
|
|
customerView = 'app-ecommerce-customer-details-overview.html',
|
|
statusObj = {
|
|
Pending: { title: 'Pending', class: 'bg-label-warning' },
|
|
Published: { title: 'Published', class: 'bg-label-success' }
|
|
};
|
|
// reviewer datatable
|
|
if (dt_customer_review.length) {
|
|
var dt_review = dt_customer_review.DataTable({
|
|
ajax: assetsPath + 'json/app-ecommerce-reviews.json', // JSON file to add data
|
|
columns: [
|
|
// columns according to JSON
|
|
{ data: '' },
|
|
{ data: 'id' },
|
|
{ data: 'product' },
|
|
{ data: 'reviewer' },
|
|
{ data: 'review' },
|
|
{ data: 'date' },
|
|
{ data: 'status' },
|
|
{ data: ' ' }
|
|
],
|
|
columnDefs: [
|
|
{
|
|
// For Responsive
|
|
className: 'control',
|
|
searchable: false,
|
|
orderable: false,
|
|
responsivePriority: 2,
|
|
targets: 0,
|
|
render: function (data, type, full, meta) {
|
|
return '';
|
|
}
|
|
},
|
|
{
|
|
// For Checkboxes
|
|
targets: 1,
|
|
orderable: false,
|
|
searchable: false,
|
|
responsivePriority: 3,
|
|
checkboxes: true,
|
|
render: function () {
|
|
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
|
},
|
|
checkboxes: {
|
|
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
|
}
|
|
},
|
|
{
|
|
// product
|
|
targets: 2,
|
|
render: function (data, type, full, meta) {
|
|
var $product = full['product'],
|
|
$company_name = full['company_name'],
|
|
$id = full['id'],
|
|
$image = full['product_image'];
|
|
|
|
if ($image) {
|
|
// For Avatar image
|
|
var $output =
|
|
'<img src="' +
|
|
assetsPath +
|
|
'img/ecommerce-images/' +
|
|
$image +
|
|
'" alt="Product-' +
|
|
$id +
|
|
'" class="rounded">';
|
|
} else {
|
|
// For Avatar badge
|
|
var stateNum = Math.floor(Math.random() * 6);
|
|
var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
|
|
var $state = states[stateNum],
|
|
$product = full['product'],
|
|
$initials = $product.match(/\b\w/g) || [];
|
|
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
|
$output = '<span class="avatar-initial rounded bg-label-' + $state + '">' + $initials + '</span>';
|
|
}
|
|
// Creates full output for row
|
|
var $row_output =
|
|
'<div class="d-flex justify-content-start align-items-center customer-name">' +
|
|
'<div class="avatar-wrapper">' +
|
|
'<div class="avatar me-4 rounded-2 bg-label-secondary">' +
|
|
$output +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="d-flex flex-column">' +
|
|
'<span class="fw-medium text-nowrap text-heading">' +
|
|
$product +
|
|
'</span></a>' +
|
|
'<small>' +
|
|
$company_name +
|
|
'</small>' +
|
|
'</div>' +
|
|
'</div>';
|
|
return $row_output;
|
|
}
|
|
},
|
|
{
|
|
// reviewer
|
|
targets: 3,
|
|
responsivePriority: 1,
|
|
render: function (data, type, full, meta) {
|
|
var $name = full['reviewer'],
|
|
$email = full['email'],
|
|
$avatar = full['avatar'];
|
|
|
|
if ($avatar) {
|
|
// For Avatar image
|
|
var $output =
|
|
'<img src="' + assetsPath + 'img/avatars/' + $avatar + '" alt="Avatar" class="rounded-circle">';
|
|
} else {
|
|
// For Avatar badge
|
|
var stateNum = Math.floor(Math.random() * 6);
|
|
var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
|
|
var $state = states[stateNum],
|
|
$name = full['reviewer'],
|
|
$initials = $name.match(/\b\w/g) || [];
|
|
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
|
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
|
}
|
|
// Creates full output for row
|
|
var $row_output =
|
|
'<div class="d-flex justify-content-start align-items-center customer-name">' +
|
|
'<div class="avatar-wrapper">' +
|
|
'<div class="avatar avatar-sm me-4">' +
|
|
$output +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="d-flex flex-column">' +
|
|
'<a href="' +
|
|
customerView +
|
|
'"><span class="fw-medium">' +
|
|
$name +
|
|
'</span></a>' +
|
|
'<small class="text-nowrap">' +
|
|
$email +
|
|
'</small>' +
|
|
'</div>' +
|
|
'</div>';
|
|
return $row_output;
|
|
}
|
|
},
|
|
{
|
|
// Review
|
|
targets: 4,
|
|
responsivePriority: 2,
|
|
sortable: false,
|
|
render: function (data, type, full, meta) {
|
|
var $num = full['review'];
|
|
var $heading = full['head'];
|
|
var $comment = full['para'];
|
|
var $readOnlyRatings = $('<div class="read-only-ratings ps-0 mb-1"></div>');
|
|
|
|
function capitalizeFirstLetter(str) {
|
|
if (typeof str !== 'string') {
|
|
return str; // Return the input as it is if it's not a string
|
|
}
|
|
|
|
if (str.length === 0) {
|
|
return str; // Return an empty string if the input is an empty string
|
|
}
|
|
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
}
|
|
|
|
var $firstCap = capitalizeFirstLetter($heading);
|
|
// Initialize rateYo plugin
|
|
$readOnlyRatings.rateYo({
|
|
rating: $num,
|
|
rtl: isRtl,
|
|
readOnly: true, // Make the rating read-only
|
|
starWidth: '24px', // Set the width of each star
|
|
spacing: '3px', // Spacing between the stars
|
|
starSvg:
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">' +
|
|
'<path d="M20.1188 8.41458C20.0611 8.24488 19.9551 8.09576 19.8137 7.98564C19.6723 7.87552 19.5017 7.80922 19.3231 7.79492L14.0972 7.37967L11.8358 2.37375C11.7637 2.21252 11.6466 2.07558 11.4985 1.97945C11.3503 1.88333 11.1776 1.83213 11.001 1.83203C10.8244 1.83193 10.6515 1.88295 10.5033 1.97891C10.3551 2.07487 10.2378 2.21168 10.1656 2.37283L7.90417 7.37967L2.67826 7.79492C2.50268 7.80883 2.33482 7.87303 2.19477 7.97984C2.05472 8.08665 1.9484 8.23155 1.88854 8.3972C1.82869 8.56284 1.81782 8.74223 1.85724 8.9139C1.89666 9.08556 1.98471 9.24223 2.11084 9.36517L5.97276 13.1299L4.60693 19.0443C4.56545 19.2233 4.57874 19.4106 4.64508 19.582C4.71141 19.7534 4.82772 19.9009 4.97891 20.0053C5.1301 20.1098 5.3092 20.1664 5.49296 20.1678C5.67672 20.1692 5.85666 20.1153 6.00943 20.0132L11.0007 16.6857L15.9919 20.0132C16.1481 20.1168 16.3322 20.1702 16.5196 20.1661C16.707 20.162 16.8886 20.1006 17.04 19.9902C17.1915 19.8798 17.3055 19.7256 17.3667 19.5485C17.4279 19.3713 17.4335 19.1797 17.3825 18.9993L15.7059 13.1327L19.8639 9.39084C20.1362 9.14517 20.2361 8.762 20.1188 8.41458Z"/>' +
|
|
'</svg>'
|
|
});
|
|
|
|
var $review =
|
|
'<div>' +
|
|
$readOnlyRatings.prop('outerHTML') + // Get the HTML string of the rateYo plugin
|
|
'<p class="h6 mb-1 text-truncate">' +
|
|
$firstCap +
|
|
'</p>' +
|
|
'<small class="text-break pe-3">' +
|
|
$comment +
|
|
'</small>' +
|
|
'</div>';
|
|
|
|
return $review;
|
|
}
|
|
},
|
|
{
|
|
// date
|
|
targets: 5,
|
|
render: function (data, type, full, meta) {
|
|
var date = new Date(full.date); // convert the date string to a Date object
|
|
var formattedDate = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
|
return '<span class="text-nowrap">' + formattedDate + '</span>';
|
|
}
|
|
},
|
|
{
|
|
// User Status
|
|
targets: 6,
|
|
render: function (data, type, full, meta) {
|
|
var $status = full['status'];
|
|
|
|
return (
|
|
'<span class="badge ' +
|
|
statusObj[$status].class +
|
|
'" text-capitalize>' +
|
|
statusObj[$status].title +
|
|
'</span>'
|
|
);
|
|
}
|
|
},
|
|
|
|
{
|
|
// Actions
|
|
targets: -1,
|
|
title: 'Actions',
|
|
searchable: false,
|
|
orderable: false,
|
|
render: function (data, type, full, meta) {
|
|
return (
|
|
'<div class="text-xxl-center">' +
|
|
'<div class="dropdown">' +
|
|
'<a href="javascript:;" class="btn btn-icon dropdown-toggle hide-arrow p-0" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded bx-md"></i></a>' +
|
|
'<div class="dropdown-menu dropdown-menu-end">' +
|
|
'<a href="javascript:;" class="dropdown-item">Download</a>' +
|
|
'<a href="javascript:;" class="dropdown-item">Edit</a>' +
|
|
'<a href="javascript:;" class="dropdown-item">Duplicate</a>' +
|
|
'<div class="dropdown-divider"></div>' +
|
|
'<a href="javascript:;" class="dropdown-item delete-record text-danger">Delete</a>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
}
|
|
],
|
|
order: [[2, 'asc']],
|
|
dom:
|
|
'<"card-header d-flex align-items-md-center align-items-start py-0 flex-wrap flex-md-row flex-column"' +
|
|
'<"me-5 ms-n4"f>' +
|
|
'<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-start align-items-sm-center justify-content-md-end pt-0 gap-sm-2 gap-6 flex-wrap flex-sm-row flex-column mb-6 mb-sm-0"l<"review_filter"> <"mx-0 me-md-n3 mt-sm-0"B>>' +
|
|
'>t' +
|
|
'<"row"' +
|
|
'<"col-sm-12 col-md-6"i>' +
|
|
'<"col-sm-12 col-md-6"p>' +
|
|
'>',
|
|
|
|
language: {
|
|
sLengthMenu: '_MENU_',
|
|
search: '',
|
|
searchPlaceholder: 'Search Review',
|
|
paginate: {
|
|
next: '<i class="bx bx-chevron-right bx-18px"></i>',
|
|
previous: '<i class="bx bx-chevron-left bx-18px"></i>'
|
|
}
|
|
},
|
|
// Buttons with Dropdown
|
|
buttons: [
|
|
{
|
|
extend: 'collection',
|
|
className: 'btn btn-label-secondary dropdown-toggle ms-sm-2 me-3',
|
|
text: '<i class="bx bx-export bx-sm me-2"></i>Export',
|
|
buttons: [
|
|
{
|
|
extend: 'print',
|
|
text: '<i class="bx bx-printer me-2" ></i>Print',
|
|
className: 'dropdown-item',
|
|
exportOptions: {
|
|
columns: [1, 2, 3, 4, 5, 6],
|
|
// prevent avatar to be print
|
|
format: {
|
|
body: function (inner, coldex, rowdex) {
|
|
if (inner.length <= 0) return inner;
|
|
var el = $.parseHTML(inner);
|
|
var result = '';
|
|
$.each(el, function (index, item) {
|
|
if (item.classList !== undefined && item.classList.contains('customer-name')) {
|
|
result = result + item.lastChild.firstChild.textContent;
|
|
} else if (item.innerText === undefined) {
|
|
result = result + item.textContent;
|
|
} else result = result + item.innerText;
|
|
});
|
|
return result;
|
|
}
|
|
}
|
|
},
|
|
customize: function (win) {
|
|
//customize print view for dark
|
|
$(win.document.body)
|
|
.css('color', headingColor)
|
|
.css('border-color', borderColor)
|
|
.css('background-color', bodyBg);
|
|
$(win.document.body)
|
|
.find('table')
|
|
.addClass('compact')
|
|
.css('color', 'inherit')
|
|
.css('border-color', 'inherit')
|
|
.css('background-color', 'inherit');
|
|
}
|
|
},
|
|
{
|
|
extend: 'csv',
|
|
text: '<i class="bx bx-file me-2" ></i>Csv',
|
|
className: 'dropdown-item',
|
|
exportOptions: {
|
|
columns: [1, 2, 3, 4, 5, 6],
|
|
// prevent avatar to be display
|
|
format: {
|
|
body: function (inner, coldex, rowdex) {
|
|
if (inner.length <= 0) return inner;
|
|
var el = $.parseHTML(inner);
|
|
var result = '';
|
|
$.each(el, function (index, item) {
|
|
if (item.classList !== undefined && item.classList.contains('customer-name')) {
|
|
result = result + item.lastChild.firstChild.textContent;
|
|
} else if (item.innerText === undefined) {
|
|
result = result + item.textContent;
|
|
} else result = result + item.innerText;
|
|
});
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
extend: 'excel',
|
|
text: '<i class="bx bxs-file-export me-2"></i>Excel',
|
|
className: 'dropdown-item',
|
|
exportOptions: {
|
|
columns: [1, 2, 3, 4, 5, 6],
|
|
// prevent avatar to be display
|
|
format: {
|
|
body: function (inner, coldex, rowdex) {
|
|
if (inner.length <= 0) return inner;
|
|
var el = $.parseHTML(inner);
|
|
var result = '';
|
|
$.each(el, function (index, item) {
|
|
if (item.classList !== undefined && item.classList.contains('customer-name')) {
|
|
result = result + item.lastChild.firstChild.textContent;
|
|
} else if (item.innerText === undefined) {
|
|
result = result + item.textContent;
|
|
} else result = result + item.innerText;
|
|
});
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
extend: 'pdf',
|
|
text: '<i class="bx bxs-file-pdf me-2"></i>Pdf',
|
|
className: 'dropdown-item',
|
|
exportOptions: {
|
|
columns: [1, 2, 3, 4, 5, 6],
|
|
// prevent avatar to be display
|
|
format: {
|
|
body: function (inner, coldex, rowdex) {
|
|
if (inner.length <= 0) return inner;
|
|
var el = $.parseHTML(inner);
|
|
var result = '';
|
|
$.each(el, function (index, item) {
|
|
if (item.classList !== undefined && item.classList.contains('customer-name')) {
|
|
result = result + item.lastChild.firstChild.textContent;
|
|
} else if (item.innerText === undefined) {
|
|
result = result + item.textContent;
|
|
} else result = result + item.innerText;
|
|
});
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
extend: 'copy',
|
|
text: '<i class="bx bx-copy me-2" ></i>Copy',
|
|
className: 'dropdown-item',
|
|
exportOptions: {
|
|
columns: [1, 2, 3, 4, 5, 6],
|
|
// prevent avatar to be display
|
|
format: {
|
|
body: function (inner, coldex, rowdex) {
|
|
if (inner.length <= 0) return inner;
|
|
var el = $.parseHTML(inner);
|
|
var result = '';
|
|
$.each(el, function (index, item) {
|
|
if (item.classList !== undefined && item.classList.contains('customer-name')) {
|
|
result = result + item.lastChild.firstChild.textContent;
|
|
} else if (item.innerText === undefined) {
|
|
result = result + item.textContent;
|
|
} else result = result + item.innerText;
|
|
});
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
// For responsive popup
|
|
responsive: {
|
|
details: {
|
|
display: $.fn.dataTable.Responsive.display.modal({
|
|
header: function (row) {
|
|
var data = row.data();
|
|
return 'Details of ' + data['reviewer'];
|
|
}
|
|
}),
|
|
type: 'column',
|
|
renderer: function (api, rowIdx, columns) {
|
|
var data = $.map(columns, function (col, i) {
|
|
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
|
? '<tr data-dt-row="' +
|
|
col.rowIndex +
|
|
'" data-dt-column="' +
|
|
col.columnIndex +
|
|
'">' +
|
|
'<td>' +
|
|
col.title +
|
|
':' +
|
|
'</td> ' +
|
|
'<td>' +
|
|
col.data +
|
|
'</td>' +
|
|
'</tr>'
|
|
: '';
|
|
}).join('');
|
|
|
|
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
|
}
|
|
}
|
|
},
|
|
initComplete: function () {
|
|
// Adding role filter once table initialized
|
|
this.api()
|
|
.columns(6)
|
|
.every(function () {
|
|
var column = this;
|
|
var select = $('<select id="Review" class="form-select"><option value=""> All </option></select>')
|
|
.appendTo('.review_filter')
|
|
.on('change', function () {
|
|
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
|
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
|
});
|
|
|
|
column
|
|
.data()
|
|
.unique()
|
|
.sort()
|
|
.each(function (d, j) {
|
|
select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Delete Record
|
|
$('.datatables-review tbody').on('click', '.delete-record', function () {
|
|
dt_review.row($(this).parents('tr')).remove().draw();
|
|
});
|
|
|
|
// Filter form control to default size
|
|
// ? setTimeout used for multilingual table initialization
|
|
setTimeout(() => {
|
|
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
|
$('.dataTables_filter').addClass('mb-0 mb-md-6');
|
|
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
|
$('.dataTables_length').addClass('ms-n2 me-2 me-sm-0 mb-0 mb-sm-6');
|
|
}, 300);
|
|
});
|