refactor datatables
This commit is contained in:
bobbyvish
@@ -33,50 +33,52 @@
|
||||
<div class="col-lg-12">
|
||||
<div class="statbox widget box box-shadow">
|
||||
<div class="widget-content widget-content-area">
|
||||
<div id="faqs_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
||||
<div id="table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table id="faqs" class="table style-3 dt-table-hover dataTable" role="grid"
|
||||
<table id="table" class="table style-3 dt-table-hover dataTable" role="grid"
|
||||
aria-describedby="style-3_info">
|
||||
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th class="checkbox-column sorting_asc text-center" tabindex="0"
|
||||
<th class="checkbox-column text-center dt-no-sorting" tabindex="0"
|
||||
aria-controls="style-3" aria-sort="ascending"
|
||||
style="width: 50.2656px;">#</th>
|
||||
<th class="checkbox-column sorting_asc text-center" tabindex="0"
|
||||
<th class="sorting_asc text-center" tabindex="0"
|
||||
aria-controls="style-3" aria-sort="ascending"
|
||||
style="width: 50.2656px;">#</th>
|
||||
style="width: 50.2656px;">RecordId</th>
|
||||
<th class="sorting text-center" tabindex="1" aria-controls="style-3"
|
||||
colspan="1"
|
||||
style="width: 44.2344px;">Email Address</th>
|
||||
<th class="sorting text-center" tabindex="2" aria-controls="style-3"
|
||||
colspan="1"
|
||||
style="width: 44.2344px;">Subject</th>
|
||||
<th class="sorting text-center" tabindex="3" aria-controls="style-3"
|
||||
<th class="sorting text-center" tabindex="3" aria-controls="style-3"
|
||||
colspan="1"
|
||||
style="width: 44.2344px;">Message</th>
|
||||
<th class="sorting text-center" tabindex="4" aria-controls="style-3"
|
||||
<th class="sorting text-center" tabindex="4" aria-controls="style-3"
|
||||
colspan="1"
|
||||
style="width: 44.2344px;">Reply</th>
|
||||
<th class="sorting text-center" tabindex="5" aria-controls="style-3"
|
||||
style="width: 79.7969px;">Active</th>
|
||||
<th class="sorting text-center" tabindex="6" aria-controls="style-3"
|
||||
<th class="sorting text-center dt-no-sorting" tabindex="4" aria-controls="style-3"
|
||||
colspan="1"
|
||||
style="width: 44.2344px;">Status</th>
|
||||
<th class="text-center dt-no-sorting" tabindex="6" aria-controls="style-3"
|
||||
style="width: 79.7969px;">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead id="filterboxrow">
|
||||
<tr>
|
||||
<th class="text-center" rowspan="1" colspan="1">id</th>
|
||||
<th class="text-center" rowspan="1" colspan="1">id</th>
|
||||
<th rowspan="1" colspan="1">Email Address</th>
|
||||
<th rowspan="1" colspan="1">Subject</th>
|
||||
<th rowspan="1" colspan="1">Message</th>
|
||||
<th rowspan="1" colspan="1">Reply</th>
|
||||
<th class="invisible" rowspan="1" colspan="1">Active</th>
|
||||
<th class="invisible" rowspan="1" colspan="1">Action</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<thead>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
@@ -193,7 +195,7 @@ var replyUrl = "{% url 'module_support:contact_us_reply' id=0 %}"
|
||||
// Entry point
|
||||
$(document).ready(function() {
|
||||
|
||||
tableName = $('#faqs');
|
||||
tableName = $('#table');
|
||||
dataTableInstance = initializeDataTable(tableName, mainUrl);
|
||||
viewClickEvent(dataTableInstance)
|
||||
replyEvent(dataTableInstance)
|
||||
@@ -217,12 +219,29 @@ function initializeDataTable(tableName, mainUrl) {
|
||||
{ data: "message" },
|
||||
{ data: "reply" },
|
||||
{ data: "active", className: "text-center", render: renderSwitch },
|
||||
{
|
||||
data: "reply",
|
||||
className: "text-center",
|
||||
render: function(data, type, row, meta) {
|
||||
var badgeText = "";
|
||||
if (data) {
|
||||
badgeText = "Completed";
|
||||
} else {
|
||||
badgeText = "Pending";
|
||||
// Change class name for pending badge
|
||||
return '<span class="badge badge-danger">' + badgeText + '</span>';
|
||||
}
|
||||
|
||||
// Return badge for completed items (optional)
|
||||
return '<span class="badge badge-primary">' + badgeText + '</span>';
|
||||
}
|
||||
},
|
||||
{ data: null, className: "text-center", render: renderActions }
|
||||
],
|
||||
debug: true,
|
||||
columnDefs: [
|
||||
{
|
||||
"targets": [3,4,5],
|
||||
"targets": [4, 5, 6],
|
||||
"render": function (data, type, row) {
|
||||
// Adjust the length of text you want to show before truncating
|
||||
var maxLength = 40;
|
||||
@@ -233,16 +252,17 @@ function initializeDataTable(tableName, mainUrl) {
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: [1, 2, 3],
|
||||
targets: [1, 2, 3, 4, 5, 6],
|
||||
searchable: true,
|
||||
orderable: true
|
||||
},
|
||||
{
|
||||
targets: [0,-1], // Targeting the last column (action column)
|
||||
targets: [0,7,-1], // Targeting the first and last column (action column)
|
||||
searchable: false,
|
||||
orderable: false
|
||||
},
|
||||
],
|
||||
orderCellsTop: true,
|
||||
dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'Bf>>>" +
|
||||
"<'table-responsive'tr>" +
|
||||
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
||||
@@ -278,6 +298,58 @@ function initializeDataTable(tableName, mainUrl) {
|
||||
});
|
||||
}
|
||||
|
||||
// Callback function for DataTable initialization complete event
|
||||
function initCompleteCallback() {
|
||||
var table = this.api();
|
||||
var tableId = this.api().table().node().id;
|
||||
console.log(tableId);
|
||||
|
||||
// Specify the column indexes for individual searchable fields (adjust as needed)
|
||||
var searchableColumns = [1, 2, 3, 4, 5];
|
||||
// Specify the column indexes for select input fields (adjust as needed)
|
||||
var selectDropdownInputColumns = [6]
|
||||
|
||||
table.columns(searchableColumns).every(function() {
|
||||
var column = this;
|
||||
var title = $(this.header()).text().trim(); // Get the column title
|
||||
|
||||
var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '" />')
|
||||
.appendTo($("thead tr:eq(1) th").eq(this.index()))
|
||||
.on("keyup", function() {
|
||||
if (column.search() !== this.value) {
|
||||
column.search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add event listener for checkbox change
|
||||
$('body').on('change', 'input[type="checkbox"]', function () {
|
||||
var checkedCount = $(`#${tableId} tbody input.archive-checkbox:checked`).length;
|
||||
var archiveButton = $('.buttons-archive');
|
||||
console.log("checkbox is checked", + checkedCount)
|
||||
archiveButton.toggle(checkedCount > 0);
|
||||
});
|
||||
|
||||
table.columns(selectDropdownInputColumns).every( function () {
|
||||
var column = this;
|
||||
console.log( column.index() );
|
||||
var nodeBelow = $(column.header()).closest('tr').next().children().eq( column.index() );
|
||||
var select = $('<select class="form-control"><option value="">All</option></select>')
|
||||
.appendTo( $(nodeBelow).empty() )
|
||||
.on( 'change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
if (column.search() !== this.value) {
|
||||
column.search(val).draw();
|
||||
}
|
||||
} );
|
||||
column.data().unique().sort().each( function ( d, j ) {
|
||||
console.log(`data is ${d}`)
|
||||
select.append( '<option value="'+d+'">'+d+'</option>' )
|
||||
} );
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Function to reload the DataTable
|
||||
function reloadDataTable() {
|
||||
dataTableInstance.ajax.reload();
|
||||
@@ -315,6 +387,12 @@ function renderActions(data, type, row) {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function HideButton(className) {
|
||||
// Hide archive button
|
||||
$(`.${className}`).hide();
|
||||
}
|
||||
|
||||
|
||||
// Function to handle archive action
|
||||
function archiveAction() {
|
||||
// Get all the checked checkboxes
|
||||
@@ -322,8 +400,8 @@ function archiveAction() {
|
||||
// If no checkboxes are checked, show an error message
|
||||
if (checkedCheckboxes.length === 0) {
|
||||
Swal.fire({
|
||||
title: 'No users selected',
|
||||
text: 'Please select at least one user to archive.',
|
||||
title: 'No record selected',
|
||||
text: 'Please select at least one record to archive.',
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
@@ -361,6 +439,7 @@ function archiveAction() {
|
||||
icon: 'success',
|
||||
showConfirmButton: true
|
||||
});
|
||||
HideButton("buttons-archive");
|
||||
// Optionally, you can reload the DataTable after successful archive
|
||||
reloadDataTable();
|
||||
},
|
||||
@@ -378,32 +457,7 @@ function archiveAction() {
|
||||
});
|
||||
}
|
||||
|
||||
// Callback function for DataTable initialization complete event
|
||||
function initCompleteCallback() {
|
||||
var api = this.api();
|
||||
|
||||
// Add individual search inputs to the first row of the thead section
|
||||
$('thead#filterboxrow th').each(function (index) {
|
||||
var title = $(this).text();
|
||||
var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '"/>')
|
||||
.on('keyup change', function () {
|
||||
if (api.column(index).search() !== this.value) {
|
||||
api.column(index).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
|
||||
$(this).empty().append(input);
|
||||
});
|
||||
|
||||
// Add event listener for checkbox change
|
||||
$('body').on('change', 'input[type="checkbox"]', function () {
|
||||
var checkedCount = $('tbody input.archive-checkbox:checked').length;
|
||||
var archiveButton = $('.buttons-archive');
|
||||
console.log("checkbox is checked", + checkedCount)
|
||||
archiveButton.toggle(checkedCount > 0);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Function to handle click event for view button
|
||||
function viewClickEvent(dataTableInstance) {
|
||||
@@ -472,49 +526,49 @@ function replyEvent(dataTableInstance){
|
||||
$('#recipient-name').text(rowData.email_address);
|
||||
$('#replyId').val(id);
|
||||
$('#replyModal').modal('show');
|
||||
|
||||
$('#replyModal').on('click', '#submitReply', function(e) {
|
||||
e.preventDefault();
|
||||
var id = $('#replyId').val();
|
||||
var replyMessage = $('#reply-text').val();
|
||||
console.log(id, message)
|
||||
|
||||
// Call the AJAX request
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: replyUrl.replace("0", id),
|
||||
data: { message: replyMessage, csrfmiddlewaretoken: '{{csrf_token}}' },
|
||||
success: function(response) {
|
||||
console.log('Response from server:', response);
|
||||
Swal.fire({
|
||||
title: 'Done!',
|
||||
text: response.msg,
|
||||
icon: 'success',
|
||||
showConfirmButton: true
|
||||
});
|
||||
// Close the modal
|
||||
$('#replyModal').modal('hide');
|
||||
|
||||
// Empty the input fields
|
||||
$('#reply-text').val('');
|
||||
// Reload the DataTable after successful toggle
|
||||
reloadDataTable();
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#replyModal').on('click', '#submitReply', function(e) {
|
||||
e.preventDefault();
|
||||
var id = $('#replyId').val();
|
||||
var replyMessage = $('#reply-text').val();
|
||||
console.log(id, replyMessage)
|
||||
|
||||
// Call the AJAX request
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: replyUrl.replace("0", id),
|
||||
data: { message: replyMessage, csrfmiddlewaretoken: '{{csrf_token}}' },
|
||||
success: function(response) {
|
||||
console.log('Response from server:', response);
|
||||
Swal.fire({
|
||||
title: 'Done!',
|
||||
text: response.msg,
|
||||
icon: 'success',
|
||||
showConfirmButton: true
|
||||
});
|
||||
// Close the modal
|
||||
$('#replyModal').modal('hide');
|
||||
|
||||
// Empty the input fields
|
||||
$('#reply-text').val('');
|
||||
// Reload the DataTable after successful toggle
|
||||
reloadDataTable();
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user