Прокрутка влево-вправо по Datatable

Question

У меня есть ситуация, когда мне нужно отображать таблицу с использованием Datatables. Тем не менее, мне нужно иметь возможность сортировать его по горизонтали (слева направо), а не вертикально (сверху вниз). Есть ли способ сделать это?

Иллюстрация: Столбцы 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. Я должен был бы нажать на индекс строки (первый столбец в этой строке) и посмотреть мои столбцы переупорядочено. (По умолчанию это строка быть заказана)

Update: Я нашел этот пример для горизонтальной сортировки Sorting Table Columns with jQuery Table Sorter, но как я могу получить эту работу с DataTables?

Answer 1

вы можете использовать:. Столбцы() порядок()

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

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

Подробнее: https://datatables.net/reference/api/columns().order()

EDIT

Вы можете добиться этого с помощью 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: 
//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; 
} 

Полный рабочий пример здесь: https://jsfiddle.net/qjp8Lnam/6/

Answer 2

Благодаря Stryder для его решения выше, без которого я бы не получил это далеко.

Добавление к нему, чтобы обработать нецелые данные в столбцах (десятичные и строк), чтобы иметь переключены сортировки и держать первый столбец статической (по аналогии с колоннами заголовка), у меня есть усовершенствовал код

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/