Data being delivered by json/ajax, column not sorting correctly

skywalker89

If you browse to my live example, and click on Points, it does not allow me to sort. However, I can sort the other columns.

http://www.aleagueofourown.ca/league/

Here is the HTML content:

Team	Wins	Losses	Ties	Points
Toyoto	4	8	7
St. George	14	15	2

$(document).ready(function() { $('#standings').DataTable( { "searching": false, "paging": false, "order": [[ 4, "desc" ]] } ); } );

Data is being set like this:
//pointsHTML = '';
var pointsHTML = (wins2) + ties1;
$(('#points'+team)).append(pointsHTML);
//console.log(pointsHTML);

            // FOR TEST
            var points2HTML = 23;
                $('#points2').append(points2HTML);
            //console.log(points2HTML);

            // FOR TEST
            var points3HTML = 32;
                $('#points3').append(points3HTML);
            //console.log(points3HTML);
           } 

Thanks for looking.

kthorngren

You are updating the HTML directly. Datatables doesn't know about the update so it isn't updating its data cache which is used for sorting. You can try using rows().invalidate() after updating the points column.

A better way would be to use columns.render in the points column to sum the other three columns. This example will help illustrate:
https://datatables.net/examples/advanced_init/column_render.html

Instead of return data +' ('+ row[3]+')'; you would have something like return row[1] +row[2] + row[3];. And set the columnDefs.targets to targets: 4.

This option will alleviate the need for you to set the id for that points column.

Kevin