Bootstrap Table使用整理(一)

<link href="~/lib/bootstrap-table/dist/bootstrap-table.css" rel="external nofollow" rel="stylesheet" /> <script src="~/lib/bootstrap-table/dist/bootstrap-table.js"></script> <script src="~/lib/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>

1.data-toggle="table" 無需JavaScript啟用bootstrap table

<p>通過Data屬性的方式，無需編寫JavaScript啟用bootstrap table, 設置 data-toggle="table" 即可</p> <div class="alert alert-danger">  <p>1.這種方式不太常用，因為分頁不方便</p> </div> <table data-toggle="table">  <thead>   <tr>    <th>Item ID</th>    <th>Item Name</th>    <th>Item Price</th>   </tr>  </thead>  <tbody>   <tr>    <td>1</td>    <td>Item 1</td>    <td>$1</td>   </tr>   <tr>    <td>2</td>    <td>Item 2</td>    <td>$2</td>   </tr>  </tbody> </table>

2.使用data-url指定遠程數據,特別說明，在使用遠程數據的時候，在ajax請求期間，表格內容顯示加載中...,

<p>可以通過設置遠程url 如：data-url="data1.json" ，自動加載遠程數據</p> <div class="alert alert-danger">  <p>1.這種方式對于分頁不太方便</p>  <p>2.BootstrapTable 對于字段中為空，自動替換成'-'</p> </div> <table data-toggle="table" data-url="@Url.Action("GetStudent","DataOne")">  <thead>   <tr>    <th data-field="sno">編號</th>    <th data-field="sname">姓名</th>    <th data-field="ssex">性別</th>    <th data-field="sbirthday">生日</th>    <th data-field="class">課程編號</th>   </tr>  </thead> </table>

3.data-classes 屬性指定表格的樣式，

特別說明：表頭和屬性的指定方式有兩種，一種DOM中定義，一種在Js的參數中定義

<table id="table1"   data-classes="table table-hover table-condensed"></table> [javascript] view plain copy print?//data-classes 可以設置樣式 /* * table-condensed 設置內容框濃縮 */ $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學生編號' },   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' });

table-condensed 表格緊湊樣式顯示如下：