ブートストラップjsonテーブルの特定の行と列を表示

Question

ブートストラップテーブルでこのjsonデータを使用しています。 http://codepen.io/nty_/pen/gLZwQV

{ 
     "dex": "#004", 
     "name": "Litten", 
     "abilities": "Blaze <br> Intimidate", 
     "type": "FIRE", 
     "hp": "45", 
     "att": "65", 
     "def": "40", 
     "satt": "60", 
     "sdef": "40", 
     "speed": "70" 
}, 
    { 
     "dex": "#024", 
     "name": "Pichu", 
     "abilities": "Static <br> Lightningrod", 
     "type": "ELECTRIC", 
     "hp": "20", 
     "att": "40", 
     "def": "15", 
     "satt": "35", 
     "sdef": "35", 
     "speed": "60" 
}, 
    { 
     "dex": "#045", 
     "name": "Meowth", 
     "abilities": "Pickup <br> Technician <br>Rattled", 
     "type": "DARK", 
     "hp": "40", 
     "att": "35", 
     "def": "35", 
     "satt": "50", 
     "sdef": "40", 
     "speed": "90" 
} 

<thead> 
      <tr> 
       <th data-field="dex" rowspan="2">#Number</th> 
       <th data-field="name" rowspan="2">Name</th> 
       <th data-field="abilities" rowspan="2">Abilities</th> 
       <th data-field="type" rowspan="2">Type</th> 
       <th rowspan="1" colspan="6">Base Stats</th> 
       </tr> 
       <tr> 
        <th data-field="hp">HP</th> 
        <th data-field="att">Att</th> 
        <th data-field="def">Def</th> 
        <th data-field="satt">S.Att</th> 
        <th data-field="sdef">S.Def</th> 
        <th data-field="speed">Speed</th> 
       </tr> 
     </thead> 

私は今、唯一のエントリから特定の列にフィルタ、第二のテーブルを持っていると思います。例えば - ベースの統計情報（hp、att、def、satt、sdef、speed）は、http://codepen.io/nty_/pen/MbZjxoのように、jsonからデータを削除する必要はありません。 スクリプトでそれをフィルタリングできますか？そして私はそれをどうやってやるのだろう？あなたのイベントがトリガー（例えば$(document).on('click', 'yourSelector (e.g. tr)', function(){ ... }）や、好きなときにいつでも何か呼び出す必要があります場合は

Answer 1

：行をクリックした場合の

$('#table').bootstrapTable('filterBy', {'dex': 'the dex number (e.g. #004)'}); 

を、たとえば、あなたがやるべき

$(document).on('click', '#table tr', function(){ 
    // get the current table and filter by dex number (first <td>) 
    var currentTable = $(this).closest('table'); 
    currentTable.bootstrapTable(
     'filterBy', 
     { 'dex': $(this).find('td').first().text() } 
    ); 
    // hide columns 
    currentTable.bootstrapTable('hideColumn', 'dex'); 
    currentTable.bootstrapTable('hideColumn', 'name'); 
    currentTable.bootstrapTable('hideColumn', 'abilities'); 
    currentTable.bootstrapTable('hideColumn', 'type'); 
}); 

テーブルを元の状態に戻す場合は、.('filterBy', {})とhideColumnの代わりにshowColumnを使用すると完了です！