Search code examples
jqueryhtmlcsstwitter-bootstrapbootstrap-table

Bootstrap-table error with example code

I'm starting to made a website with bootstrap framework. Now I would like to include a table using bootstrap-table from this URL: http://bootstrap-table.wenzhixin.net.cn/

The problem is the examples doesn't work I think that the problem is completing the data into the table. The code is this:

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

I have put correctly the bootstrap, bootstrap-table and jquery but I think that the problem is the data, there are a parameter as this: <data-url="data1.json"> but I have not this file. The current result:

enter image description here

And the correct result:

enter image description here

Sorry I'm very lost...

Thanks!

Solution

  • In your snippet you have this line:

    data-url="data1.json">

    So, the data are in this json file. You can download it from: HERE.

    A different way to load the json data is:

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

    The snippet:

    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>