Client-side filtering on cells with drop down list and ampersand character

lorakarol

Howdy,

I have a table that has three columns. Each column has either an input or a select element inside. I am having trouble with the data table's native client-side filtering functionality. Datatable can't seem to filter on the column with the select element, or on the first row's last column value because of the greater than symbol which get parsed to < . For example, filtering for "Category" or for "Product" does not filter the table to one row.
Here is my JsFiddle : http://jsfiddle.net/39hQK/7/

Using a lot of console.log's I believe I have traced the error down to Datatable's function _fnBuildSearchRow

Javascript for Datatables _fnBuildSearchRow:
[code]
function _fnBuildSearchRow( oSettings, aData )
{
var sSearch = aData.join(' ');
/* If it looks like there is an HTML entity in the string, attempt to decode it */
if ( sSearch.indexOf('&') !== -1 )
{
sSearch = $('').html(sSearch).text();
}

// Strip newline characters
return sSearch.replace( /[\n\r]/g, " " );
}
[/code]

Removing the IF block allows me to filter using "Product".
Creating HTML elements from the individual aData array values and grabbing the selected option for the drop down allows me to filter on "Category".

However, modifying the _fnBuildSearchRow function in these two ways causes problems when filtering on tables that do not have input or select elements inside the column cells.

lorakarol

Edit: Line 7 should be
[code]
sSearch = $('').html(sSearch).text();
[/code]

I would like to add that the reason "Product" can't be filtered on is because Line 7, inside the IF block, sets sSearch to blank because the HTML created from the sSearch string has no text property.

The reason that "Category" can't be filtered on is because the sSearch string for that row includes ALL of the drop down option values and text for the select element. This is the same for every row. They each have all the options in the search string, so they all have "Category".