Problem with column filter function
Problem with column filter function
nickolojon
Posts: 20Questions: 0Answers: 0
Hi all, I would to know if you have some idea on what is wrong with this code. For you to completely understand the scenario, I used fnAddData() and fnStandingRedraw() in populating my table, I'm also using column filtering function of the table and add some modifications in the code that was provided in the web by another developer. Basically it creates a div with a list of checkox with distinct values per column like in an excel file. What I would like to accomplish is that after i add data using fnAddData() and fnStandingRedraw() to display the newly created data it will also add another checbox if the value is still not added in the popup checkbox list. I seem to make the code work during a debug mode but it does not show in the table what i wanted to happen, only the first data is displayed. Here is the code for your reference, can you tell me what is wrong with this, and why is it that when i debug it the code seem to work fine but the changes doesnt show the table
function fnCreateCheckbox(oTable, aData) {
if (aData == null)
aData = _fnGetColumnValues(oTable.fnSettings(), i, true, true, true);
var index = i;
var r = '', j, iLen = aData.length;
//clean the string
var localLabel = label.replace('%', 'Perc').replace("&", "AND").replace("$", "DOL").replace("£", "STERL").replace("@", "AT").replace(/\s/g, "_");
localLabel = localLabel.replace(/[^a-zA-Z 0-9]+/g, '');
//clean the string
//button label override
if (properties.sFilterButtonText != null || properties.sFilterButtonText != undefined) {
labelBtn = properties.sFilterButtonText;
} else {
labelBtn = label;
}
var relativeDivWidthToggleSize = 10;
var numRow = iLen;
var numCol = 1;
//count how many column should be generated and split the div size
var divWidth = 100 / numCol - 2;
var divWidthToggle = relativeDivWidthToggleSize * numCol;
if (numCol == 1) {
divWidth = 20;
}
var uniqueId = oTable.attr("id") + localLabel;
var checkToggleDiv = uniqueId + "-flt-toggle";
var checkToggleInnerDiv = uniqueId + "-flt-toggle-inner";
var divRowDef = '';
var divClose = '';
var isExisting = false;
if ($("#" + checkToggleDiv).html() == null) {
r += ''; //dialog div
r += divRowDef;
isExisting = false;
} else {
r += $("#" + checkToggleDiv)[0].outerHTML.substr(0, $("#" + checkToggleDiv)[0].outerHTML.length - 6); //$("#" + checkToggleDiv)[0].outerHTML;
isExisting = true;
}
for (j = 0; j < iLen; j++) {
if ($("#" + checkToggleInnerDiv + ">input#" + aData[j]).html() == null) {
r += '' + aData[j] + '
';
}
var checkbox = $(r);
th.html(checkbox);
th.wrapInner('');
//on every checkbox selection
checkbox.change(function () {
var search = '';
var or = '|';//var for select checks in 'or' into the regex
var resSize = $('input:checkbox[name="' + localLabel + '"]:checked').size();
$('input:checkbox[name="' + localLabel + '"]:checked').each(function (index) {
//concatenation for selected checks in or
if ((index == 0 && resSize == 1)
|| (index != 0 && index == resSize - 1)) {
or = '';
}
//trim
search = search.replace(/^\s+|\s+$/g, "");
search = search + $(this).val() + or;
or = '|';
});
//execute search
oTable.fnFilter(search, index, true, false, true, true);
fnOnFiltered();
});
}
// if (isExisting) {
// $("#" + checkToggleDiv).html(r);
// }
$('#' + checkToggleDiv).dialog({
height: 400,
width: 200,
draggable: false,
resizable: false,
autoOpen: false,
//show: "blind",
hide: "blind",
buttons: [{
text: "Reset",
height: 30,
width: 60,
click: function () {
$('input:checkbox[name="' + localLabel + '"]:checked').each(function (index3) {
$(this).attr('checked', false);
$(this).addClass("search_init");
});
oTable.fnFilter('', index, true, false);
fnOnFiltered();
return false;
}
},
{
text: "Close",
height: 30,
width: 60,
click: function () { $(this).dialog("close"); }
}
]
});
$('#headerButton' + i).click(function () {
$('#' + checkToggleDiv).dialog('open');
var target = $(this);
$('#' + checkToggleDiv).dialog("widget").position({ my: 'right bottom',
at: 'right bottom',
of: target
});
return false;
});
var fnOnFilteredCurrent = fnOnFiltered;
fnOnFiltered = function () {
fnOnFilteredCurrent();
};
}
function fnCreateCheckbox(oTable, aData) {
if (aData == null)
aData = _fnGetColumnValues(oTable.fnSettings(), i, true, true, true);
var index = i;
var r = '', j, iLen = aData.length;
//clean the string
var localLabel = label.replace('%', 'Perc').replace("&", "AND").replace("$", "DOL").replace("£", "STERL").replace("@", "AT").replace(/\s/g, "_");
localLabel = localLabel.replace(/[^a-zA-Z 0-9]+/g, '');
//clean the string
//button label override
if (properties.sFilterButtonText != null || properties.sFilterButtonText != undefined) {
labelBtn = properties.sFilterButtonText;
} else {
labelBtn = label;
}
var relativeDivWidthToggleSize = 10;
var numRow = iLen;
var numCol = 1;
//count how many column should be generated and split the div size
var divWidth = 100 / numCol - 2;
var divWidthToggle = relativeDivWidthToggleSize * numCol;
if (numCol == 1) {
divWidth = 20;
}
var uniqueId = oTable.attr("id") + localLabel;
var checkToggleDiv = uniqueId + "-flt-toggle";
var checkToggleInnerDiv = uniqueId + "-flt-toggle-inner";
var divRowDef = '';
var divClose = '';
var isExisting = false;
if ($("#" + checkToggleDiv).html() == null) {
r += ''; //dialog div
r += divRowDef;
isExisting = false;
} else {
r += $("#" + checkToggleDiv)[0].outerHTML.substr(0, $("#" + checkToggleDiv)[0].outerHTML.length - 6); //$("#" + checkToggleDiv)[0].outerHTML;
isExisting = true;
}
for (j = 0; j < iLen; j++) {
if ($("#" + checkToggleInnerDiv + ">input#" + aData[j]).html() == null) {
r += '' + aData[j] + '
';
}
var checkbox = $(r);
th.html(checkbox);
th.wrapInner('');
//on every checkbox selection
checkbox.change(function () {
var search = '';
var or = '|';//var for select checks in 'or' into the regex
var resSize = $('input:checkbox[name="' + localLabel + '"]:checked').size();
$('input:checkbox[name="' + localLabel + '"]:checked').each(function (index) {
//concatenation for selected checks in or
if ((index == 0 && resSize == 1)
|| (index != 0 && index == resSize - 1)) {
or = '';
}
//trim
search = search.replace(/^\s+|\s+$/g, "");
search = search + $(this).val() + or;
or = '|';
});
//execute search
oTable.fnFilter(search, index, true, false, true, true);
fnOnFiltered();
});
}
// if (isExisting) {
// $("#" + checkToggleDiv).html(r);
// }
$('#' + checkToggleDiv).dialog({
height: 400,
width: 200,
draggable: false,
resizable: false,
autoOpen: false,
//show: "blind",
hide: "blind",
buttons: [{
text: "Reset",
height: 30,
width: 60,
click: function () {
$('input:checkbox[name="' + localLabel + '"]:checked').each(function (index3) {
$(this).attr('checked', false);
$(this).addClass("search_init");
});
oTable.fnFilter('', index, true, false);
fnOnFiltered();
return false;
}
},
{
text: "Close",
height: 30,
width: 60,
click: function () { $(this).dialog("close"); }
}
]
});
$('#headerButton' + i).click(function () {
$('#' + checkToggleDiv).dialog('open');
var target = $(this);
$('#' + checkToggleDiv).dialog("widget").position({ my: 'right bottom',
at: 'right bottom',
of: target
});
return false;
});
var fnOnFilteredCurrent = fnOnFiltered;
fnOnFiltered = function () {
fnOnFilteredCurrent();
};
}
This discussion has been closed.