Highlight and sorting problem when populating dynamically [SOLVED]

rogcg

Hello.

I'm trying to make my table have a checkbox column for each row, and also the rows to highlight on hover. It works properly when the data is static declared on html files, however when retrieving the data from server (I'm using $.getJSON) the sorting becomes a mess and the highlight stops working.

Also it shows this message for each row in the table.

[quote]
DataTables warning: Requested unknown parametr '5' from the data source for row 0
[/quote]

Here is my code:

[code]

$(function ()
{
var oTable;
var tRow;

var checkboxIdsArray = new Array();
var allChecked = false;

// To generate the checkbox for each row
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

// Deal with the checbox selection
$('#op_checkbox').live('click', function()
{
var operatorId = $(this).parents('tr').attr('id');
});

$('#example thead tr').each(function ()
{
this.insertBefore(nCloneTh, this.childNodes[0]); // Add the header before the first header
});

// Instantiate the DataTable
oTable = $('#example').dataTable({"aaSorting": [[ 0, "asc" ]]});

$.getJSON('../../controller/UserController.php/getUsers',
function(data)
{
$.each(data, function(i, item)
{
oTable.fnAddData(
[
item.idUser,
item.nameUser,
item.telephoneUser,
item.cnpjUser,
item.inscEstUser
]
);
});

$('#example tbody tr').each(function ()
{
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); // Add the checkbox to the td's
});
});

// Deals with the highlight of the rows
$('#example tbody tr').hover(function()
{
tRow = this;
$(this).children().addClass('highlighted');
},
function()
{
var nTrs = oTable.fnGetNodes();
$(tRow).children().removeClass('highlighted');
}
);

// Deals with the export options
var oTableTools = new TableTools( oTable,
{
"aButtons":
[
{
"sExtends": "div",
"sButtonText": "Hello world"
}
]
});

$('#demo').before( oTableTools.dom.container );

// Deals with the check all button click
$('#checkall_link').live('click', function()
{
var i = 0;
if(!allChecked)
{
$(oTable.fnGetNodes()).each(function()
{
allChecked = true;
$('#checkall_link').text('Uncheck all');
this.childNodes[0].childNodes[0].checked = true; // Set all checkbox to checked
checkboxIdsArray[i] = this.childNodes[0].childNodes[0].id; // Store the current checkbox id the checkboxIds array
i++;
});
}
else
{
$(oTable.fnGetNodes()).each(function()
{
allChecked = false;
$('#checkall_link').text('Check all');
this.childNodes[0].childNodes[0].checked = false; // Set all checkbox to checked
checkboxIdsArray = [];
console.log(checkboxIdsArray);
});
}
});

$('#manage_del').click(function()
{
if($(this).attr('class') == 'disabled')
{
alert("disabled");
}
else
{
alert("enabled");
}
});

$('#manage_new').click(function()
{
if($(this).attr('class') == 'disabled')
{
alert("disabled");
}
else
{
alert("enabled");
}
});
});
[/code]

Here is how my table looks like. http://imgur.com/gpiu8

As you can see in the arrow in the right side, it creates another column (maybe because the checkbox is being added), also the left arrows you can see that the 2nd column is highlighted, but the checked header is the 1st ( withcheckboxes). And when I hover the rows, it doesn't get highlighted.


Any help will be appreciated. Thanks.

rogcg

The solution is posted here. http://stackoverflow.com/questions/11145893/highlight-and-sorting-issue-when-populating-table-dynamically