boostrapまたはJqueryを使用してヘッダに基づいて行テキストを配置する

私はこの種のテーブルをboostrapを使用しています。ヘッダーをクリックした後、ASCまたはDESCから並べ替えることにしました。私はブーストラップで注文とソートを検索しますが、それは達成したいことではありません。順序は移動するもののためであり、並べ替えは選択に基づいて選択したり削除したりするためのものです。boostrapまたはJqueryを使用してヘッダに基づいて行テキストを配置する

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

私の目標を達成するためにどのように機能があります。

ゴール

名をクリックすると、それは行が同様に数として同じにDまたはDへの手配すべきです。

出典

2017-01-26 Martin

私は普通angular.jsのようなプラグインを結合いくつかデータを使用しますが、ここではjQueryを使用したソリューションであるでしょう：

まずあなたがnameとid列

をターゲットに列番号を取得
次に、を昇順に設定/取得または降順フラグo n個の列

は、今、私たちはすべての行とのためのユーザー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>

出典

2017-01-26 06:35:16 kukkuz

どこ '.ATTR（ 'データソート'）である'か、それは 'データ-filtering'すべきですか？ – Martin

また、数値変換のために変換する必要がありますか？ '10または12'のような値があるときは' 1,10,12,2,3,4'のように並べ替えますが、これは正しくありません。 – Martin

@Martin 'data-sort'' 'true''や' false'の代わりに数値を使うことを除いて、 'data-filtering'と同じ機能...ソートの問題を今チェックして修正します... – kukkuz

boostrapまたはJqueryを使用してヘッダに基づいて行テキストを配置する

答えて

関連する問題