我需要按標題

來引導網格行進行排序我有我已經在引導3使用網格和NOT表創建一個表。我需要按標題

該網站是預訂總線。

表HTML結構看起來是這樣的：

<div class="row"> 
    <div class="col-lg-3"><h3>Bus Company</h3></div> 
    <div class="col-lg-3"><h3>Bus Features</h3></div> 
    <div class="col-lg-3"><h3>Departure Time</h3></div> 
    <div class="col-lg-3"><h3>Book Now</h3></div> 
</div>

再有就是一個循環，獲取所有相關的搜索結果...迭代的一個看起來是這樣的：

<div class="row busses"> 
    <div class="col-lg-3"><p>Bus Company One</p></div> 
    <div class="col-lg-3"><p>Water, Toilet</p></div> 
    <div class="col-lg-3"><p>6:45 pm</p></div> 
    <div class="col-lg-3"><p>Book Now</p></div> 
</div>

對於符合搜索標準的每一輛公交車都會重複。

我希望能夠點擊第一行的任何標題，然後對結果進行相應的排序......或者可能只是出發時間和巴士公司（第1列和第3列）。

我已經搜索範圍廣泛，理想情況下只會喜歡一個JavaScript插件，我可以使用但我發現似乎需要使用一個實際的HTML <table>，我不想使用它。

如果有人不知道的一個插件，還需要能夠按時間排序，如...看到，下午晚於上午11點，如果你明白我的意思。

在此先感謝！

馬特

來源

2016-02-15 Matthew Jonat

如果你的使命是生產上引導這樣的事情，你是最有可能的預期（如果沒有，你應該），使其反應迅速，所以，當你去到移動設備，它會將列放在彼此下面。這是導致更多問題而不是一般生成行的原因，因爲當您處於移動視圖時，必須使標題行適用於整個列表。 – ProDexorite

好吧...敏感是我想使用divs而不是表格的原因，儘管在移動版本中，標題完全消失，所以對於此目的...移動不必是一個考慮因素。 –

這可以通過這樣的方式實現：

function sortBusses(byDatum, reverse) { 
 
    var busses = $('.busses').detach().toArray(); 
 
    busses = busses.sort(function(a,b) { 
 
    var aVal = $(a).find('[data-target-attr='+byDatum+']').text(); 
 
    var bVal = $(b).find('[data-target-attr='+byDatum+']').text(); 
 

 
    // looks reversed because we use append later, not prepend 
 
    var returnVal = bVal < aVal ? 1 : -1; 
 

 
    if (reverse) returnVal = -returnVal; 
 
    return returnVal; 
 
    }); 
 
    $(busses).appendTo('.busses-container'); 
 
} 
 

 
$(document).ready(function() { 
 
    $('.busses-heading div').click(function() { 
 
    if ($(this).attr('data-target-attr')) { 
 
     var isReversed = $(this).attr('data-reversed'); 
 
     reverse = (isReversed && isReversed==='false') ? true : false; 
 
     sortBusses($(this).attr('data-target-attr'), reverse); 
 
     $(this).attr('data-reversed', reverse); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="busses-container"> 
 
    <div class="row busses-heading"> 
 
     <div class="col-lg-3" data-target-attr="company"><h3>Bus Company</h3></div> 
 
     <div class="col-lg-3" data-target-attr="features"><h3>Bus Features</h3></div> 
 
     <div class="col-lg-3" data-target-attr="time"><h3>Departure Time</h3></div> 
 
     <div class="col-lg-3"><h3>Book Now</h3></div> 
 
    </div> 
 

 
    <div class="row busses"> 
 
     <div class="col-lg-3"><p data-target-attr="company">Bus Company One</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="time">6:45 pm</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="features">Seats</p></div> 
 
     <div class="col-lg-3"><p>Book Now</p></div> 
 
    </div> 
 

 
    <div class="row busses"> 
 
     <div class="col-lg-3"><p data-target-attr="company">Bus Company Two</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="time">7:45 pm</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="features">Water, Toilet</p></div> 
 
     <div class="col-lg-3"><p>Book Now</p></div> 
 
    </div> 
 

 
    <div class="row busses"> 
 
     <div class="col-lg-3"><p data-target-attr="company">Bus Company Three</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="time">8:45 pm</p></div> 
 
     <div class="col-lg-3"><p data-target-attr="features">Toilet</p></div> 
 
     <div class="col-lg-3"><p>Book Now</p></div> 
 
    </div> 
 
    
 
</div>

然而，由於您的數據表格在本質上，這將是最好先走，並使用表

來源

2016-02-15 06:29:30

感謝您的答案......這些代碼看起來不錯，但其實我最終找到這小腳本，最終爲我做了很好的一切......而且它的jQuery也是獨立的！

http://tinysort.sjeiti.com/

來源

2016-02-17 04:03:47

我需要按標題

回答

相關問題