同样 导入相应的css和js
<!---注意,导出表格插件只能使用bootstrap-table-export.js此脚本,用bootstrap-table-export.min.js脚本按钮无法加载---->
<script src="~/Content/bootstrap-table-export.js"></script>
@*<script src="~/Content/bootstrap-table-export.min.js"></script>*@
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
script部分
<script>
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化select的change事件
$("#sel_exportoption").change(function () {
$('#tb_departments').bootstrapTable('refreshOptions', {
exportDataType: $(this).val()
});
});
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '@Url.Action("Export1")', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
idField: 'id',//标识主键
pageSize: 5, //每页的记录行数(*)
pageList: [10, 15, 20], //可供选择的每页的行数(*)
clickToSelect: true,
//到处表格必需设置的属性
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'id',
title: '编号'
}, {
field: 'pwd',
title: '密码'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'logintime',
title: '时间'
}, ]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
pagesize: params.limit, //页面大小
pageindex: params.offset / params.limit + 1, //页码
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
};
return oInit;
};
</script>
布局部分
<div id="toolbar" class="btn-group">
<select id="sel_exportoption" class="form-control">
<option value="">导出当前页面数据</option>
<option value="all">导出全部数据</option>
<option value="selected">导出选中数据</option>
</select>
</div>
<table id="tb_departments"></table>
注意 ;导出数据不用后台方法,表格导出插件会帮我们完成tableExport.js