DataTables individual column filtering

DataTables individual column filtering

jkaton125jkaton125 Posts: 1Questions: 0Answers: 0
edited April 2013 in Bug reports
I am using the code from the individual column filtering and I came across what I think could be a bug in the code. I have multiple tables in my site on different pages. Each table has its own settings therefor I need to utilize this filtering multiple times. I found that when doing this if you give your footer a class name and each tables footer has the same class name then datatables crashes.

I have pulled the common code out into a single file:

[code]
(function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/

$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();

// by default we only want unique data
if ( typeof bUnique == "undefined" ) bUnique = true;

// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;

// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

// list of rows which we're going to loop through
var aiRows;

// use only filtered rows
if (bFiltered == true){
aiRows = oSettings.aiDisplay;
} else {
// use all rows
aiRows = oSettings.aiDisplayMaster; // all row numbers
}

// set up data array
var asResultData = new Array();
var sortType = false;
for (var i=0,c=aiRows.length; i -1){
// ignore unique values?
continue;
} else {
// else push the value onto the result data array
asResultData.push(sValue);
}
}
if(sortType){
return asResultData.sort(numOrdA);
}else{
return asResultData.sort(alph);
}
}})(jQuery);

function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; ib) return 1;
if(a==b) return 0;
if(a

Replies

  • waseemwaseem Posts: 3Questions: 0Answers: 0
    Hi I am also applying searching on the table using the data grid. I occur the same problem in filtering the values.

    I am doing like this, for first table i am using the code:-

    var j = jQuery.noConflict();
    j(document).ready(function() {

    var oTable = j("#example").dataTable( {
    "oLanguage": {
    "sSearch": "Search all columns:"
    },
    "bJQueryUI": true,
    "iDisplayLength": 10,
    "sPaginationType": "full_numbers"
    });

    j("tfoot input").keyup( function () {
    /* Filter on the column (the index) of this element */
    oTable.fnFilter( this.value, j("tfoot input").index(this) );
    } );


    and for the second table:-

    var j = jQuery.noConflict();
    j(document).ready(function() {
    var oTable = j("#example1").dataTable( {
    "oLanguage": {
    "sSearch": "Search all columns:"
    },
    "bJQueryUI": true,
    "iDisplayLength": 10,
    "sPaginationType": "full_numbers"
    });

    j("tfoot input").keyup( function () {
    /* Filter on the column (the index) of this element */
    oTable.fnFilter( this.value, j("tfoot input").index(this) );
    } );



    This is my footer code for first table:-








    This is my footer code for second table:-








    As you can see I have same code for the tfoot
    I also try to declare tfoot like this but it didn't work.
    I don't know where i am doing wrong so please help me with this.
  • waseemwaseem Posts: 3Questions: 0Answers: 0
    var j = jQuery.noConflict();
    j(document).ready(function() {

    var oTable = j("#example").dataTable( {
    "oLanguage": {
    "sSearch": "Search all columns:"
    },
    "bJQueryUI": true,
    "iDisplayLength": 10,
    "sPaginationType": "full_numbers"
    });

    j("tfoot input").keyup( function () {
    /* Filter on the column (the index) of this element */
    oTable.fnFilter( this.value, j("tfoot input").index(this) );
    } );

    j("tfoot th").each( function ( i ) {
    if(this.innerHTML=="drop")
    {
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
    j(\'select\', this).change( function () {
    oTable.fnFilter( j(this).val(), i );
    } );}
    } );

    j("tfoot input").each( function (i) {
    asInitVals[i] = this.value;
    } );

    j("tfoot input").focus( function () {
    if ( this.className == "search_init" )
    {
    this.className = "";
    this.value = "";
    }
    } );

    j("tfoot input").blur( function (i) {
    if ( this.value == "" )
    {
    this.className = "search_init";
    this.value = asInitVals[j("tfoot input").index(this)];
    }
    } );

    } );

    Actually this is the whole script i am using.
    Might be helpful to you.
This discussion has been closed.