tinysortを使用してクライアント側でテーブルをソートしようとしています。また、応答性のためにブートストラップを使用しています。以下は私のテーブルです
<table id="issues" class="table table-condensed">
<thead>
<tr>
<th data-order="asc">#</th>
<th data-order="asc" class="hidden-xs">Application</th>
<th data-order="asc">Error</th>
<th data-order="desc" class="text-right hidden-xs">Occurences</th>
</tr>
</thead>
<tbody>
<tr data-id="77">
<td class="id">77</td>
<td class="application hidden-xs">my site is this 1</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 1</span>
<a href="www.google.com">null value returned</a></td>
<td class="occurences hidden-xs text-right">3742</td>
</tr>
<tr data-id="5685">
<td class="id">5685</td>
<td class="application hidden-xs">my site is this 2</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 2</span>
<a href="www.google.com">no value present</a></td>
<td class="occurences hidden-xs text-right">235</td>
</tr>
<tr data-id="547">
<td class="id">547</td>
<td class="application hidden-xs">my site is this 3</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 3</span>
<a href="www.google.com">value returned</a></td>
<td class="occurences hidden-xs text-right">14</td>
</tr>
</tbody>
</table>
そして以下は私のJavascriptです
var table = document.getElementById('issues')
,tableHead = table.querySelector('thead')
,tableHeaders = tableHead.querySelectorAll('th')
,tableBody = table.querySelector('tbody')
;
tableHead.addEventListener('click',function(e){
var tableHeader = e.target
,textContent = tableHeader.textContent
,tableHeaderIndex,isAscending,order
;
while (tableHeader.nodeName!=='TH') {
tableHeader = tableHeader.parentNode;
}
tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders,tableHeader);
isAscending = tableHeader.getAttribute('data-order')==='asc';
order = isAscending?'desc':'asc';
tableHeader.setAttribute('data-order',order);
tinysort(
tableBody.querySelectorAll('tr')
,{
selector:'td:nth-child('+(tableHeaderIndex+1)+')'
,order: order
}
);
});
ここでの問題は、「エラー」ヘッドを使用してソートすると、Span で行がソートされ、小、中、大では非表示になり、極小のデバイスでのみ表示されることです。
したがって、デスクトップから並べ替えると、そのスパンを使用して並べ替えられます。
私がやりたいことは、そのスパンを使用してソートするのではなく、小、中、大のデバイスではリンクを使用してソートし、極小のデバイスではスパンを使用してソートすることです。