在Bootstrap表中對可見和相關的隱藏行進行排序

我有一個表，用bootstrap 3製作。我有兩種行，一種是4個td，我用它們中的第一種顯示下面一行默認。（顯示關於前一行的數據）在Bootstrap表中對可見和相關的隱藏行進行排序

所有這些工作正常。但是，引導程序「排序」功能（通過單擊標題行）不能按預期工作。它排序所有行，包括隱藏的，並且我的系統不工作了...（當我點擊我的主行時，下面的行不是隱藏的...... :(）

任何人對我怎麼能解決這個問題的想法

HTML：

<table class="table table-striped"> 
    <thead> 
    <th>show data</th> 
    <th>name</th> 
    <th>adress</th> 
    <th>buttons</th> 
    </thead> 
    <tbody> 
    <tr class="mainRow"> 
     <td class="clickArrow"></td> 
     <td>my name</td> 
     <td>my adress</td> 
     <td>some buttons</td> 
    </tr> 
    <tr class="subRow"> 
     <td colspan=4>THE DATA !!!!</td> 
    </tr> 
    </tbody> 
</table>

JS：

$(document).ready(function(){ 
    $('.subRow').hide(); 
    $('body').find('.clickArrow').html('<i class="fa fa-arrow-down"></i>'); 
    $('body').on('click','.clickArrow',function(){ 
    if($(this).html()=='<i class="fa fa-arrow-down"></i>'){ 
     $(".clickArrow").html('<i class="fa fa-arrow-down"></i>'); 
     $('.subRow').hide(); 
     $('.mainRow td').css('background-color','#DDDACE'); 
     $(this).parent('tr').find('td').css('background-color','white'); 
     $(this).html('<i class="fa fa-eye"></i>'); 
     $(this).parent('tr').next().slideToggle("slow"); 
    }else{ 
     $(this).html('<i class="fa fa-arrow-down"></i>'); 
     $(this).parent('tr').find('td').css('background-color','#DDDACE'); 
     $(this).parent('tr').next().slideToggle("slow"); 
    } 
    }); 
});

我不知道什麼是真正發生的事情與「排序」功能來自Bootstrap。也許解決辦法是禁用自舉排序系統，並實施我的。

我只是想知道如果有人已經有這個問題，並找到一個體面的解決方案。

來源

2014-09-24 Julo0sS

沒有爲jQuery插件這個

您可以根據表頭

嘗試jQuery的確定年代的插件您的表進行排序 http://www.datatables.net/manual/styling/bootstrap

來源

2014-09-24 12:45:13 Olalekan

謝謝，我看到之前，但我認爲你不明白我的問題...我不是在尋找一種方法來排序我的表...我現在在找什麼，是一種從引導.table類中禁用sortWrapper的方法......任何想法？ – Julo0sS 2014-09-24 12:48:04

我有一些SCSS對你，你可以申請將排序按鈕顯示。然後，你所要做的就是用jQuery實現排序機制。

table { 
    thead, 
    tfoot { 
     tr { 
     th { 
      position: relative; 
     } 
     th.sorting { 
      padding-right: 1.5em; 
      cursor: pointer; 
     } 
     th.sorting.asc::before { 
      opacity: 1; 
     } 
     th.sorting.desc::after { 
      opacity: 1; 
     } 
     th.sorting::before, 
     th.sorting::after { 
      position: absolute; 
      bottom: -2px; 
      display: block; 
      opacity: 0.4; 
      padding-bottom: inherit; 
      font-size: inherit; 
      line-height: 180%; 
     } 

     th.sorting::before { 
      right: 0.75em; 
      content: '\2191'; 
     } 
     th.sorting::after { 
      right: 0.25em; 
      content: '\2193'; 
     } 
     } 
    } 
    }

添加。排到標籤以顯示排序。和.asc和.desc類顯示排序正在發生的方向

來源

2018-02-11 21:53:46 Codetector

在Bootstrap表中對可見和相關的隱藏行進行排序

回答

相關問題