2016-07-22 16 views
2

У меня есть таблица, где мои заголовки находятся в первом столбце. Я ищу метод для сортировки таблицы в этом столбце. Я знаю datatable и tablesorter, но я не нашел никакого решения, чтобы сортировать таблицу таким образом.Сортировка таблицы столбцов вместо строки

Чтобы было ясно, вот пример моей таблицы:

Name | John | Jane | Toto 
Value| 1256 | 125 | 8563 
Val2 | 12 | 45 | 3 

(Здесь начало кода на JSFiddle: https://jsfiddle.net/nLwo8bya/1/)

И я хочу, чтобы нажать на ячейку в первом столбце для сортировки другого столбца этой строкой.

Если я нажимаю на имя, предыдущая таблица будет:

Name | Jane | John | Toto 
Value| 125 | 1256 | 8563 
Val2 | 45 | 12 | 3 

Столбец таблицы теперь сортировать по имени (первая строка в данном случае).

Заранее спасибо за вашу помощь

Edit: Как NNNNNN говорит, я хочу, чтобы отсортировать столбцы, первым одним

+1

Возможный дубликат [ Сортировка строк таблицы в соответствии с столбцом заголовка таблицы с использованием javascript или jquery] (http://stackoverflow.com/questions/24033294/sorting-table-rows-according-to-table- header-column-using-javascript-or-jquery) – dlsso

+0

@disso - этот другой вопрос не является дубликатом: один сортирует строки с верхней строкой в ​​виде заголовков столбцов, но OP здесь хочет сортировать столбцы, причем первый столбец является заголовком строк , – nnnnnn

+0

Да, я отмечен ошибкой и не существует опции «un-flag». Тем не менее, это было бы хорошей отправной точкой для работы DSX. DSX, моим личным предложением было бы изменить формат таблицы и использовать плагин, сортирующий колонки. – dlsso

ответ

0

Первый способ, который пришел на ум должен был перестроить таблицу таким образом, что вы в конечном с один ряд с одним td на столбе; каждый из этих столбцов будет содержать вложенную таблицу с данными для этого столбца. Таким образом, процесс фактического сортировки очень прост, потому что вам просто нужно отсортировать тэги верхнего уровня.

Сложная часть - это реструктуризация. Следующим является только первая уродливая куча кода, которую я написал, чтобы это произошло. Это, вероятно, может быть убрано и оптимизировано довольно много, или полностью переписать в более разумном способе, но я оставлю это в качестве упражнения для читателя ...

$(document).ready(function(){ 
 
    var trs = $("table tr"); 
 
    var tds = trs.find("td"); 
 
    var columnCount = trs.first().children().length; 
 
    var columns = []; 
 
    var sortableTR = $("<tr></tr>"); 
 
    for (var i = 0; i < columnCount; i++) 
 
    columns.push([]); 
 

 
    tds.each(function(i,td) { 
 
    columns[i%columnCount].push($("<tr></tr>").append(td)); 
 
    }); 
 
    columns.forEach(function(v) { 
 
    sortableTR.append($("<td></td>").append($("<table></table>").append(v))); 
 
    }); 
 
    trs.remove("tr"); 
 
    $("table").append(sortableTR); 
 
    sortableTR.children().first().on("click", "tr", function(e) { 
 
    var row = $(this); 
 
    var rowIndex = row.index(); 
 
    var dataType = row.find("td").attr("data-type"); 
 
    var cols = sortableTR.children().slice(1); 
 
    cols.sort(function(a, b) { 
 
     a = $(a).find("td").eq(rowIndex).text(); 
 
     b = $(b).find("td").eq(rowIndex).text(); 
 
     if (dataType==="number") { 
 
     a = +a; 
 
     b = +b; 
 
     } 
 
     return a > b ? 1 : a < b ? -1 : 0; 
 
    }); 
 
    cols.each(function() { sortableTR.append(this); }); 
 
    }); 
 
});
table, tr, td { border: none; border-collapse: collapse; } 
 
td { width: 100px; padding: 0px; margin: 0px; } 
 
td td { border: thin grey solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr> 
 
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr> 
 
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr> 
 
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr> 
 
</table>

Обратите внимание, что я добавил a data-type атрибут к ячейкам заголовка, чтобы сортировка знала, следует ли обрабатывать данные как числовые или нет.

Закрепление стили на результирующей таблице еще одна вещь, которую я оставляю в качестве упражнения для читателя ...

+0

Большое вам спасибо за ваш код. к моему столу и, возможно, добавить данные - * для правильной сортировки. И с этим началом кода я добавлю возможность сортировки в обоих направлениях (по возрастанию и по убыванию). – DSX

0

Сортировка столбцов

// create headings array to sort 
var headings = $('#sortedTable tr:first td:gt(0)').map(function(item){  
     return $(this).text() 
    }).get(); 
    // copy and sort new array 
    var sortedHeadings = headings.slice().sort(); 
    // create object where old index is key, value is new index 
    var indices = headings.reduce(function(a,c,i){ 
    a[i]= sortedHeadings.indexOf(c); 
    return a; 
    },{}); 
    // iterate rows and sort cells 
    $('#sortedTable tr') .each(function(i){ 
    // sort using index hash object above 
    var $cells = $(this).children(':gt(0)').sort(function(a,b){ 
     return indices[$(a).index()]-indices[$(b).index()] 
    }); 
    // append sorted cells 
    $(this).append($cells) 
    }); 

DEMO

+0

Спасибо за ваш код. с моей таблицей и добавить слушателя в заголовки для сортировки таблицы, когда я нажимаю на ячейку, как предложение nnnnnn. – DSX

+0

Можете ли вы объяснить мне, почему вы используете функцию slice() в этой строке: 'code'var sortedHeadings = заголовки .slice(). sort(); 'code' – DSX

+0

Чтобы сделать копию массива – charlietfl

Смежные вопросы