轻量级表格插件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;
}


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