bootstrap table 的简单Demo

 暂时够用，不够用再补充 T_T

 

script:

<link rel="stylesheet" href="lib/bootstrap.min.css">
<!-- table css-->
<link rel="stylesheet" href="lib/bootstrap-table.css"><script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<!--table js-->
<script src="lib/bootstrap-table.js"></script>
<script>$(function () {var data = [{uid: "7791",name: "keenleung1",age: "26",height: "165",description: "描述"},{uid: "7792",name: "keenleung2",age: "26",height: "165",description: "描述"},{uid: "7793",name: "keenleung3",age: "26",height: "165",description: "描述"},{uid: "7794",name: "keenleung4",age: "26",height: "165",description: "描述"},{uid: "7795",name: "keenleung5",age: "26",height: "165",description: "描述"},];$('#table').bootstrapTable('load', data);var $result = $('#eventsResult');// 选择一行$('#table').on('click-row.bs.table', function (e, row, $element) {alert(JSON.stringify(row.uid));});});function actionFormatter(value, row, index) {return ["<button class='btn btn-primary like'>选取</button>","<button class='btn btn-default unlike'>取消</button>",].join('');}window.actionEvents = {'click .like': function (e, value, row, index) {alert(JSON.stringify(row));return false;},'click .unlike': function (e, value, row, index) {alert("unlike click");return false;},};
</script>
<style type="text/css"></style>
<script type="text/javascript"></script>

html:

<div class="alert alert-success" id="eventsResult">Here is the result of event.
</div>
<table id="table" data-toggle="table"><thead><tr><th data-field="name">姓名</th><th data-field="age">年龄</th><th data-field="height">身高</th><th data-field="description">描述</th><th class="text-left" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th></tr></thead>
</table>

 

>>>source in GIT

官网案例：http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/