Mengendalikan Pengiraan Jumlah dalam DataTables Footer dengan JavaScript dan jQuery

Penyelesaian 1: Membetulkan Isu Jumlah Pengaki dengan jQuery

Pendekatan ini menggunakan jQuery untuk mengira dan memaparkan jumlah dalam pengaki Jadual Data, memastikan jumlah itu ditunjukkan dalam sel pengaki yang betul tanpa membuat baris tambahan.

function calculateColumn(index) {
  var total = 0;
  $('table tbody tr').each(function() {
    var value = parseFloat($('td', this).eq(index).text().replace(/,/g, ""));
    if (!isNaN(value)) {
      total += value;
    }
  });
  $('table tfoot td').eq(index).text('Sum: ' + total);
}

$(document).ready(function() {
  var table = $('#example').DataTable({
    paging: false,
    scrollY: 400,
    buttons: ['copy', 'excel', 'pdf'],
    lengthChange: false
  });

  table.buttons().container()
    .appendTo('#example_wrapper .col-md-6:eq(0)');

  $('#example').on('draw.dt', function() {
    $('table thead th').each(function(i) {
      calculateColumn(i);
    });
  });

  $('table thead th').each(function(i) {
    calculateColumn(i);
  });
});

Penyelesaian 2: Pendekatan Modular Menggunakan JavaScript Vanila

Penyelesaian ini menggunakan JavaScript vanila untuk mencapai hasil yang sama tanpa bergantung pada perpustakaan luaran seperti jQuery. Ia menjadikan skrip modular dan boleh digunakan semula untuk pelbagai struktur jadual.

function calculateColumnTotal(table, colIndex) {
  var total = 0;
  var rows = table.querySelectorAll('tbody tr');
  rows.forEach(function(row) {
    var cellValue = row.cells[colIndex].textContent.trim();
    var value = parseFloat(cellValue.replace(/,/g, '')) || 0;
    total += value;
  });
  return total;
}

function displayFooterTotal(table, colIndex, total) {
  var footerCell = table.querySelector('tfoot tr td:nth-child(' + (colIndex + 1) + ')');
  footerCell.textContent = 'Sum: ' + total.toFixed(2);
}

document.addEventListener('DOMContentLoaded', function() {
  var table = document.querySelector('#example');
  var colIndexesToSum = [2, 3]; // Indexes of the columns to sum

  colIndexesToSum.forEach(function(index) {
    var total = calculateColumnTotal(table, index);
    displayFooterTotal(table, index, total);
  });
});

Penyelesaian 3: Pengiraan Bahagian Belakang Penuh dengan Node.js

Pendekatan ini memproses pengiraan jumlah pada bahagian belakang menggunakan Node.js dan menghantar hasilnya ke bahagian hadapan melalui API.

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/calculate-sum', (req, res) => {
  const { data, columnIndex } = req.body;
  let sum = 0;

  data.forEach(row => {
    const value = parseFloat(row[columnIndex]) || 0;
    sum += value;
  });

  res.json({ sum: sum.toFixed(2) });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Front-end fetch call to get sum
fetch('/calculate-sum', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: tableData, // Replace with actual data
    columnIndex: 2
  })
})
.then(response => response.json())
.then(result => console.log('Sum:', result.sum));

Soalan Lazim Mengenai Jadual Data dan Pengiraan Jumlah

1. Bagaimanakah cara saya menjumlahkan lajur tertentu dalam Jadual Data?
2. Anda boleh gunakan $.each() untuk menggelung nilai lajur dan mengira jumlahnya. Selepas itu, gunakan .eq() untuk mengemas kini pengaki dengan jumlah.
3. Mengapakah jumlah saya tidak ditunjukkan dalam pengaki?
4. Ini sering berlaku jika anda menyasarkan elemen pengaki yang salah. Pastikan untuk menggunakan .eq() untuk memilih sel yang betul dalam pengaki untuk memaparkan jumlah.
5. Bolehkah saya mengira jumlah pada bahagian pelayan?
6. Ya, anda boleh mengendalikan pengiraan jumlah pada pelayan dengan menggunakan pemprosesan bahagian pelayan dan mengembalikan jumlah itu ke bahagian hadapan. Ini mengurangkan beban pada pelanggan.
7. Apakah cara terbaik untuk meningkatkan prestasi Jadual Data?
8. Menggunakan pemprosesan sebelah pelayan, mengehadkan bilangan baris yang dipaparkan dan mengoptimumkan apabila jumlah dikira semuanya adalah cara yang berkesan untuk meningkatkan prestasi.
9. Bagaimanakah saya boleh mengemas kini jumlah apabila data jadual berubah?
10. Anda boleh mengikat pengiraan jumlah kepada draw.dt acara dalam DataTables, yang memastikan jumlah dikira semula apabila jadual dilukis semula.

Menggulung Isu Paparan Jumlah

Memastikan jumlah itu muncul dalam pengaki a Jadual Data memerlukan pemahaman cara memanipulasi struktur dan peristiwa jadual dengan betul. Dengan menggunakan kaedah JavaScript atau jQuery yang betul, anda boleh mengira dan memaparkan jumlah dengan cekap.

Selain itu, bergantung pada saiz set data anda, memilih pemprosesan bahagian belakang atau penyelesaian kod modular boleh meningkatkan prestasi dengan ketara. Artikel ini merangkumi pelbagai pendekatan, menyediakan penyelesaian komprehensif untuk mana-mana pembangun yang ingin menyelesaikan isu paparan jumlah pengaki.