轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

时间：2022-02-08 21:36:31

Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。

其相关链接: 以及其他学习资源，详解看

http://www.html580.com/11556

轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

其简单示例，详细 看链接

页面调用

<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;

}

其他详解建议查看网站详情   很多例子和示例

相关文章