DataTables and ColumnFilter with percentage column

Question

I've added percent column to my datatable using below code:

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "percent-pre": function (a) {
        var x = (a == "-") ? 0 : a.replace(/%/, "");
        return parseFloat(x);
    },

    "percent-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "percent-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

This way I can sort column that has '%'.

I also added ColumnFilter plugin (Plugin Link) to my table to be able to filter individual columns.

When I save and display percentage value as numeric I'm able to filter that column: Fiddle Demo

But when I set that column type to percentage and try to filter same column I always get empty data: Fiddle Demo

Open first fiddle and click 'Load data' and try to set range for '%' column - everything is working. Now do the same with second one - You'll get empty table.

How can I apply range filter to column with percent values?

Answer 1

As it turned out it is quite easy.
Store percent value as numeric and declare column as follows:

{
    sTitle: "%",
    sType: "numeric",
    sWidth: "40px",
    sClass: "center",
    mData: "percent",
    mRender: function (data, type, full) {
        if (type === 'display') {//this is available in DataTables 1.9+
            return data + ' %';
        }
        return data;
    }
}

This is my updated and working jsFiddle