使用引导程序或Jquery根据标题排列行文本

Question

我有这样的桌子，用的是靴带。我想在点击标题后，从ASC或DESC中对它们进行排序。我在引导程序中搜索订单和排序，但这不是我想要达到的目标。排序是用于移动事物，排序是根据选择进行选择和删除。

​

$('#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>

​

有没有关于如何实现我的目标的功能。

目标

当点击名称时，它应该使行排列从A到D或D到A的相同，以及数字。

Answer 1

我通常会使用一些数据绑定插件，比如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>

​