在数据表上从左到右滚动

Question

我有一种情况需要使用 Datatable 来渲染 table。但是，我需要能够水平（从左到右）而不是垂直（从上到下）对其进行排序。有什么办法可以做到这一点吗？

插图：列为 A、B、C、D、E。行是 R1、R2、R3、R4...R30。我不想对 A 到 E 进行排序，但我确实想对 R1 到 R30 中的任何一个进行排序，以便重新排列 A-E。例如，对于 R1，值的升序可能是 A、E、D、B、C，对于 R2 的值，它可能是 D、E、B、A、C。我应该能够单击行索引（该行的第一列）并查看我的 columns 重新排序。（默认是重新排序的行）

更新：我找到了这个用于水平排序的示例 Sorting Table Columns with jQuery Table Sorter，但是如何让它与数据table 一起使用？

Answer 1

您可以使用：columns().order()

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

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

更多信息： https://datatables.net/reference/api/columns().order()

编辑

您可以使用 dataTables.colReorder.min.js 插件实现此目的，您可能希望禁用拖放初始化...无论如何：

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:
//

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;
}

完整的工作示例在这里： https://jsfiddle.net/qjp8Lnam/6/

Answer 2

感谢 Stryder 提供的上述解决方案，没有它我不可能走到这一步。

添加到它，以处理列（小数和字符串）中的 non-integer 数据，切换排序并保持第一列静态（类似于header列），我将代码改进为

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://whosebug.com/questions/3730510/javascript-sort-array-and-return-an-array-of-indicies-that-indicates-the-positi
//and http://whosebug.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

jquery

row

datatables

columnsorting