javascript - 使用 bootstrap 或 Jquery 根据标题排列行文本

Question

我有这种使用 boostrap 的表格。单击标题后，我想从 ASC 或 DESC 对它们进行排序。我在 boostrap 中搜索排序和排序，但这不是我想要实现的。排序是为了移动东西，排序是为了根据选择进行选择和删除。

$('#header > div').on('click', function() {
  var $label = $(this).find('label');
  // get column number
  var $filter = $label.attr('data-name') == 'name' ? 1 : 2;
  // set the toggle asc/desc flag
  var $sort = $label.attr('data-sort') || -1;
  $label.attr('data-sort', -$sort);
  $sort = -$sort;

  $('#header').nextAll('.row').sort(function(a, b) {

    var c = $(a).find('div:nth-child(' + $filter + ') label').text();
    var d = $(b).find('div:nth-child(' + $filter + ') label').text();
    if ($filter === 1) { // filter strings
      if (c == d)
        return 0;
      else if (c > d)
        return 1 * $sort;
      else if (c < d)
        return -1 * $sort;
    } else { // filter numbers
      return (+c - +d) * $sort;
    }
  }).insertAfter($('#header'));
});

// initial sorting
$('#header > div:first-child').trigger('click')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row " id="header">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small" data-name="name" data-filtering="true">Name</label></h6>
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small" data-name="id" data-filtering="true">ID</label></h6>
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">A </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">4</label></h6> 
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">B </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">3</label></h6> 
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">C </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">2</label></h6> 
  </div>
</div>


<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">D </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">1</label></h6> 
  </div>
</div>


<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues ">Total </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small  id"></label></h6> 
  </div>
</div>

Is there a function on how to achieve my goal.

目标

当点击名称时，它应该使行从 A 到 D 或 D 到 A 与数字相同。

Answer 1

我通常会使用一些数据绑定(bind)插件，比如angular.js，但这里有一个使用 jquery 的解决方案:

1. 首先，您获取列号以定位name 和id 列

2. 接下来我们在列上设置/获取升序或降序标志

3. 现在我们对所有行使用sort()并将它们追加回DOM。

请看下面的演示:

$('#header > div').on('click', function() {
  var $label = $(this).find('label');
  // get column number
  var $filter = $label.attr('data-name') == 'name' ? 1 : 2;
  // set the toggle asc/desc flag
  var $sort = $label.attr('data-sort') || -1;
  $label.attr('data-sort', -$sort);
  $sort = -$sort;

  $('#header').nextUntil('#total').sort(function(a, b) {

    var c = $(a).find('div:nth-child(' + $filter + ') label').text();
    var d = $(b).find('div:nth-child(' + $filter + ') label').text();
    if ($filter === 1) { // filter strings
      if (c == d)
        return 0;
      else if (c > d)
        return 1 * $sort;
      else if (c < d)
        return -1 * $sort;
    } else { // filter numbers
      return (+c - +d) * $sort;
    }
  }).insertAfter($('#header'));
});

// initial sorting
$('#header > div:first-child').trigger('click')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row " id="header">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small" data-name="name" data-filtering="true">Name</label></h6>
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small" data-name="id" data-filtering="true">ID</label></h6>
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">A </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">4</label></h6> 
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">B </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">12</label></h6> 
  </div>
</div>
<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">C </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">2</label></h6> 
  </div>
</div>



<div class="row">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues fullname">D </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues id">1</label></h6> 
  </div>
</div>



<div class="row" id="total">
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small newvalues ">Total </label></h6> 
  </div>
  <div class="col-xs-1 table-bordered text-sm-center">
    <h6><label class="col-form-label small  id"></label></h6> 
  </div>
</div>