ブートストラップテーブルのエラー例コード

私はブートストラップフレームワークでウェブサイトを作り始めました。今私は、このURLからのブートストラップテーブルを使用してテーブルを含めることにしたいと思います：ブートストラップテーブルのエラー例コード

問題は、私は問題がテーブルにデータを完了していると思います。私が正しくブートストラップ、ブートストラップ・テーブルとjQueryを入れているが、私は、問題がデータであることを考える

<!DOCTYPE html> 
<html> 
<head> 
    <title>Check/Uncheck All in all page</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css"> 
    <link rel="stylesheet" href="assets/examples.css"> 
    <script src="assets/jquery.min.js"></script> 
    <script src="assets/bootstrap/js/bootstrap.min.js"></script> 
    <script src="assets/bootstrap-table/src/bootstrap-table.js"></script> 
    <script src="ga.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <h1>Check/Uncheck All in all page(<a href="https://github.com/wenzhixin/bootstrap-table/issues/1167" target="_blank">#1167</a>).</h1> 
     <div class="toolbar"> 
      <button id="checkAll" class="btn btn-default">Check All</button> 
      <button id="uncheckAll" class="btn btn-default">Uncheck All</button> 
     </div> 
     <table id="table" 
       data-toggle="table" 
       data-toolbar=".toolbar" 
       data-pagination="true" 
       data-maintain-selected="true" 
       data-url="data1.json"> 
      <thead> 
      <tr> 
       <th data-field="state" data-checkbox="true"></th> 
       <th data-field="id">ID</th> 
       <th data-field="name">Item Name</th> 
       <th data-field="price">Item Price</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 
<script> 
    var $table = $('#table'); 
    $(function() { 
     $('#checkAll').click(function() { 
      $table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination'); 
     }); 
     $('#uncheckAll').click(function() { 
      $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination'); 
     }); 
    }); 
</script> 
</body> 
</html>

、そこにこのようにパラメータです：<data-url="data1.json">が、私はこのファイルを持っていないコードはこれです。現在の結果：

、正しい結果：

私は非常に迷ってしまいました申し訳ありません

...

ありがとう！

data-url="data1.json">

ので、データがこのJSONファイルである：あなたのスニペットで

出典

2016-09-12 ruzD

、どのようなエラーがあなたが持っていますコンソールで？ – madalinivascu

あなたはこのラインを持っています。あなたはHEREからダウンロードできます。

JSONデータをロードする別の方法は次のとおりです。

$table.bootstrapTable('load', data1Json);

スニペット：

var data1Json = [ 
 
    { 
 
    "id": 0, 
 
    "name": "Item 0", 
 
    "price": "$0" 
 
    }, 
 
    { 
 
    "id": 1, 
 
    "name": "Item 1", 
 
    "price": "$1" 
 
    }, 
 
    { 
 
    "id": 2, 
 
    "name": "Item 2", 
 
    "price": "$2" 
 
    }, 
 
    { 
 
    "id": 3, 
 
    "name": "Item 3", 
 
    "price": "$3" 
 
    }, 
 
    { 
 
    "id": 4, 
 
    "name": "Item 4", 
 
    "price": "$4" 
 
    }, 
 
    { 
 
    "id": 5, 
 
    "name": "Item 5", 
 
    "price": "$5" 
 
    }, 
 
    { 
 
    "id": 6, 
 
    "name": "Item 6", 
 
    "price": "$6" 
 
    }, 
 
    { 
 
    "id": 7, 
 
    "name": "Item 7", 
 
    "price": "$7" 
 
    }, 
 
    { 
 
    "id": 8, 
 
    "name": "Item 8", 
 
    "price": "$8" 
 
    }, 
 
    { 
 
    "id": 9, 
 
    "name": "Item 9", 
 
    "price": "$9" 
 
    }, 
 
    { 
 
    "id": 10, 
 
    "name": "Item 10", 
 
    "price": "$10" 
 
    }, 
 
    { 
 
    "id": 11, 
 
    "name": "Item 11", 
 
    "price": "$11" 
 
    }, 
 
    { 
 
    "id": 12, 
 
    "name": "Item 12", 
 
    "price": "$12" 
 
    }, 
 
    { 
 
    "id": 13, 
 
    "name": "Item 13", 
 
    "price": "$13" 
 
    }, 
 
    { 
 
    "id": 14, 
 
    "name": "Item 14", 
 
    "price": "$14" 
 
    }, 
 
    { 
 
    "id": 15, 
 
    "name": "Item 15", 
 
    "price": "$15" 
 
    }, 
 
    { 
 
    "id": 16, 
 
    "name": "Item 16", 
 
    "price": "$16" 
 
    }, 
 
    { 
 
    "id": 17, 
 
    "name": "Item 17", 
 
    "price": "$17" 
 
    }, 
 
    { 
 
    "id": 18, 
 
    "name": "Item 18", 
 
    "price": "$18" 
 
    }, 
 
    { 
 
    "id": 19, 
 
    "name": "Item 19", 
 
    "price": "$19" 
 
    }, 
 
    { 
 
    "id": 20, 
 
    "name": "Item 20", 
 
    "price": "$20" 
 
    } 
 
]; 
 
$(function() { 
 
    var $table = $('#table'); 
 
    $table.bootstrapTable('load', data1Json); 
 
    $('#checkAll').click(function() { 
 
    $table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination'); 
 
    }); 
 
    $('#uncheckAll').click(function() { 
 
    $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination'); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.js"></script> 
 

 

 
<div class="container"> 
 
    <h1>Check/Uncheck All in all page(<a href="https://github.com/wenzhixin/bootstrap-table/issues/1167" target="_blank">#1167</a>).</h1> 
 
    <div class="toolbar"> 
 
     <button id="checkAll" class="btn btn-default">Check All</button> 
 
     <button id="uncheckAll" class="btn btn-default">Uncheck All</button> 
 
    </div> 
 
    <table id="table" 
 
      data-toggle="table" 
 
      data-toolbar=".toolbar" 
 
      data-pagination="true" 
 
      data-maintain-selected="true" 
 
      data-url=""> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="state" data-checkbox="true"></th> 
 
      <th data-field="id">ID</th> 
 
      <th data-field="name">Item Name</th> 
 
      <th data-field="price">Item Price</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
</div>

表示したいデータがある

出典

2016-09-12 11:33:43 gaetanoM

ありがとう！私はエラーが見つかりました:)ブートストラップテーブルの私のパスが間違っていた。今それはうまくいきます、ありがとう。 – ruzD

ブートストラップテーブルのエラー例コード

答えて

関連する問題