When you’re building dashboards in WordPress, you often need to use the data currently loaded into your DataTable—not just display it. This post shows how to sum values from all rows (across pages), split totals by Payment Method (Cash vs Card), and push those numbers into elements elsewhere on the page using a reusable callback function.

What you’ll achieve

• Fetch table data via AJAX (already set up in your site).
• Initialise DataTables in WordPress.
• Use a separate, reusable function to:
  • Iterate all rows, ignoring pagination.
  • Parse currency like £45.00.
  • Update three on‑page counters: #log_cash, #log_card, #log_total.

HTML markup

<div class="table-container">
  <table id="todaysLogs" class="table display" style="width:100%">
    <thead>
      <tr>
        <th>Time</th>
        <th>Driver</th>
        <th>Sold By</th>
        <th>Amount</th>
        <th>Discount</th>
        <th>Payment Method</th>
        <th>Action</th>
      </tr>
    </thead>
  </table>
</div>

<!-- Totals display anywhere on the page -->
<div class="totals">
  <div>Cash: <strong id="log_cash">£0.00</strong></div>
  <div>Card: <strong id="log_card">£0.00</strong></div>
  <div>Total: <strong id="log_total">£0.00</strong></div>
</div>

Reusable totals function + DataTable initialisation

function updateLogTotals(tableApi) {
    var parseValue = function (val) {
	if (typeof val === 'string') {
		return parseFloat(val.replace(/[£,]/g, '')) || 0;
	}
	return typeof val === 'number' ? val : 0;
   };
   var totalCash = 0;
   var totalCard = 0;
   tableApi.rows().every(function () {
        var row = this.data();
	var value  = row[3];
	var type   = row[5];
	if (type === 'Cash') {
		totalCash += parseValue(value);
	} else {
		totalCard += parseValue(value);
	}
   });

   $('#log_cash').text('£' + totalCash.toFixed(2));
   $('#log_card').text('£' + totalCard.toFixed(2));
   $('#log_total').text('£' + (totalCash + totalCard).toFixed(2));
}

var todaysLogsTable = $('#todaysLogs').DataTable({
	dom: 'Bfrtip',
	pageLength: 9,
	buttons: [
		'copyHtml5',
		'excelHtml5',
		'csvHtml5',
		'pdfHtml5'
	],
	columns: [
		null,
		null,
		null,
		null,
		null,
		null,
		{ orderable: false }
	],
	ajax: {
		url: ajaxurl + '?action=pos&post_action=get_todays_log'
		},
		responsive: true,
		drawCallback: function (settings) {
			updateLogTotals(this.api());
		}
});

Make it truly reusable

You can call updateLogTotals(todaysLogsTable) from anywhere—buttons, tabs, or additional DataTables events:

$('#todaysLogs').on('search.dt order.dt page.dt', function () {
    updateLogTotals(todaysLogsTable);
});

Only count visible (filtered) rows? Swap:

tableApi.rows().every(…)

for:

tableApi.rows({ filter: 'applied' }).every(…)

Currency parsing

parseFloat(val.replace(/[£,]/g, ''))

• If your data can include other currencies or locale formats, either:
  • Normalise in your renderer (e.g. store a hidden numeric value and display £ in the cell), or
  • Expand the regex/logic to handle your formats.

Troubleshooting

• Totals don’t change: Ensure your callback runs on drawCallback or bind to search.dt/order.dt/page.dt.
• NaN totals: Check the column indexes and the currency format in your cells.
• Wrong values: Confirm your table’s JSON returns the columns in the order you expect.

Takeaway

With a small reusable function and DataTables’ API, you can read current table data on the client and push real‑time totals into any element on your WordPress page—no page refreshes, no backend edits required here.