ボタンをクリックしてテーブルにロードされたJSONファイルを変更する

テーブルにロードするJSONファイルを取得できましたが、複数のJSONファイルを持ち、どちらのボタンに基づいてテーブルにロードするかを変更しますが押された。私は変数dataを変更することができたと思ったが、テーブルは同じままになっていた（私はあなたがそれをいくつかの方法でリフレッシュさせる必要があると仮定している）。ボタンをクリックしてテーブルにロードされたJSONファイルを変更する

また、サイドノートでは、価格間にスペースを置くことは可能ですか？

test.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Hello World"> 
    <!-- Latest compiled and minified CSS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css"> 
    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script> 
    <script src="data1.json"></script> 
    <script src="data2.json"></script> 

    <script> 
    $(function() { 
    $('#table').bootstrapTable({ 
     data: data_one 
    }); 

    $('#data1').on('click', function(event) { 
     $('#table').bootstrapTable({ 
     data: data_one 
     }); 
    }); 

    $('#data2').on('click', function(event) { 
     $('#table').bootstrapTable({ 
     data: data_two 
     }); 
    }); 
    }); 
    </script> 
</head> 

<body> 
    <header> 
    <div class="jumbotron"> 
     <div class="container"> 
     <h3>Test</h3> 
     </div> 
    </div> 
    </header> 
    <div class="container"> 
    <div class="row"> 
     <div class="text-center"> 
     <a class="btn btn-large btn-success" id="data1">Data 1</a> 
     <a class="btn btn-large btn-success" id="data2">Data 2</a> 
     </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="row"> 
     <table id="table" class="table table-bordered" data-search="true" data-show-toggle="true"> 
     <thead> 
      <tr> 
      <th data-field="id" data-sortable="true">ID</th> 
      <th data-field="name" data-sortable="true">Name</th> 
      <th data-field="prices" data-sortable="true">Price</th> 
      </tr> 
     </thead> 
     </table> 
    </div> 
    </div> 


    <footer> 
    <div class="container"> 
     <hr> 
     <p><small><a href="www.google.com">Google</a> didn't help me</small></p> 
    </div> 
    </footer> 
</body> 
</html>

data1.json：

var data_one = [ 
    { 
    "id": 0, 
    "name": "test0", 
    "prices": [ 
     "$0", 
     "$5" 
    ] 
    }, 
    { 
    "id": 1, 
    "name": "test1", 
    "prices": [ 
     "$4", 
     "$1" 
    ] 
    }, 
    { 
    "id": 2, 
    "name": "test2", 
    "prices": [ 
     "$2", 
     "$3" 
    ] 
    }, 
];

data2.json：

var data_two = [ 
    { 
    "id": 4, 
    "name": "test4", 
    "prices": [ 
     "$1", 
     "$2" 
    ] 
    }, 
    { 
    "id": 5, 
    "name": "test5", 
    "prices": [ 
     "$6", 
     "$5" 
    ] 
    }, 
    { 
    "id": 6, 
    "name": "test6", 
    "prices": [ 
     "$9", 
     "$7" 
    ] 
    }, 
];

出典

2016-05-14 user5368737

あなたは、テーブル内のデータを更新する際に「ロード」方法を指定する必要があります。

<script> 
    $(function() { 
    $('#table').bootstrapTable({ data: data_one }); 

    $('#data1').on('click', function(event) { 
     $('#table').bootstrapTable('load', { data: data_one }); 
    }); 

    $('#data2').on('click', function(event) { 
     $('#table').bootstrapTable('load', { data: data_two }); 
    }); 
    }); 
</script>

あなたが最初にロードする方法、唯一の更新でデータをロードすることはできませんいくつかの理由。また、 "append"メソッドでデータを追加したり、クールなものをたくさん作ったりすることもできます。ここでドキュメントをチェックしてください：Bootstrap Table Documentation

出典

2016-05-14 11:07:21 jetpackpony

ありがとう、これは動作します！どのボタンが最後にクリックされたかを目立つようにする方法を理解するために： – user5368737

ニースone @JetpackPony。 – Andy

@ user5368737 JQueryのaddClassとremoveClassをこのように使用しますhttps://jsfiddle.net/h4dLjnt6/ これは明らかに強力なデザインではありません:-) – jetpackpony

1）あなたはすべてready機能、ちょうど1（ルック機能を必要としません$(function() {..}）。

2）また、ボタンをクリックしたときにその要素のプラグインを再度呼び出すことはありません。明示的に行う必要があります。

3）最後に、2番目のボタンにイベントリスナーを追加していません。最初のボタンにリスナーを重複して追加しました。

4）HTMLボタンからインラインonclick="data1()"とonclick="data2()"を削除する必要があります。

$(function() { 

    $('#table').bootstrapTable({ 
    data: data_one 
    }); 

    $('#data1').on('click', function(event) { 
    $('#table').bootstrapTable({ 
     data: data_one 
    }); 
    }); 

    $('#data2').on('click', function(event) { 
    $('#table').bootstrapTable({ 
     data: data_two 
    }); 
    }); 

});

出典

2016-05-14 10:26:38 Andy

私は1）と2）を理解しています（あなたが.bootstrapTableについて話していると仮定して）。私はあなたが上に書いたものを自分のコードに貼り付けるとうまくいくはずだと思いました。 – user5368737

また、私が追加した4）を見てください。 jQueryを使用して要素にリスナーを追加する場合は、インラインクリックハンドラーを追加する必要はありません。 – Andy

それは私にとってはうまくいかないようです。上に書いたものをコピーして貼り付け、インラインクリックハンドラを削除しましたが、ボタンを押しても実際にテーブルは変更されません。 – user5368737

data2（）関数は統合されていません。あなたは以下のようにあなたのコードを書くことができます。

$(function() { 
    $('#table').bootstrapTable({ 
     data: data_one 
    }); 
    }); 

function data1(){ 
    $('#table').bootstrapTable({ 
     data: data_one 
    }); 
} 
function data2(){ 
    $('#table').bootstrapTable({ 
     data: data_two 
    }); 
}

出典

2016-05-14 10:46:53 Krishna

OPがjQueryを使用しているときに、OPでインラインクリックハンドラを使用することをお勧めします。そのように混ぜ合わせてはいけません。 – Andy

ボタンをクリックしてテーブルにロードされたJSONファイルを変更する

答えて

関連する問題