对于bootstrap-table的使用了列表分页和导出excel功能,需要使用的包如下:
bootstrap-table.js、bootstrap-table-export.js、tableExport.js引用顺序不能变
tableExport.js下载地址:https://github.com/hhurz/tableExport.jquery.plugin
首先要初始化bootstrap-table
var initTable = function (url) {
$('#tb_SaleOrder').bootstrapTable("destroy");
$('#tb_SaleOrder').bootstrapTable({
rowStyle: function(row, index) {//row 表示行数据,object,index为行索引,从0开始
var style = "";
if (row.SignInTime == '' || row.SignOutTime == '') {
style = { css: { 'color': 'red' } };
}
return style;
},
//searchAlign: 'left',
//search: true, //显示隐藏搜索框
//showHeader: true, //是否显示列头
//classes: 'table-no-bordered',
//showLoading: true,
//undefinedText: '',
//showFullscreen: true,
//toolbarAlign: 'left',
//paginationHAlign: 'right',
//silent: true,
url: '/User/getUserList',
method: 'get', //请求方式(*)
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
//queryParams: InitTable.queryParams, //传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 5, //每页的记录行数(*)
pageList: [5, 10, 15], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 680, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出按钮
exportTypes: ['excel'], //导出的类型
buttonsAlign: "right", //导出按钮的位置
Icons: 'glyphicon-export', //导出按钮图标
exportOptions: {
fileName:'table' //导出时的文件名称
},
//exportDataType: 'all',
exportDataType: "selected", //导出checkbox选中的行数
//paginationLoop: false, //是否无限循环
queryParams: function (params) {
var temp = {
pageSize: params.limit,
pageNumber: params.offset / params.limit,
sort: params.sort,
sortOrder: params.order
};
return temp;
},
columns: [{
checkbox: true
}, {
field: 'id',
title: 'id'
}, {
field: 'name',
title: '用户名'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'password',
title: '密码'
}]
});
return initTable;
};
后台代码使用的是C#的
public IActionResult getUserList(UserFilterPageModel fpm,int pageNumber, int pageSize,
string sort,
string sortDir = "Descending")
{
//测试是否提交成功
int total;
IEnumerable<UserListItem> list =
_userService.GetUsers(fpm.FilterModel,
out total,
sort: string.IsNullOrEmpty(sort) ? "ID" : sort,
sortOrder: LinqExtention.GetSortDirection(sortDir)
);
JavaScriptSerializer serialize = new JavaScriptSerializer();
fpm.PageSize = AppConfig.PageSize;
fpm.TotalRows = total;
fpm.Models = list;
//var rows = list.Skip(5).Take(10).ToList();
//var userList = list.Take(pageSize * pageNumber).Skip(pageSize * (pageNumber - 1)).ToList();
var userList = list.Skip(pageSize * pageNumber).Take(pageSize).ToList();
return Json(new { total, rows = userList });
}
这里要注意的是返回Json时第一个参数一定是total,名称不能改
分享到:
相关推荐
使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel=...
- `examples`:包含各种示例,展示如何使用和配置Bootstrap-table.js。 - `docs`:文档文件,解释了插件的使用方法和API详情。 - `LICENSE`:项目的许可协议。 - `README.md`:项目简介和安装指南。 为了使用...
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
综上所述,Bootstrap Table是一个功能强大的前端表格解决方案,尤其适用于需要展示大量数据并进行分页、排序和导出的场景。其丰富的API和扩展性使得开发者能够轻松构建功能丰富的数据展示界面。
同时,bootstrap-table还支持导出表格数据到CSV、Excel等格式,只需要在JS中调用`table.exportTable()`方法。 总的来说,通过结合ASP.NET MVC、AJAX和bootstrap-table,我们可以轻松实现动态加载和分页显示JSON数据...
Bootstrap Table是一款基于Bootstrap框架的动态数据表格插件,它提供了丰富的功能,如排序、筛选、分页等。在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有...
你还可以通过JavaScript API来控制表格的行为,如调用$table.bootstrapTable('load', data)来动态加载数据。 这个压缩包中的"dist"目录包含了各种编译后的文件,适用于直接在生产环境中使用。"src"目录则包含了源...
主要的JS文件可能是`bootstrap-table.js`,它包含了表格的初始化、数据加载、排序、过滤、分页等功能的实现。此外,可能还有其他扩展功能的JS文件,如`export.js`(数据导出)或`editable.js`(单元格编辑)。这些...
$('#myTable').bootstrapTable({ fixedColumns: true, fixedNumber: 1 // 如果需要第一列固定,将数字1替换为需要固定的列数 }); ``` 6. **更新或修复插件**:有时,问题可能出在Bootstrap表格插件本身。确保...
Bootstrap Table是一款广泛应用于Web开发中的开源插件,它基于Twitter Bootstrap框架,为开发者提供了一种简单、优雅的方式来展示数据,并提供了丰富的功能,如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...
Bootstrap Table扩展了这一功能,提供了表格的排序、筛选、分页、固定列、行编辑、导出数据等多种功能。 在压缩包中,主要文件可能包括以下部分: 1. `bootstrap-table.css`:这是Bootstrap Table的核心样式文件,...
$('#table').bootstrapTable(); }); ``` 这个压缩包中的“演示界面”可能是HTML文件,它展示了如何将上述组件集成到实际项目中,你可以通过查看和修改这个界面来学习和实践Bootstrap Table的用法。 总的来说,...
这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例代码和资源,帮助开发者快速理解和应用Bootstrap Table。 1. **基本用法**:Bootstrap Table 的使用通常涉及在HTML中定义一个表格结构,然后...
5. **扩展性**:bootstrap-table有很多社区贡献的扩展,如固定列、导出数据、树形结构等,进一步增强了其功能。 结合使用Bootstrap和bootstrap-table,开发者可以快速创建出既美观又功能强大的Web应用,尤其适合...
"bootstrap-table-master.zip"包含了该插件的源代码和其他相关资源,便于开发者进行定制和二次开发。 Bootstrap Table的核心特性包括: 1. 数据源:支持本地数据、JSON、XML、CSV、Google Sheets等多种数据源,...
这通常通过调用`$('#table').bootstrapTable({ options })`方法实现,其中`#table`是表格的ID,`options`是一个包含各种配置项的对象。 4. **数据源**:Bootstrap Table支持多种数据源,包括JSON对象数组、服务器端...
Bootstrap Table 是一个强大的前端表格插件,主要用于在网页上展示结构化的数据,它基于流行的Bootstrap框架,提供了丰富的功能和良好的可定制性。这个压缩包"bootstrap-table.js2019.zip"包含的是2019年版本的...
$('#table').bootstrapTable({ data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); ``` 以上代码创建了一个简单的Bootstrap Table,展示了两行数据。...
2. **Bootstrap Table**:Bootstrap Table是一个轻量级的表格插件,它通过简单的HTML标记和JavaScript选项,为表格添加了排序、筛选、分页、固定列、列选择、行选择、合并单元格、导出数据等多种功能。这个"真实交互...