DataTables 101 - Please help me sort some goofy data!

stimpygato

Hi there all,
I have an issue with "column6" who's data is one of two possible FontAwesome icons, an X or a Checkmark.
I want to sort by this icon, so that the X's or Checkmarks would be grouped together.

The script:

<script>
    $(document).ready(function() {
    $('#example').DataTable( {
                "processing": true,
                responsive: {
                    details: true
                },
                "ajax": '/wp-content/plugins/data/data.json',
                "deferRender": true,
                "iDisplayLength": 25,
                "bLengthChange": true,
                "bProcessing": false,
                "sPaginationType": "full_numbers",
                "lengthMenu": [[25, 50, 100, 150, 250], [25, 50, 100, 150, 250]],
                "columnDefs": [
                    { "searchable": true, "targets": 5 }
                ],
                "columns": [
                    { "data": "column1" },
                    { "data": "column2" },
                    { "data": "column3" },
                    { "data": "column4" },
                    { "data": "column5" },
                    { "data": "column6" },
                    { "data": "column7" }
                ]
} );
  jQuery('.dataTables_filter input').attr('placeholder','Filter');
} );
</script>

The HTML:

<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
            </tr>
        </thead>
 
    </table>

From the JSON:
X symbol:

"column6": "<i class=\"fa fa-times\"><\/i>",

or Checkmark:

"column6": "<i class=\"fa fa-check\"><\/i>",

Any help will be ridiculously appreciated! Thanks!

jLinux

I believe you can add a data-sort HTML5 tag with the value to each td, that should work. I think theres an option youll have to set when initializing DataTables tho, not 100% sure.. ill look when i get on my desktop, im on my cell right now

Edit: You dont need an init option, using the HTML5 tag is good enough.

Heres some examples
http://datatables.net/examples/advanced_init/html5-data-attributes.html

ThomD

If the HTML5 option won't work for you, there is the .render() option in the column config.

This tells DT how to interact with the data based on what event is happening: display, sort, filter, type. In your case you would return the 'data' for a display, and some conditional value for sort.

http://datatables.net/reference/api/cell().render()

stimpygato

I really appreciate your help(s) jLinux & ThomD. I'll be trying out both suggestions and will let you know how I make out. Thanks to both of you again for your time! U guys rock!