ஜாவாஸ்கிரிப்ட் மற்றும் jQuery உடன் டேட்டாடேபிள்ஸ் அடிக்குறிப்பில் தொகை கணக்கீட்டைக் கையாளுதல்

டேட்டாடேபிள் அடிக்குறிப்பு தொகை காட்சி சிக்கலை சரிசெய்கிறது

உடன் பணிபுரியும் போது HTML அட்டவணைகள் மற்றும் தரவு அட்டவணைகள், மதிப்புகளின் கூட்டுத்தொகையைக் கணக்கிடுவது பெரும்பாலும் அவசியம். டெவலப்பர்கள் எதிர்கொள்ளும் பொதுவான சவால், அட்டவணையின் அடிக்குறிப்பில் தொகை சரியாகத் தோன்றுவதை உறுதி செய்வதாகும். கணக்கிடப்பட்ட தொகை, நியமிக்கப்பட்ட அடிக்குறிப்பிற்குப் பதிலாக கூடுதல் வரிசையில் தோன்றும் போது இந்தச் சிக்கல் எழுகிறது.

பயன்படுத்தும் போது இந்த பிரச்சனை அடிக்கடி எதிர்கொள்ளப்படுகிறது ஜாவாஸ்கிரிப்ட் அல்லது jQuery தொகை கணக்கீடுகளுக்கு தரவு அட்டவணைகள். அடிக்குறிப்பு உறுப்பின் தவறான இலக்கால் மொத்தத்தின் தவறான இடமாற்றம் ஏற்படுகிறது. இதைச் சரிசெய்வதற்கு, தொகை சரியான இடத்தில் காட்டப்படுவதை உறுதிசெய்ய, குறியீட்டை கவனமாக சரிசெய்தல் தேவைப்படுகிறது.

இந்த கட்டுரையில், இந்த சிக்கலைத் தீர்ப்பதற்கான செயல்முறையை நாங்கள் உங்களுக்கு வழங்குவோம். அடிக்குறிப்பில் ஏன் தொகை தோன்றவில்லை என்பதை விளக்குவோம் மற்றும் மொத்தங்கள் சரியாகக் காட்டப்படுவதை உறுதிசெய்ய ஸ்கிரிப்டை எவ்வாறு மாற்றுவது என்பதை விளக்குவோம்.

முடிவில், தரவு அட்டவணையில் நெடுவரிசைத் தொகைகளைக் கணக்கிடுவது மற்றும் அவற்றைத் துல்லியமாகக் காண்பிப்பது எப்படி என்பது பற்றிய தெளிவான புரிதல் உங்களுக்கு இருக்கும். அடிக்குறிப்பு கூடுதல் வரிசையை உருவாக்காமல். இந்த சிக்கலை படிப்படியாக சரிசெய்வோம்.

தரவு அட்டவணை அடிக்குறிப்பு தொகை கணக்கீட்டைப் புரிந்துகொள்வது

ஸ்கிரிப்ட்டின் முதன்மை செயல்பாடு கணக்கிட்டு காட்டுவதாகும் தொகை தரவு அட்டவணையில் குறிப்பிட்ட நெடுவரிசைகள். அட்டவணையில் காட்டப்படுவதற்குப் பதிலாக கூடுதல் வரிசையில் கூட்டுத்தொகை காட்டப்படும் சிக்கல் இங்கே தீர்க்கப்பட்டுள்ளது. அடிக்குறிப்பு. தீர்வு கலவையைப் பயன்படுத்துகிறது jQuery மற்றும் ஜாவாஸ்கிரிப்ட் ஒவ்வொரு நெடுவரிசையின் தொகையையும் மாறும் வகையில் கணக்கிட்டு, அதை அடிக்குறிப்பில் சரியாக வைக்கவும்.

செயல்பாடு கணக்கிடும் நெடுவரிசை() செயல்முறைக்கு அவசியம். இது அட்டவணையின் ஒவ்வொரு வரிசையிலும் சுழல்கிறது .ஒவ்வொரு() முறை மற்றும் குறிப்பிட்ட நெடுவரிசையில் இருந்து எண் மதிப்புகளைப் பிரித்தெடுக்கிறது .text() மற்றும் parseFloat() செயல்பாடுகள். இந்த மதிப்புகள் பின்னர் மொத்தமாக குவிக்கப்படுகின்றன. கட்டளை மாற்று() எண் சரங்களில் இருந்து காற்புள்ளிகளை அகற்ற, மதிப்புகள் மிதக்கும் புள்ளி எண்களாக சரியாகப் பாகுபடுத்தப்படுவதை உறுதிசெய்ய இங்கே பயன்படுத்தப்படுகிறது.

