$.fn.dataTableExt.ofnSearch['icon'] doesn't work anymore after upgrade from 1.9 to 1.10

Noone1981

I had a method which was used to be able to seach on the title of an icon in a column.

$.fn.dataTableExt.ofnSearch['icon'] = function(a) { return getTitleFromHtml(a); };

Which doesn't work anymore. I use mRender to render the data as an icon in a column, but the sort/filter isn't triggered. I read somewhere else to use mData instead but that doesn't help either.

Can someone point me to the right direction?

jr42.gordon

You are correct in using columns.render . Sounds to me like you will need to create your own custom sorting function for this column. Here is a snippet of example code

// DT column config
{
     "targets" : 'col-short-cmt',
     "type"    : "single-text-input",
     "data"    : null,
     "width"   : '220px',
     "render"  : function (row, type, data) {
         return (input html)
    }
}

// custom js sort function
$.fn.dataTable.ext.type.order['single-text-input-pre'] = function ( a ) {
            // This is for columns that contain a single HTML <input> that need to utilize padRight
            // use for inputs with letters
            return $(a).val().padRight($(a).attr('maxlength'));
        };

In your case, I would give each icon a text attribute and return that in the custom sort function. That value will be what DataTables sorts and filters on.

jr42.gordon

Another option would be using just columns.render in the following way taken from the linked API page

Use different data for the different data types requested by DataTables (filter, display, type or sort). The property names of the object is the data type the property refers to and the value can defined using an integer, string or function using the same rules as columns.render normally does.

Note that an _ option can optionally be specified. This is the default value to use if you haven't specified a value for the data type requested by DataTables. If there is no option for the data type requested that the _ option has not been specified, the data pointed to by the columns.data option will be used.

"data": "phone",   // would be null in your case
"render": {
    "_": "plain",
    "filter": "filter",
    "display": "display"
}

allan

Interesting that ofnSearch doesn't work - it should. I'll look into that. Having said that, it was a fairly horrible hack and the orthogonal data that @jr42.gordon describes is much better.

Allan