在Bootstrap JSON表中显示特定的行和列

Question

我正在Bootstrap表中使用此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/pen/mbzjxo无需从JSON中删除任何数据。我可以用脚本过滤掉吗？我该怎么做？

Answer 1

当您的事件触发时（例如$(document).on('click', 'yourSelector (e.g. tr)', function(){ ... }）或每当您需要调用类似的内容时，

$('#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，然后完成！