Bootstrap Data Table简单使用（动态加载数据）
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-table.css" />
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<script src="../js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table class="table" id="dataShow" >
</table>
<script>
$(function () {
//开始装载数据
$("#dataShow").bootstrapTable({
url: "http://www.zunyaohui.com/data/?action=product&class=0&type=list&option=a1_b1_c1_d1_e3_&keyword=",
sortName: "CompanyShortname",//排序列
striped: true,//條紋行
sidePagination: "server",//服务器分页
showRefresh: true,//刷新功能
clickToSelect: false,//选择行即选择checkbox
singleSelect: true,//仅允许单选
pagination: true,//启用分页
pageCount: 10,//每页行数
pageIndex: 0,//起始页
pageList: [10, 25, 50, 100],//可供选择的每页的行数
escape: true,//过滤危险字符
queryParams: getParams,//携带参数
dataType: "jsonp",
columns: [
{
title: '发行机构',
field: 'CompanyShortname',
align: 'center',
valign: 'middle'
},
{
title: '产品简称',
field: 'ProductShortname',
align: 'center',
valign: 'middle',
},
{
title: '预期年收益',
field: 'IncomeRate',
align: 'center',
formatter:function(value,row,index){
return value+"0%";
}
},
{
title: '起始资金',
field: 'AmountLow',
align: 'center'
},
{
title: '产品期限',
field: 'Term',
align: 'center',
},
{
title: '付息方式',
field: 'ServicingWay',
align: 'center',
},
{
title: '投资领域',
field: 'InvestmentField',
align: 'center',
},
{
title: '预约',
field: 'id',
align: 'center',
formatter:function(value,row,index){
return '<a href="#" mce_href="#" onclick="reserve(\''+ row.id + '\')">预约</a> ';
}
}
],
onLoadSuccess: function (ee)
{
//查询数据成功
console.info(ee);
}
});
});
//默认加载时携带参数
function getParams(parm) {
return { page: (parm.offset / parm.limit)+ 1, rows:10};
}
//预约功能
function reserve(parm) {
alert("进行预约操作！");
}
</script>
</body>
</html>
