Bootstrap-table 示例代码错误

Question

我开始用 bootstrap 框架制作一个网站。现在我想包含一个 table 使用 bootstrap-table 从这个 URL: http://bootstrap-table.wenzhixin.net.cn/

问题是示例不起作用我认为问题是将数据完成 table。代码是这样的：

<!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>

我已经正确输入了 bootstrap、bootstrap-table 和 jquery 但我认为问题出在数据上，有一个参数如下： <data-url="data1.json"> 但是我没有这个文件。当前结果：

正确结果：

抱歉我迷路了...

谢谢！

Answer 1

在您的代码段中有这一行：

data-url="data1.json">

所以，数据在这个 json 文件中。您可以从以下网址下载：HERE.

另一种加载 json 数据的方法是：

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

片段：

var data1Json = [
  {
    "id": 0,
    "name": "Item 0",
    "price": "[=12=]"
  },
  {
    "id": 1,
    "name": "Item 1",
    "price": ""
  },
  {
    "id": 2,
    "name": "Item 2",
    "price": ""
  },
  {
    "id": 3,
    "name": "Item 3",
    "price": ""
  },
  {
    "id": 4,
    "name": "Item 4",
    "price": ""
  },
  {
    "id": 5,
    "name": "Item 5",
    "price": ""
  },
  {
    "id": 6,
    "name": "Item 6",
    "price": ""
  },
  {
    "id": 7,
    "name": "Item 7",
    "price": ""
  },
  {
    "id": 8,
    "name": "Item 8",
    "price": ""
  },
  {
    "id": 9,
    "name": "Item 9",
    "price": ""
  },
  {
    "id": 10,
    "name": "Item 10",
    "price": ""
  },
  {
    "id": 11,
    "name": "Item 11",
    "price": ""
  },
  {
    "id": 12,
    "name": "Item 12",
    "price": ""
  },
  {
    "id": 13,
    "name": "Item 13",
    "price": ""
  },
  {
    "id": 14,
    "name": "Item 14",
    "price": ""
  },
  {
    "id": 15,
    "name": "Item 15",
    "price": ""
  },
  {
    "id": 16,
    "name": "Item 16",
    "price": ""
  },
  {
    "id": 17,
    "name": "Item 17",
    "price": ""
  },
  {
    "id": 18,
    "name": "Item 18",
    "price": ""
  },
  {
    "id": 19,
    "name": "Item 19",
    "price": ""
  },
  {
    "id": 20,
    "name": "Item 20",
    "price": ""
  }
];
$(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>

Bootstrap-table 示例代码错误

Bootstrap-table error with example code

html

css

jquery

twitter-bootstrap

bootstrap-table