Het verwerken van somberekeningen in de voettekst van DataTables met JavaScript en jQuery

Probleem met de weergave van de som van de voettekst van de DataTable opgelost

Bij het werken met HTML-tabellen En Gegevenstabellen, is het vaak essentieel om de som van de waarden te berekenen. Een veel voorkomende uitdaging waarmee ontwikkelaars worden geconfronteerd, is ervoor zorgen dat de som correct in de voettekst van de tabel wordt weergegeven. Dit probleem doet zich voor wanneer het berekende bedrag in een extra rij verschijnt in plaats van in de aangewezen voettekst.

Dit probleem komt vaak voor bij het gebruik JavaScript of jQuery voor somberekeningen in Gegevenstabellen. De verkeerde plaatsing van het totaal wordt veroorzaakt door onjuiste targeting van het voettekstelement. Om dit op te lossen, is een zorgvuldige aanpassing van de code vereist om ervoor te zorgen dat de som op de juiste locatie wordt weergegeven.

In dit artikel begeleiden we u bij het oplossen van dit probleem. We zullen uitleggen waarom de som niet in de voettekst verschijnt en laten zien hoe u het script kunt aanpassen om ervoor te zorgen dat de totalen correct worden weergegeven.

Aan het eind heeft u een duidelijk inzicht in hoe u kolomsommen in DataTables berekent en deze nauwkeurig weergeeft in de voettekst zonder een extra rij te maken. Laten we erin duiken en dit probleem stap voor stap oplossen.

Inzicht in de berekening van de som van de voettekst van de DataTable

De primaire functie van het script is het berekenen en weergeven van de som van specifieke kolommen in een DataTable. De uitdaging die hier wordt aangepakt, is het probleem waarbij de som in een extra rij wordt weergegeven in plaats van in de tabellen voettekst. De oplossing maakt gebruik van een combinatie van jQuery En JavaScript om de som voor elke kolom dynamisch te berekenen en deze vervolgens correct in de voettekst te plaatsen.

De functie berekenKolom() is essentieel voor het proces. Het loopt door elke rij van de tabel met behulp van de .elk() methode en extraheert de numerieke waarden uit de opgegeven kolom met behulp van de .tekst() En parseFloat() functies. Deze waarden worden vervolgens opgeteld tot een totaal. Het commando vervangen() wordt hier gebruikt om eventuele komma's uit de numerieke reeksen te verwijderen, zodat de waarden correct kunnen worden geparseerd in getallen met drijvende komma.

Zodra het totaal is berekend, werkt het script de corresponderende voettekstcel bij met behulp van de .eq() En .tekst() opdrachten. De .eq() methode selecteert de juiste voettekstcel op basis van de index, en zorgt ervoor dat de som onder de juiste kolom wordt weergegeven. Deze oplossing wordt efficiënt gemaakt door de somberekening te binden aan de teken.dt gebeurtenis, die wordt geactiveerd telkens wanneer de DataTable opnieuw wordt getekend of bijgewerkt. Dit zorgt ervoor dat de som opnieuw wordt berekend wanneer de gegevens veranderen.

De tweede oplossing zorgde voor toepassingen vanille JavaScript, waardoor de afhankelijkheid van jQuery wordt opgeheven. Het bereikt dezelfde functionaliteit door handmatig de rijen te herhalen en de voettekst bij te werken met de som. Deze oplossing biedt grotere flexibiliteit en modulariteit voor ontwikkelaars die externe bibliotheken liever vermijden. Ten slotte verplaatst de derde benadering de berekening naar de backend met behulp van Knooppunt.js, wat handig is bij het omgaan met grote datasets of complexe bewerkingen die profiteren van verwerking op de server.

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);
  });
});

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);
  });
});

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));

Optimalisatie van de DataTable-prestaties voor grote datasets

Bij het verwerken van grote datasets in Gegevenstabellenwordt prestatie-optimalisatie een cruciaal aspect. Naarmate het aantal rijen toeneemt, kan het berekenen van de som voor specifieke kolommen de functionaliteit van de tabel vertragen. Een effectieve methode om de prestaties te verbeteren is het benutten van verwerking aan de serverzijde. In plaats van alle gegevens aan de clientzijde te laden en te manipuleren, zorgt verwerking op de server ervoor dat de server het zware werk kan doen. De tabel geeft alleen de rijen weer die momenteel zichtbaar zijn voor de gebruiker, wat de responsiviteit aanzienlijk verbetert.

Een ander belangrijk aspect om te overwegen is het gebruik van paginering En scrollen opties. Voor tabellen met grote hoeveelheden gegevens is het beter om paginering of scrollen in te schakelen om te voorkomen dat de browser wordt overspoeld met te veel rijen. Door opties in te stellen zoals scrollY Door het aantal rijen dat tegelijk wordt weergegeven te beperken, kunt u de initiële laadtijd verkorten en een soepelere gebruikerservaring garanderen. Dit is vooral nuttig wanneer gebruikers interactie hebben met functies zoals sorteren en filteren.

Bovendien helpt het minimaliseren van DOM-manipulaties door het aantal keren dat de som wordt herberekend te verminderen, de efficiëntie te verbeteren. In plaats van de som elke keer dat de tabel wordt getekend opnieuw te berekenen, kunt u de berekening bijvoorbeeld alleen activeren wanneer dat nodig is, bijvoorbeeld wanneer de gegevens zijn gefilterd of bijgewerkt. Door de frequentie van de herberekening van de som te optimaliseren, zorgt u ervoor dat de tabel responsief blijft en toch nauwkeurige bedragen in de voettekst weergeeft.