輕量級表格插件Bootstrap Table。擁有強大的支持固定表頭、單/復選、排序、分頁、搜索及自定義表頭等功能。

Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數據，支持單選，復選框，排序，分頁,顯示/隱藏列,固定標題滾動表,響應式設計，Ajax加載JSON數據，點擊排序的列，卡片視圖等。

 

其相關鏈接: 以及其他學習資源，詳解看

http://www.html580.com/11556

 

 

其簡單示例，詳細 看鏈接

頁面調用

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="Jquery.min.js"><script>
<script src="bootstrap.min.js"><script>
<script src="bootstrap-table.js"><script>

//data-url 要調用的/控制器/方法？參數  例：/Aniuge/TradeOperaLog?tradeId=@Model.TradeId
//data-field 對應要顯示的實體屬性

<table data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" id="operaLog">
    <thead>
    <tr>
        <th data-field="name" data-formatter="nameFormatter">Name</th>
        <th data-field="stargazers_count" data-formatter="starsFormatter">Stars</th>
        <th data-field="forks_count" data-formatter="forksFormatter">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>


//刷新列表 在AJAX后調用此方法
function loadTradeLog()
{
//table  id=operaLog;
$("#operaLog").bootstrapTable("refresh",{url:"：/Aniuge/TradeOperaLog?tradeId=@Model.TradeId
"})
}


//將列設為鏈接
function nameFormatter(value) {
    return '<a href="https://github.com/wenzhixin/' + value + '">' + value + '</a>';
}

function starsFormatter(value) {
    return '<i class="glyphicon glyphicon-star"></i> ' + value;
}

function forksFormatter(value) {
    return '<i class="glyphicon glyphicon-cutlery"></i> ' + value;
}


其他詳解建議查看網站詳情   很多例子和示例