Table Properties:

Column Properties:

Events:

Methods:

Examples:

Basic Table

Item ID Item Name Item Price 

<table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
    <thead>
        <tr>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="left">Item Price</th>
        </tr>
    </thead>
</table>

Sort Table

Item ID Item Name Item Price 

<table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
    <thead>
        <tr>
            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
            <th data-field="price" data-sortable="true" data-sortable="true">Item Price</th>
        </tr>
    </thead>
</table>

Radio Table

Item ID Item Name Item Price 

<table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
    <thead>
        <tr>
            <th data-field="state" data-radio="true"></th>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="left">Item Price</th>
        </tr>
    </thead>
</table>

Checkbox Table

Item ID Item Name Item Price 

<table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="left">Item Price</th>
        </tr>
    </thead>
</table>

Pagination Table

Item ID Item Name Item Price 

<table class="bootstrap-table" data-url="docs/data1.json" data-height="246" data-pagination="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" data-align="right">Item ID</th>
            <th data-field="name" data-align="center">Item Name</th>
            <th data-field="price" data-align="left">Item Price</th>
        </tr>
    </thead>
</table>

Acknowledgements:

© 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin.

My website (wenzhixin.net.cn)

My repos (repos.wenzhixin.net.cn)

Github (@wenzhixin)

Email (wenzhixin2010@gmail.com)