Bootstrap Table use finishing (1)

1. Bootstrap Table related finishing

Bootstrap-based jQuery form plug-in, through simple settings, you can have powerful single-selection, multiple-selection, sorting, paging, as well as editing, exporting, filtering (expansion) and other functions.

1. Official website address:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/     Git source code address: https://github.com/wenzhixin/bootstrap-table

Basic introduction:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

Example of use:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/

API Documentation:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/


Bootstrap Table is a bit simple to use, beautiful and tidy, and supports CardView and other features

2. Simple usage examples

base citation

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

1.data-toggle="table" enables bootstrap table without JavaScript

  1. < p > By means of the Data attribute, you don't need to write JavaScript to enable bootstrap table, just set data-toggle="table" </ p >
  2. <div class="alert alert-danger">
  3. < p > 1. This method is not commonly used because paging is inconvenient </ p >
  4. </div>
  5. <table data-toggle="table">
  6. <thead>
  7. <tr>
  8. <th>Item ID</th>
  9. <th>Item Name</th>
  10. <th>Item Price</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td>1</td>
  16. <td>Item 1</td>
  17. <td>$1</td>
  18. </tr>
  19. <tr>
  20. <td>2</td>
  21. <td>Item 2</td>
  22. <td>$2</td>
  23. </tr>
  24. </tbody>
  25. </table>


2. Use data-url to specify remote data. In particular, when using remote data, during the ajax request, the table content is displayed and loaded...,

  1. < p > You can automatically load remote data by setting the remote url such as: data-url="data1.json" </ p >
  2. <div class="alert alert-danger">
  3. < p > 1. This way is not very convenient for paging </ p >
  4. < p > 2. BootstrapTable automatically replaces with '-' for fields that are empty </ p >
  5. </div>
  6. <table data-toggle="table" data-url="@Url.Action("GetStudent","DataOne")">
  7. <thead>
  8. <tr>
  9. <th data-field="sno">编号</th>
  10. <th data-field="sname">姓名</th>
  11. <th data-field="ssex">性别</th>
  12. <th data-field="sbirthday">生日</th>
  13. < th data-field = "class" > class number </ th >
  14. </tr>
  15. </thead>
  16. </table>



3. The data-classes attribute specifies the style of the table,

Special note: There are two ways to specify headers and attributes, one is defined in the DOM, the other is defined in the parameters of Js

  1. <table id="table1"
  2. data-classes="table table-hover table-condensed"></table>
  1. //data-classes can be styled
  2. /*
  3. * table-condensed set content box condensed
  4. */
  5. $('#table1').bootstrapTable({
  6. columns: [
  7. { field : 'sno' , title : 'student number' },
  8. { field : 'sname' , title : 'student name' },
  9. { field : 'ssex' , title : 'sex' },
  10. { field : 'sbirthday' , title : 'birthday' },
  11. { field : 'class' , title : 'course number' },
  12. ],
  13. url:'@Url.Action("GetStudent","DataOne")'
  14. });
 The table-condensed table compact style appears as follows:




More:

Bootstrap Table use sorting (5) - paging combined query

Bootstrap Table use sorting (4) - Toolbar

Bootstrap Table use finishing (3)

Bootstrap Table use finishing (2)


Related: Bootstrap Table use finishing (1)