`

bootstrap-table的使用列表分页,导出

 
阅读更多
对于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后端分页功能完整实例

    使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" &gt; &lt;link rel=...

    BootStrap-table.js 官网下载

    - `examples`:包含各种示例,展示如何使用和配置Bootstrap-table.js。 - `docs`:文档文件,解释了插件的使用方法和API详情。 - `LICENSE`:项目的许可协议。 - `README.md`:项目简介和安装指南。 为了使用...

    bootstrap-table-fixed-columns-v1.0.2.zip

    FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...

    bootstrap-table,前端分页框架

    综上所述,Bootstrap Table是一个功能强大的前端表格解决方案,尤其适用于需要展示大量数据并进行分页、排序和导出的场景。其丰富的API和扩展性使得开发者能够轻松构建功能丰富的数据展示界面。

    [MVC]bootstrap-table表格ajax获取json数据并分页

    同时,bootstrap-table还支持导出表格数据到CSV、Excel等格式,只需要在JS中调用`table.exportTable()`方法。 总的来说,通过结合ASP.NET MVC、AJAX和bootstrap-table,我们可以轻松实现动态加载和分页显示JSON数据...

    bootstrap-table导出合并单元格

    Bootstrap Table是一款基于Bootstrap框架的动态数据表格插件,它提供了丰富的功能,如排序、筛选、分页等。在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有...

    bootstrap-table-master.rar

    你还可以通过JavaScript API来控制表格的行为,如调用$table.bootstrapTable('load', data)来动态加载数据。 这个压缩包中的"dist"目录包含了各种编译后的文件,适用于直接在生产环境中使用。"src"目录则包含了源...

    bootstrap-table插件包

    主要的JS文件可能是`bootstrap-table.js`,它包含了表格的初始化、数据加载、排序、过滤、分页等功能的实现。此外,可能还有其他扩展功能的JS文件,如`export.js`(数据导出)或`editable.js`(单元格编辑)。这些...

    bootstrap-table头部错位已完美解决

    $('#myTable').bootstrapTable({ fixedColumns: true, fixedNumber: 1 // 如果需要第一列固定,将数字1替换为需要固定的列数 }); ``` 6. **更新或修复插件**:有时,问题可能出在Bootstrap表格插件本身。确保...

    bootstrap-table插件

    Bootstrap Table是一款广泛应用于Web开发中的开源插件,它基于Twitter Bootstrap框架,为开发者提供了一种简单、优雅的方式来展示数据,并提供了丰富的功能,如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...

    bootstrap-table相关包.zip

    Bootstrap Table扩展了这一功能,提供了表格的排序、筛选、分页、固定列、行编辑、导出数据等多种功能。 在压缩包中,主要文件可能包括以下部分: 1. `bootstrap-table.css`:这是Bootstrap Table的核心样式文件,...

    bootstrap-table.rar

    $('#table').bootstrapTable(); }); ``` 这个压缩包中的“演示界面”可能是HTML文件,它展示了如何将上述组件集成到实际项目中,你可以通过查看和修改这个界面来学习和实践Bootstrap Table的用法。 总的来说,...

    bootstrap-table-demo

    这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例代码和资源,帮助开发者快速理解和应用Bootstrap Table。 1. **基本用法**:Bootstrap Table 的使用通常涉及在HTML中定义一个表格结构,然后...

    bootstrap及bootstrap-table

    5. **扩展性**:bootstrap-table有很多社区贡献的扩展,如固定列、导出数据、树形结构等,进一步增强了其功能。 结合使用Bootstrap和bootstrap-table,开发者可以快速创建出既美观又功能强大的Web应用,尤其适合...

    bootstrap-table-master.zip

    "bootstrap-table-master.zip"包含了该插件的源代码和其他相关资源,便于开发者进行定制和二次开发。 Bootstrap Table的核心特性包括: 1. 数据源:支持本地数据、JSON、XML、CSV、Google Sheets等多种数据源,...

    bootstrap table-js.rar

    这通常通过调用`$('#table').bootstrapTable({ options })`方法实现,其中`#table`是表格的ID,`options`是一个包含各种配置项的对象。 4. **数据源**:Bootstrap Table支持多种数据源,包括JSON对象数组、服务器端...

    bootstrap-table.js2019.zip

    Bootstrap Table 是一个强大的前端表格插件,主要用于在网页上展示结构化的数据,它基于流行的Bootstrap框架,提供了丰富的功能和良好的可定制性。这个压缩包"bootstrap-table.js2019.zip"包含的是2019年版本的...

    bootstrap-table-develop.zip

    $('#table').bootstrapTable({ data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); ``` 以上代码创建了一个简单的Bootstrap Table,展示了两行数据。...

    bootstrap-table真实交互数据

    2. **Bootstrap Table**:Bootstrap Table是一个轻量级的表格插件,它通过简单的HTML标记和JavaScript选项,为表格添加了排序、筛选、分页、固定列、列选择、行选择、合并单元格、导出数据等多种功能。这个"真实交互...

Global site tag (gtag.js) - Google Analytics