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

    <link href="~/lib/bootstrap-table/dist/bootstrap-table.css" 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" enables bootstrap table without JavaScript

< p > By means of the Data attribute, you don't need to write JavaScript to enable bootstrap table, just set data-toggle="table" </ p >
<div class="alert alert-danger">
    < p > 1. This method is not commonly used because paging is inconvenient </ 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. Use data-url to specify remote data. In particular, when using remote data, during the ajax request, the table content is displayed and loaded...,

< p > You can automatically load remote data by setting the remote url such as: data-url="data1.json" </ p >
<div class="alert alert-danger">
    < p > 1. This way is not very convenient for paging </ p >
    < p > 2. BootstrapTable automatically replaces with '-' for fields that are empty </ 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" > class number </ th >
        </tr>
    </thead>
</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

<table id="table1" 
       data-classes="table table-hover table-condensed"></table>

//data-classes can be styled
/*
* table-condensed set content box condensed
*/
$('#table1').bootstrapTable({
    columns: [
        { field : 'sno' , title : 'student number' },
        { field : 'sname' , title : 'student name' },
        { field : 'ssex' , title : 'sex' },
        { field : 'sbirthday' , title : 'birthday' },
        { field : 'class' , title : 'course number' },
    ],
    url:'@Url.Action("GetStudent","DataOne")'
});

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)