javascript - 我需要按标题对 Bootstrap 网格行进行排序

Question

我有一个在 bootstrap 3 中使用网格而不是表格创建的表格。

该网站用于预订巴士。

表格 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>我不想使用它。

如果有人知道某个插件，它还需要能够按时间排序，例如……如果您明白我的意思，那么下午 2 点会晚于上午 11 点。

提前致谢!

马特

Answer 1

这可以通过以下方式实现:

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>

但是，由于您的数据本质上是表格形式，因此建议继续使用表格