மொத்தம் கணக்கிடப்பட்டவுடன், ஸ்கிரிப்ட் தொடர்புடைய அடிக்குறிப்பு கலத்தைப் பயன்படுத்தி புதுப்பிக்கிறது .eq() மற்றும் .text() கட்டளைகள். தி .eq() முறை அதன் குறியீட்டின் மூலம் பொருத்தமான அடிக்குறிப்பு கலத்தைத் தேர்ந்தெடுத்து, தொகை சரியான நெடுவரிசையின் கீழ் காட்டப்படுவதை உறுதி செய்கிறது. இந்தத் தீர்வு, கூட்டுத்தொகை கணக்கீட்டை பிணைப்பதன் மூலம் திறமையானதாக்கப்படுகிறது டிரா.டி.டி நிகழ்வு, ஒவ்வொரு முறையும் தரவு அட்டவணை மீண்டும் வரையப்படும் அல்லது புதுப்பிக்கப்படும். தரவு மாறும்போதெல்லாம் தொகை மீண்டும் கணக்கிடப்படுவதை இது உறுதி செய்கிறது.

இரண்டாவது தீர்வு பயன்பாடுகளை வழங்கியது வெண்ணிலா ஜாவாஸ்கிரிப்ட், jQuery மீதான சார்புநிலையை நீக்குகிறது. வரிசைகளின் மேல் கைமுறையாக மீண்டும் செய்வதன் மூலமும், தொகையுடன் அடிக்குறிப்பைப் புதுப்பிப்பதன் மூலமும் இது அதே செயல்பாட்டை அடைகிறது. வெளிப்புற நூலகங்களைத் தவிர்க்க விரும்பும் டெவலப்பர்களுக்கு இந்தத் தீர்வு அதிக நெகிழ்வுத்தன்மையையும் மட்டுப்படுத்துதலையும் வழங்குகிறது. இறுதியாக, மூன்றாவது அணுகுமுறை கணக்கீட்டைப் பயன்படுத்தி பின்தளத்திற்கு நகர்த்துகிறது Node.js, இது பெரிய தரவுத்தொகுப்புகள் அல்லது சர்வர் பக்க செயலாக்கத்திலிருந்து பயனடையும் சிக்கலான செயல்பாடுகளைக் கையாளும் போது பயனுள்ளதாக இருக்கும்.

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

பெரிய தரவுத்தொகுப்புகளுக்கான டேட்டாடேபிள் செயல்திறனை மேம்படுத்துதல்

பெரிய தரவுத்தொகுப்புகளை கையாளும் போது தரவு அட்டவணைகள், செயல்திறன் தேர்வுமுறை ஒரு முக்கியமான அம்சமாகிறது. வரிசைகளின் எண்ணிக்கை அதிகரிக்கும் போது, ​​குறிப்பிட்ட நெடுவரிசைகளுக்கான தொகையைக் கணக்கிடுவது அட்டவணையின் செயல்பாட்டைக் குறைக்கும். செயல்திறனை மேம்படுத்துவதற்கான ஒரு சிறந்த முறை சர்வர் பக்க செயலாக்கத்தை மேம்படுத்துவதாகும். கிளையன்ட் பக்கத்தில் உள்ள எல்லா தரவையும் ஏற்றுவதற்கும் கையாளுவதற்கும் பதிலாக, சர்வர் பக்க செயலாக்கமானது, அதிக எடையைக் கையாள சர்வரை அனுமதிக்கிறது. அட்டவணையானது தற்போது பயனருக்குத் தெரியும் வரிசைகளை மட்டுமே வழங்கும், இது பதிலளிப்பதை கணிசமாக மேம்படுத்துகிறது.

கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கிய அம்சம் பயன்பாடு ஆகும் பேஜினேஷன் மற்றும் ஸ்க்ரோலிங் விருப்பங்கள். அதிக அளவிலான தரவுகளைக் கொண்ட அட்டவணைகளுக்கு, பல வரிசைகளைக் கொண்ட உலாவியை அதிகமாக்குவதைத் தவிர்க்க, பேஜினேஷன் அல்லது ஸ்க்ரோலிங்கை இயக்குவது நல்லது. போன்ற விருப்பங்களை அமைப்பதன் மூலம் சுருள் மற்றும் ஒரே நேரத்தில் காட்டப்படும் வரிசைகளின் எண்ணிக்கையைக் கட்டுப்படுத்துவதன் மூலம், ஆரம்ப சுமை நேரத்தைக் குறைத்து, மென்மையான பயனர் அனுபவத்தை உறுதிசெய்யலாம். வரிசைப்படுத்துதல் மற்றும் வடிகட்டுதல் போன்ற அம்சங்களுடன் பயனர்கள் தொடர்பு கொள்ளும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

மேலும், தொகையை மீண்டும் கணக்கிடும் முறைகளின் எண்ணிக்கையைக் குறைப்பதன் மூலம் DOM கையாளுதல்களைக் குறைப்பது செயல்திறனை மேம்படுத்த உதவுகிறது. எடுத்துக்காட்டாக, அட்டவணை வரையப்படும் ஒவ்வொரு முறையும் கூட்டுத்தொகையை மீண்டும் கணக்கிடுவதற்குப் பதிலாக, தரவு வடிகட்டப்பட்ட அல்லது புதுப்பிக்கப்பட்டபோது, ​​தேவைப்படும்போது மட்டுமே கணக்கீட்டைத் தூண்டலாம். தொகை மறுகணக்கீட்டின் அதிர்வெண்ணை மேம்படுத்துவது, அடிக்குறிப்பில் துல்லியமான தொகைகளை வழங்கும்போது அட்டவணை பதிலளிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.