闲话少说，直接贴代码
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Export</title>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="bootstrap-table-export/css/bootstrap-table.css" target="_blank" rel="external nofollow" >
<script src="js/jquery-1.10.2.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-table-export/js/bootstrap-table.js"></script>
<script src="bootstrap-table-export/js/bootstrap-table-export.js"></script>
<script src="bootstrap-table-export/js/tableExport.js"></script>
</head>
<body>
<div class="container">
<h1>Export</h1>
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<!--
data-toggle="table"
data-show-export="true"
data-pagination="true"
data-click-to-select="true"
data-toolbar="#toolbar"
data-search="true"
data-showRefresh="true"
data-strictSearch="true"
data-url="json/data1.json"
-->
<table id="table">
<thead>
<tr>
<th data-checkbox="true"></th>
<th>序号</th>
<th>名字</th>
<th>金额</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
$(function () {
showTable("1","2017");//初始化
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('refreshOptions', {
exportDataType: $(this).val()
});
});
})
//初始化Table
function showTable(dept_id,endTime){
$table.bootstrapTable({
url: 'json/data1.json', //请求后台的URL（*）
method: 'get', //请求方式（*）
dataType: "json",
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: {"dept_id":dept_id,"endTime":endTime},//传递参数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 8, //每页的记录行数（*）
pageList: [8, 15, 30, 60], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showExport:true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'id',
title: '编号'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '金额'
}, {
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick="edit(\''+ row.id + '\')">编辑</a> ';
var d = '<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick="del(\''+ row.id +'\')">删除</a> ';
var g = '<a href="main.html" target="_blank" rel="external nofollow" mce_href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" οnclick="detail(\''+ row.id +'\')">进入详情 </a> ';
return g;
}
}
]
});
}
</script>
<script type="text/javascript">
function detail(id){
alert(id);
}
</script>
</body>
</html>
数据是一个json文件，放在项目中的，可以换成自己的后台servlet，你可以偷个懒，拷贝进去:
![DataTable..::.ToString 方法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)