How To: Select column / Restyle cells based on selected column.

robertbrower

I am using the fnDrawCallback option to add click event handlers to specific th elements as shown below so that when the user clicks on a th element the cells whose values differ from the selected column are shown in red.

[code]
, "fnDrawCallback": function (oSettings) {

var $thead = $(oSettings.nTHead);

$thead.find("span.ui-icon-close:not(.click)").each(function (index) {
$(this).bind("click", function (event) {
removeColumn($this, settings, index);
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
initializeRecipeCompareDataTable($this, settings); // completely recreates the datatable.
}).hover(
function () {
$(this).addClass("ui-state-hover");
}
, function () {
$(this).removeClass("ui-state-hover");
}
).addClass("click");
});

$thead.find('th.recipe:not(.click)').click(
function () {
var $thead = $(this).parent().parent();
if (selectedColumnIndex != undefined) {
$thead.find('th:nth-child(' + (selectedColumnIndex + 1) + ')').removeClass('ui-state-active');
}

selectedColumnIndex = $('th', this.parentNode).index(this) % oSettings.aoColumns.length;
$thead.find('th:nth-child(' + (selectedColumnIndex + 1) + ')').addClass('ui-state-active');
settings.$recipeComparisonDataTable.fnDraw();
}
).addClass("click");

if (selectedColumnIndex != undefined) {

$thead.find('th:nth-child(' + (selectedColumnIndex + 1) + ')').addClass('ui-state-active');

var $dataTable = $(oSettings.nTable).dataTable();
$dataTable.find("td.ui-state-error").removeClass("ui-state-error");
var filteredRows = $dataTable.$('tr', { "filter": "applied" });
var selectedDataIndex = 4 + selectedColumnIndex;
$.each(filteredRows, function (index, tr) {

var data = $dataTable.fnGetData(tr);
for (var i=7; i<$dataTable.DataTable.settings[0].aoColumns.length; i++) {
if (data[i] != data[selectedDataIndex]) {
$(tr).find("td:nth-child(" + (i - 3) + ")").addClass("ui-state-error");
}
}

});
}
}
[/code]

When the user clicks on one of the th.recipe elements, the selectedColumnIndex is obtained, the "ui-state-active" class is added to the th and the table is redrawn.

When the table is redrawn, the data is examined and the cells are styled accordingly.

Seems to work. Any suggestions for improvements?

Thanks

Robert