使用boostrap或Jquery基于标头排列行文本

时间：2017-01-26 04:55:35

标签： javascript jquery html twitter-bootstrap sorting

我有这种使用boostrap的表。我想在点击标题后从ASC或DESC中对它们进行排序。我在boostrap中搜索排序和排序，但这不是我想要实现的。订购用于移动物品，分拣用于根据选择进行选择和移除。

＆＃13;
＆＃13; 
$('#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')
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  

是否有关于如何实现目标的功能。

目标

点击名称时，应将行排列为A到D或D到A. 与数字相同。

1 个答案:

答案 0 :(得分：1)

我通常会使用像angular.js这样的数据绑定插件，但这里有一个使用jquery的解决方案：

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

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

  3. 现在我们用户sort()了解所有行，将追加回到DOM。

    4. 见下面的演示：

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

相关问题
最新问题