Left-to-right scrolling on Datatable

Question

I have a situation where I need to render a table using Datatables. However, I need to be able to sort it horizontally (left to right) instead of vertically (top to bottom). Is there any way I can do this?

Illustration: Columns are A,B,C,D,E. Rows are R1,R2,R3,R4...R30. I don't want to sort A to E, but I do want to sort any one of R1 to R30 so that A-E gets rearranged. For instance, for R1, the ascending order of values might be A,E,D,B,C and for R2's values, it might be D,E,B,A,C. I should be able to click on a row index (first column in that row) and see my columns reordered. (Default is rows being reordered)

Update: I found this example for horizontal sorting Sorting Table Columns with jQuery Table Sorter, but how do I get this to work with datatables?

Nothing - I couldn't find any way to do it in the Datatables documentation. Or did I miss something? — S R, Jun 28 '16 at 13:16
I found this example for horizontal sorting http://stackoverflow.com/questions/3127503/sorting-table-columns-with-jquery-table-sorter, but how do I get this to work with datatables? — S R, Jun 29 '16 at 04:53

Stryder · Accepted Answer · 2016-06-29T12:55:06.680

2

you can use: columns().order()

var table = $('#example').DataTable();

table
    .columns( '.status' )
    .order( 'desc' )
    .draw();

More info: https://datatables.net/reference/api/columns().order()

EDIT

You can achieve this by using the dataTables.colReorder.min.js plugin, you might want to disable the drag and drop initialy...in anycase:

var table = $('#example').DataTable({
    colReorder: true
});

table.on('click', 'td:first-of-type', function() {
  var values = [];
  var row = $(this).parent();

  row.children('td').each(function(i){
    values.push($(this).text());
  });

  var colOrder = values.sortIndices;
  table.colReorder.order(colOrder);

});

//get index after sort
//credit to this post:
//http://stackoverflow.com/questions/3730510/javascript-sort-array-and-return-an-array-of-indicies-that-indicates-the-positi

function sortWithIndeces(toSort) {
  for (var i = 0; i < toSort.length; i++) {
    toSort[i] = [toSort[i], i];
  }
  toSort.sort(function(a, b) {
    return a[0] - b[0]
  });
  toSort.sortIndices = [];
  for (var j = 0; j < toSort.length; j++) {
    toSort.sortIndices.push(toSort[j][1]);
    toSort[j] = toSort[j][0];
  }
  return toSort;
}

Full working example here: https://jsfiddle.net/qjp8Lnam/6/

edited Jun 29 '16 at 12:55

answered Jun 28 '16 at 13:42

Stryder

1,421
1
10
6

How is this any different? I tried it and it still does a top-down sort according to the column values. I need a left-right sort according to the row values. – S R Jun 29 '16 at 04:40
Sorry it took me a while to get back to you on this - had the flu. Thank you so much! This is a very crisp way of doing what I wanted! I am trying to find a solution on my own, but just wondering if you already had one: how can I insulate the first column from the sort? :) – S R Jul 11 '16 at 14:53
Also, if any of the columns contain text, the sort fails. I suspect it has to do with the sortIndices function but I don't know what to do next. (jsFiddle updated) – S R Jul 11 '16 at 18:32
Have forked the jsFiddle for the following: a static first column, toggled sorting and to handle string/decimal/integer comparisons. I have accepted Stryder's solution because it got me this far, and the revised jsFiddle is only a modification of the same. See https://jsfiddle.net/rsreeram84/tnozsp5s/ – S R Jul 12 '16 at 06:55

S R · Answer 2 · 2016-07-12T06:57:10.887

Thanks to Stryder for his solution above, without which I wouldn't have gotten this far.

Adding to it, to process non-integer data in the columns (decimals and strings), to have toggled sorting and to keep the first column static (similar to the header columns), I have refined the code to

var currRow = "";
var currOrd = "";

var table = $('#example').DataTable({
  colReorder: true
});

table.on('click', 'td:first-of-type', function() {
  var values = [];
  var row = $(this).parent();
  var valPos = [];
  if (currRow != row.index()) { //if this row has not been sorted yet
    currOrd = "desc";
    currRow = row.index();
  }
  currOrd = (currOrd == "asc") ? "desc" : "asc"; //toggle sorting order
  log("Sort row# " + (currRow + 1) + " in " + currOrd + " order");
  row.children('td').each(function() {
    values.push(this.innerHTML);
    valPos.push(values.length - 1);
  });

  //remove logs :)
  //    log("initial values: " + values);
  log("initial order: " + valPos);
  //    log("sorted values: " + sortWithIndeces(values));
  sortWithIndeces(values)
  log("new column order: " + values.sortIndices);

  var colOrder = values.sortIndices;
  table.colReorder.order(colOrder);

});

//get index after sort
//credit to:
//http://stackoverflow.com/questions/3730510/javascript-sort-array-and-return-an-array-of-indicies-that-indicates-the-positi
//and http://stackoverflow.com/questions/38076749/left-to-right-scrolling-on-datatable/38077921#38077921
function sortWithIndeces(toSort) {
  var firCol = toSort[0];
  for (var i = 1; i < toSort.length; i++) {
    toSort[i] = [toSort[i], i];
  }
  toSort.sort(function(a, b) {
    if ((a != firCol) && (b != firCol)) {
      if (currOrd == "asc") {
        if (($.isNumeric(a[0])) && ($.isNumeric(a[0]))) {
          return a[0] - b[0];
        } else {
          return ((a[0] > b[0]) ? 1 : ((a[0] < b[0]) ? -1 : 0));
        }
      } else //descending order
      {
        if (($.isNumeric(a[0])) && ($.isNumeric(a[0]))) {
          return b[0] - a[0];
        } else {
          return ((b[0] > a[0]) ? 1 : ((b[0] < a[0]) ? -1 : 0));
        }
      }
    } else
      return 0;
  });
  toSort.sortIndices = [0];
  for (var j = 1; j < toSort.length; j++) {
    toSort.sortIndices.push(toSort[j][1]);
    toSort[j] = toSort[j][0];
  }
  return toSort;
}

//throwaway :)
function log(s) {
  $('.console').append(s + "<br/>");
}

jsFiddle: https://jsfiddle.net/rsreeram84/tnozsp5s/

Left-to-right scrolling on Datatable

2 Answers2