data (a.k.a. aData) not containing all data in the currect row (custom filtering)

WouterFlorijn

Hi everyone.

I'm trying to add some filtering to my table by using my own checkboxes and price sliders etc. I've tested both $.fn.dataTable.ext.search.push and $.fn.dataTableExt.afnFiltering.push with a function (function(settings, data, dataIndex)) but both produce the same problem. Some indices in the data array contain empty strings.

My table contains 6 collumns: Picture (an html img tag), Price (a number with a euro sign in front of it), Type (a plain string), Brand (a plain string), Distance (a number with km after it) and Relevance (an HTML div displayed as a progress bar).

The Type and Brand indices in the array contain correct strings, however, the other indices just contain empty strings, even for the cells with only text in them. Additionaly, if I add HTML tags to the Type and Brand cells, the tags are not in the array but the strings are still there.

So without the price strings I won't be able to filter the table by price.

My code:

var table;

$(document).ready(function() {
    table = $('#results-table').DataTable({
        oLanguage: { sUrl: php.baseUrl + 'scripts/lang/' + php.language + '.json' },
        order:     [[ 5, "desc" ]],
        columns:   [
            { orderable: false, searchable: false                     },
            { orderable: false, searchable: false, sType: 'price'     }, // price type for custom sorting with $.fn.dataTableExt.oSort.
            null,
            null,
            {                   searchable: false                     },
            {                   searchable: false, sType: 'relevance' } // relevance type for custom sorting with $.fn.dataTableExt.oSort.
        ]
    });
});

$.fn.dataTableExt.afnFiltering.push(
    function(settings, data, dataIndex) {
        var min = 10;
        var max = 10;
        var text = data[1].replace('&euro', '').replace('€', '').replace(',', '.');
        // PROBLEM: data[1] is an empty string even though all cells contain text.
        var price = parseFloat(text);
        return ((price >= min) && (price <= max));
    }
);

Thanks for any help!