jQuery dataTables fnDraw() not re-drawing table
datatables, jquery
Solution
The problem is that in your code `aaData[row][0].value` doesn't return anything. You can try to keep an array and set total values from there. In the `blur` event you must set the appropriate value for each of the textboxes. Here is a link to the modified code.
Problem
I have a static HTML table that contains prices and descriptions of parts from various suppliers. The table contains a column of text boxes for a user to enter a quantity against a particular part, the idea being that it then calculates the price across the suppliers so they can see the cheapest one. I have some logic in the dataTables fnFooterCallback function that generates the total, so I am trying to get the table to redraw (and so update the totals in the footer) when the value of the quantity texboxes change. I have a blur() handler registered on the inputs that calls fnDraw() on the table, but it does not seem to be doing anything. I've re-created an example here, and here is the Javascript: ``` var $productsTable = $("table#products").dataTable({ bFilter: false, bPaginate: false, bSort: false, bInfo: false, fnFooterCallback: function (nRow, aaData, iStart, iEnd, aiDisplay) { // For every column after the qty and desc colums for (var column = 2; column < aaData[0].length; column++) { var columnTotal = 0; // Sum every row into a column total for (var row = 0; row < aaData.length; row++) { var quantity = aaData[row][0].value || 0; columnTotal += aaData[row][column] * quantity; } // * and / by 100 to round to 2 decimals nRow.cells[column].innerText = Math.round(columnTotal * 100) / 100; } } }); $("input[data-qty]").blur(function () { // Example at http://datatables.net/api indicates that this should be enough? $productsTable.fnDraw(); }); ``` Can anyone can tell me where I am going wrong, please? Thank you.