Sorting column with IMG

petrusjak

Hi, I have a fully operational table - sortable on all columns except one. The one column I need sorting on is represented/rendred with a star img. The value is populated from a JSON file with true/false values (for show IMG or not).

I hope to get an idea to the best apporach solving this based on the JSON boolean value as a hidden value.

Relevant code from the dataTable looks like this:

 {
                "targets": [ 9 ],
                "visible": true,
                "searchable": true,
                "render": function(data) {
                    if (data == 'true') { return '<span><img src="images/favorite.png"></span>'} else return ' ';
}

*
* Included libraries:
* jQuery UI 1.11.4, jQuery 2.2.3, JSZip 2.5.0, pdfmake 0.1.18, Moment 2.13.0, Quill 0.20.1, Select2 4.0.1, Selectize 0.12.1, DataTables 1.10.12, Buttons 1.2.2, Column visibility 1.2.2, HTML5 export 1.2.2, Print view 1.2.2, ColReorder 1.3.2, Editor 1.5.6, Field type - Display 1.5.6, Field type - Quill 1.5.6, Field type - Select2 1.5.6, Field type - Selectize 1.5.6, Responsive 2.1.0, Select 1.2.0

allan

Sounds like a perfect use case for orthogonal data.

Allan

petrusjak

Allan, tanks for your reply.

I tried using your suggestion for orthogonal data, using HTML5 and changing my constructed image link to:
(still reciving true/false from my ajax JSON) and constructing the img link in my cell based on that)

{
                "targets": [ 9 ],
                "visible": true,
                "searchable": true,
                "render": function(data) {
                    if (data == 'true') { return '<span data-order="'+data+'"><img src="images/favorite.png"></span>'} else return '<span data-order="false"></span>';
}

This way I ended up with the following i my table where the icon is represented on data-order="true" and where no icon is represented on data-order="false".
BUT - still - no sorting possible. Could this be because DT does not handle an input of true/false as the data for sorting? In other words - do I need to change to one and zero?

<td class="editable dt-center sorting_1">
    <span data-order="true">
        <img src="images/favourite.png">
    </span>
</td>

allan

I would suggest returning 1 or 0 for everything apart from the display type in the columns.render function. That is easy for DataTables to sort.

Allan

petrusjak

Hi Allan, thanks!
I did your suggestion and changed the JSON response to 1 & 0 in addition to this change i the code (when I finally realised the simplisity in your sulution..)and it works great.

   "targets": [ 9 ],
                "visible": true,
                "searchable": true,
                data: 'start_date',
                render: function ( data, type, row ) {
                    if ( type === 'display' || type === 'filter' ) {
                        if (data == 1) { return '<span><img src="images/favorite.png"></span>'} else return '';
                    }
                    return data;