Мобильная версияПолученная таблица имеет автоматический фильтр внизу под каждым столбцом и в зависимости от используемого ключевых слов, отображаемые строки динамически фильтруются.
У меня есть столбец (Всего), для которого я хочу вычислить сумму всех отображаемых (отфильтрованных) результатов и отобразить ее в определенном div.
Я пробовал много подходов, но не нашел способа добиться этого.
Я использовал следующий код в файле datatables.js. сразу после
Код: Выделить всё
$(document).ready(function() {
console.log("Script running!");
function calculateGrandTotal(table) {
console.log("table:", table); // Log the table object
var totalElements = table.column('.total').data().toArray(); // Get data from "total" column
if (!totalElements) {
console.error("Could not calculate totalElements!");
return;
}
console.log("totalElements:", totalElements); // Log the data array
var grandTotal = 0;
for (var i = 0; i < totalElements.length; i++) {
var price = parseFloat(totalElements[i]);
grandTotal += price;
}
return grandTotal.toFixed(2);
}
var grandTotalElement = document.getElementById("grand-total-display"); //The div id in the View
var table = $('.groceryCrudTable').DataTable; // Get DataTable instance from the event target
if (table) {
console.log("DataTable instance found!");
grandTotalElement.textContent = "Grand Total: " + calculateGrandTotal(table) + " DA";
} else {
console.error("DataTables not found on the table!");
}
});
[img]https://i.sstatic. net/O9Soyxf1.png[/img]
Это самое близкое, что я смог получить после попыток, возни и поиска повсюду.
Похоже, что инициализированный DataTable Экземпляр не распознает метод столбца, и я не знаю, как получить значения этих столбцов, чтобы их суммировать. Для информации: мне удалось назначить определенный класс CSS с именем .total моему целевому столбцу, используя этот код в контроллере:
Код: Выделить всё
$crud->callbackColumn('Total', function ($value, $row) {return "
$value
";
Также кажется, что версия DataTables используется с Grocery CRUD 2.0.1 не самая последняя версия (думаю, это 1.9.2), поэтому многие из предложенных идей, которые я нашел, не применялись или приводили к проблемам несовместимости, или, может быть, это только я...
Я был бы признателен, если бы какой-нибудь эксперт в области Grocery CRUD и Javascript мог бы помочь с этим.
РЕДАКТИРОВАТЬ:
После того, как вы попробовали ответы @Rohit и @Death-is-the-real-truth. что не удалось в моей среде, вот последнее состояние моего скрипта:
Код: Выделить всё
var table = $('.groceryCrudTable').DataTable();
if (table) {
console.log("DataTable instance found!");
console.log("table:", table); // Log the table object
} else {
console.error("DataTables not found on the table!");
}
$('.groceryCrudTable').DataTable({
bRetrieve: true, // I added this in reaction to the below screenshot
"footerCallback": function() {
var api = this.api(),
total = api
.column(6)
.data()
.reduce(function(a, b) {
return parseInt(a) + parseInt(b);
}, 0).toFixed(2);
console.log("Total is:", total);
$('#grand-total-display').val(total);
}
});
Я думаю, что одна из проблем заключается в существенном различии между последней версией DataTables (2.0.7), которую большинство людей используют для устранения моей проблемы, и версией в моем случае используется последней итерацией Grocery CRUD (1.9.2). А еще есть вся среда CodeIgniter, загруженные библиотеки javascripts, файлы jquery и css, которые еще больше усложняют ситуацию.
Я не вижу другого способа устранить эту неполадку, кроме как отправить zip-архив мое приложение будет протестировано.
Подробнее здесь: https://stackoverflow.com/questions/784 ... crud-2-0-1
