示例代碼引導表錯誤

我開始用引導框架製作網站。現在我想包含一個表使用引導表從這個URL：示例代碼引導表錯誤

問題是這些例子不起作用我認爲問題是完成數據到表中。該代碼是這樣的：

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

我已經把正確的引導，引導表和jQuery，但我覺得現在的問題是數據，還有一個參數是這樣的：<data-url="data1.json">，但是我沒有這個文件。目前的結果是：

和正確的結果：

，對不起，我很失落......

謝謝！

來源

2016-09-12 ruzD

哪裏是要顯示的數據，做什麼錯誤，你有在控制檯中？ – madalinivascu

在您的片斷，你有這樣一行：

data-url="data1.json">

因此，該數據是在這個JSON文件。您可以從以下網址下載：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

示例代碼引導表錯誤

回答

相關問題