fnRowCallback assistance

jcrawford

Hello Everone,

I am trying to implement a few things here. First if a record in the table is marked as disabled I would like it to show up red as disabled and I have that working. I am also trying to implement selectable rows.. This also works except when I try to click a disabled row, the color does not change to tell me it is selected.

I have the following code and in theory (from what I know about JS) this should work yet it yields the same results. I cannot select the disabled rows. Any assistance would be appreciated.

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
// "No" means it is a disabled row
if(aData[6] == "No") {
// Check to see if the row is selected
if ( jQuery.inArray(aData[0], gaiSelected) != -1 ) {
// The row is selected so mark it as selected
nRow.className = "row_selected";
} else {
// The row is not selected so set the disabled_row class
nRow.className = "disabled_row"
}
} else {
// The row is NOT disabled so we just need to see if the row is selected and if so set the class to row_selected
if ( jQuery.inArray(aData[0], gaiSelected) != -1 ) {
nRow.className = "row_selected";
}
}
return nRow;
}
[/code]

allan

So you've got four states:

- selected, disabled
- selected, enabled
- not selected, disabled
- not selected, enabled

But only two classes are being applied:

- row_selected
- disabled_row

Do you need three classes (and an empty class state)? Also remember when using .className you destroy any classes which are applied to the row already (for example 'odd' / 'even'). $.addClass and $.removeClass might be useful here. So yes, I think just adding conditions to detect the other states might do the job nicely here :-)

Allan

jcrawford

Allan,

Thanks for the information. I will try to work out these conditions later today.

I only have 2 classes because no classes = enabled, no change in state. Disabled records use the disable_row class and selected records use the class for selected rows.

the only issue i am having is getting the disabled rows to change color when you select them, all other rows seem to work fine.

Thanks,
Joseph Crawford

jcrawford

Hello,

I was able to get it to work after screwing with the code for a bit.

However I have some code that worked prior for select/deselect all and buttons that worked based on that. Any idea how this could be converted to work with the datatables selectable rows code?

About the only part I need any assistance with is the part where the items are added to the array etc. If I hit select all I would want all the rows to be selected, etc.

here is my original JS code

[code]

function checkBoxesVsButtons(theElement)
{
theForm = theElement.form;
var totalChecked = 0;
for( var x = 0; x < theForm.length; x++)
{
if( theForm[x].type =="checkbox" && theForm[x].checked ) totalChecked++;
}
if(document.getElementById("edit") !== null)
{
if(totalChecked > 1 || totalChecked == 0)
{
document.getElementById("edit").disabled = true;
}
else
{
document.getElementById("edit").disabled = false;
}
}
if(document.getElementById("viewKeywords") !== null)
{
if(totalChecked > 1 || totalChecked == 0)
{
document.getElementById("viewKeywords").disabled = true;
}
else
{
document.getElementById("viewKeywords").disabled = false;
}
}
if(totalChecked > 0 )
{
document.getElementById("enable").disabled = false;
document.getElementById("disable").disabled = false;
document.getElementById("delete").disabled = false;
}
else
{
document.getElementById("enable").disabled = true;
document.getElementById("disable").disabled = true;
document.getElementById("delete").disabled = true;
}
}

function confirmAction(theElement) {
var action = ucfirst(theElement.value);
var theForm = theElement.form;

// don't show an alert box if it is any of these.
if(
action.toLowerCase() == 'add keywords' || action.toLowerCase() == 'add campaign' ||
action.toLowerCase() == 'view keywords' || action.toLowerCase() == 'edit'
)
{
return true;
}
else
{
var totalChecked = 0;
for( var x = 0; x < theForm.length; x++)
{
if( theForm[x].type =="checkbox" && theForm[x].checked ) totalChecked++;
}

var type = ucfirst(theForm['type'].value);
if (confirm("Are you sure you want to " + action + " the " + totalChecked + " " + type + " you have selected?")) {
return true;
}
return false;
}
}


function ucfirst (str) {
str += '';
str = str.toLowerCase();
var f = str.charAt(0).toUpperCase();
return f + str.substr(1);
}

function checkUncheckAll(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z

allan

One option might be to run the click function on each node which isn't currently selected - that's probably the easiest, but not optimal. A more efficient method would be to add the ID's to the array. However, are you using server-side processing? The problem with that, and my default code, is that it requires knowledge of each row id, a different option might be to have a 'selected all' variable, which when true all rows are selected, and then false they aren't... Lots of options :-)

Allan