如何在使用tinysort时忽略跨度

时间:2015-07-24 09:02:26

标签: javascript sorting tinysort

我正在尝试使用tinysort对我的表客户端进行排序,我也使用bootstrap来响应 吼叫是我的桌子

<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对行进行排序,这对于小型,中型和&amp;大与小仅在超小型设备中可见。

因此,当我从桌面排序时,它仍然使用该范围进行排序。

我想要做的是它不应该使用该范围对其进行排序,但它应该使用链接进行排序,而在小,中,和大型设备和在超小型设备中使用span进行排序。

这是jsfiddle

0 个答案:

没有答案