Individual column filtering with Show/Hide columns dynamically
Individual column filtering with Show/Hide columns dynamically
Hi Allan,
I write an example joined "Individual column filtering" with "Show/Hide columns dynamically", on Server-side. If you consider helpful put at Server-side processing examples.
Thanks of Gus for that ideea.
[code]
var asInitVals = new Array();
var asInitNames = new Array();
var asOrigVals = new Array();
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_filter_col.php",
"aoColumns": [
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']],
"fnServerData": function ( sSource, aoData, fnCallback ) {
$("tfoot input").each( function (i) {
aoData.push( { "name": this.name, "value": this.value } );
})
$.getJSON( sSource, aoData, function (json) {
// iRecords=json.iRecords;
fnCallback(json)
} );
}//,
// "fnDrawCallback": fnOpenClose
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in the footer
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
asInitNames[i] = this.name;
// asOrigVals variable is used by fnShowHide function
asOrigVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
function fnShowHide( iCol ) {
if (iCol!="%") {
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
$("tfoot input").each( function (i) {
if (i<(iCol-1))
asInitVals[i] = asOrigVals[i];
else if (i>=(iCol-1))
if (bVis)
asInitVals[i] = asOrigVals[(i+1)];
else
asInitVals[i] = asOrigVals[i];
} );
}
}
[/code]
and in next post named "Individual column filtering with Show/Hide columns dynamically #2" I'll put "server_processing_filter_col.php" changed file from examples_support folder on your system files.
I write an example joined "Individual column filtering" with "Show/Hide columns dynamically", on Server-side. If you consider helpful put at Server-side processing examples.
Thanks of Gus for that ideea.
[code]
var asInitVals = new Array();
var asInitNames = new Array();
var asOrigVals = new Array();
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_filter_col.php",
"aoColumns": [
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']],
"fnServerData": function ( sSource, aoData, fnCallback ) {
$("tfoot input").each( function (i) {
aoData.push( { "name": this.name, "value": this.value } );
})
$.getJSON( sSource, aoData, function (json) {
// iRecords=json.iRecords;
fnCallback(json)
} );
}//,
// "fnDrawCallback": fnOpenClose
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in the footer
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
asInitNames[i] = this.name;
// asOrigVals variable is used by fnShowHide function
asOrigVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
function fnShowHide( iCol ) {
if (iCol!="%") {
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
$("tfoot input").each( function (i) {
if (i<(iCol-1))
asInitVals[i] = asOrigVals[i];
else if (i>=(iCol-1))
if (bVis)
asInitVals[i] = asOrigVals[(i+1)];
else
asInitVals[i] = asOrigVals[i];
} );
}
}
[/code]
and in next post named "Individual column filtering with Show/Hide columns dynamically #2" I'll put "server_processing_filter_col.php" changed file from examples_support folder on your system files.
This discussion has been closed.