JQuery Datatables: order by data

Question

How can I order column by a value passed to data instead of custom rendered content?

What I have done

I use jquery datatables to display data. From server to client I pass numeric data only. On client side i create table content using custom render functions:

{
    "targets": [9],
    "visible": true,
    "searchable": true,
    "render": function(data, type, row) {

        if (row[9] == -2) {
            return '';
        }
        if (row[9] == -1) {
            return '<img width="20px" src="/~home/www/images/loader.gif" />';
        }
        var result = row[9];
        if (row[10] > 0) {
            result += '<strong><span class="text-success">';
            result += '(+' + row[10] + ')';
            result += '</span></strong>';
        }
        if (row[10] < 0) {
           result += '<strong><span class="text-danger">';
           result += '(' + row[10] + ')';
           result += '</span></strong>';
        }
        return result;
    },
}, 
{
    "targets": [10, 11],
    "visible": false,
    "searchable": false,
},

Even through columns 9,10 and 11 contain only numeric values. Column 9 is ordered as string based on string values generated by provided JS function.

How instruct datatables to order by original 'row[9]', but keep custom rendered content in cells?

davidkonrad · Accepted Answer · 2017-05-01 02:07:58Z

"render": function(data, type, row) {
                         ^^^^

The purpose of type is to be able to return different values for different actions. By default type can be either 'filter', 'display' or 'sort'. You return what you would like to see displayed in the column in all cases, and therefore you get alpha sort based on the rendered content, not numerical sorting based on the data value. Return different markup strings only if the request type is 'display', otherwise return original data : :

{
  "targets": [9],
  "visible": true,
  "searchable": true,
  "render": function(data, type, row) {
    if (type == 'display') {
      if (row[9] == -2) {
        return '';
      }
      if (row[9] == -1) {
        return '<img width="20px" src="/~home/www/images/loader.gif" />';
      }
      var result = row[9];
      if (row[10] > 0) {
        result += '<strong><span class="text-success">';
        result += '(+' + row[10] + ')';
        result += '</span></strong>';
      }
      if (row[10] < 0) {
        result += '<strong><span class="text-danger">';
        result += '(' + row[10] + ')';
        result += '</span></strong>';
      }
      return result;
    } else {
      return data
    } 
  }
}

rie · Accepted Answer · 2017-04-30 20:44:51Z

0

You can wrap original data in invisible tag and append it to output, like this:

    if (row[9] == -2) {
        return '<span style="display:none"></span>';
    }
    if (row[9] == -1) {
        return '<span style="display:none">'+ row[9] +'</span><img width="20px" src="/~home/www/images/loader.gif" />';
    }
    var result = '<span style="display:none">'+ row[9] +'</span>' + row[9];

So row will be order by data, hidden in span.

answered Apr 30, 2017 at 20:44

rie

2962 silver badges5 bronze badges

Collectives™ on Stack Overflow

JQuery Datatables: order by data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related