ENUM plugin including HTML markup

lion1

Hello,

I am using the enum plugin to define an order for a column. Cells have a span that inside it is the value, and if you double click, you can open an editor to choose statuses. When I don't include the hidden text box the enum works fine like below when the table line is.

<td><span>Incoming</span></td>

Paired with the enum,

$.fn.dataTable.enum(['<span>In Progress</span>', '<span>Queue</span>', '<span>Incoming</span>','<span>Reporting</span>']);

That works above.
It does not work when the html is

<span>Incoming</span><input class="form-control text-box single-line" id="item_Status" name="item.Status" style="display:none" type="text" value="Incoming" />

and the enum declaration is:

$.fn.dataTable.enum(['<span>Incoming</span><input class="form-control text-box single-line" id="item_Status" name="item.Status" style="display:none" type="text" value="Incoming" />']);

I left out other two enums in the example to be concise.
I was wondering if the enum isn't working in the second example due to the quotes in the input/do I need to escape it? or if there is a way to just get the value inside the span or the value shown in the datatable which is the raw value. Thank you

allan

I would suggest modifying the enum plug-in a little to strip HTML from the data:

(function ($) {


var unique = 0;
var types = $.fn.dataTable.ext.type;

// Using form $.fn.dataTable.enum breaks at least YuiCompressor since enum is
// a reserved word in JavaScript
$.fn.dataTable['enum'] = function ( arr ) {
    var name = 'enum-'+(unique++);
    var lookup = window.Map ? new Map() : {};

    for ( var i=0, ien=arr.length ; i<ien ; i++ ) {
        lookup[ arr[i] ] = i;
    }

    // Add type detection
    types.detect.unshift( function ( d ) {
        return lookup[ d ] !== undefined ?
            name :
            null;
    } );

    // Add sorting method
    types.order[ name+'-pre' ] = function ( d ) {
        return lookup[ d ].replace(/<.*?>/g, '');
    };
};


})(jQuery);

That should simplify things significantly.

Allan

lion1

Hey Allan! Thanks for the response. I added the replace line in the enum.js. Still not getting the result I would like, should my enum include the HTML tags as seen in the source? or should my enum strip the HTML as well and just have the values? When my enum has the html included, I get an error that 'replace is not a function' to be used there. But when I have the enum with just the values like below

$.fn.dataTable.enum(['In Progress', 'Queue', 'Incoming', 'Reporting']);

The order is not set. I am hoping to order it like order: [[0, 'asc']], where col(0) has the enum values.

Thanks!

allan

should my enum include the HTML tags as seen in the source?

No. Remove the tags from the enum configuration.

Try this:

return lookup[ d ].toString().replace(/<.*?>/g, '');

Allan

lion1

Thanks!