bootstrapTable 分页插件

时间:2024-04-16 09:13:26

前端:

@{
    ViewBag.Title = "BootstrapTable 入门";
    Layout = null;
}
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<div style="">


    <div style="width:500px">
        <!--定义table-->
        <table id="table"></table>
    </div>
    <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
        <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default" style="">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
    </div>
</div>
@*<div>
        <table data-toggle="table" data-url="">
            <thead>
                <tr>
                    <th data-field="Name">姓名</th>
                    <th data-field="Age">年龄</th>
                    <th data-field="Work">职业</th>
                </tr>
            </thead>

        </table>
    </div>*@





<script>
    $("#table").bootstrapTable({ // 对应table标签的id
        method: \'get\',
        url: "/Home/GetTestDataPager", // 获取表格数据的url
        contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求,注释掉这句话也能拿到数据
        dataField: "data",//这是返回的json数组的key.默认是"rows".这里只有前后端约定好就行
        cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
        striped: true,  //表格显示条纹,默认为false
        pagination: true, // 在表格底部显示分页组件,默认false
        pageList: [10, 20, 50, 100, 200, 500], // 如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
        pageSize: 10, // 页面数据条数
        pageNumber: 1, // 初始化加载第一页,默认第一页
        sidePagination: \'server\', // 设置为服务器端分页     客户端:client
        search: false,
        toolbar: \'#toolbar\',//指定工具栏
        searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
        undefinedText: \'---\', //当数据为 undefined 时显示的字符
        singleSelect: false,//设置True 将禁止多选
        clickToSelect: true,//设置true 将在点击行时,自动选择rediobox 和 checkbox
        height: 650,     //定义表格的高度。     
        searchTimeOut: 500,// 默认500  设置搜索超时时间。
        toolbarAlign: \'right\',// 指定 toolbar 水平方向的位置。\'left\' 或 \'right\'
        paginationDetailHAlign: \'left\',//指定 分页详细信息 在水平方向的位置。\'left\' 或 \'right\'。
        showHeader: true,//是否显示列头。
        trimOnSearch: true,//设置为 true 将自动去掉搜索字符的前后空格。
        rowStyle: function (row, index) {
            var style = {
                // css: { \'height\': \'10px\', \'font-size\': \'small\', \'classes\':\'danger\'}
            };

            return style;
        },
        queryParams: function (params) { // 请求服务器数据时发送的参数,可以在这里添加额外的查询参数,返回false则终止请求

            return {
                pageSize: params.limit, // 每页要显示的数据条数
                currentPage: params.offset / params.limit + 1, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则
                //dataId: $("#dataId").val() // 额外添加的参数
                // search: params.search, //搜索框内容
            }
        },
        sortName: \'id\', // 要排序的字段
        sortOrder: \'desc\', // 排序规则
        columns: [
            {
                checkbox: true, // 显示一个勾选框
                align: \'center\' // 居中显示
            },
            {
                radio: true,            //设置为True的时候 则显示一列radio组件,该列的宽度为固定宽度
                align: \'center\' // 居中显示
            },
            {
                field: \'Name\', // 要显示数据的字段名称,可以理解为json对象里的key
                title: \'姓名\', // 表格表头显示文字
                align: \'center\', // 左右居中
                valign: \'middle\', // 上下居中
                visible: true
            },
            {
                field: \'Age\',
                title: \'年龄\',
                align: \'center\',
                valign: \'middle\'
            },
            {
                field: \'Work\',
                title: \'职业\',
                align: \'center\',      //设置单元格数据的左右对齐方式, 可选择的值有:’left’, ‘right’, ‘center’
                valign: \'middle\',    //设置单元格数据的上下对齐方式, 可选择的值有:’top’, ‘middle’, ‘bottom’
                formatter: function (value, row, index) { // 单元格格式化函数
                    //value: 该列的字段值;
                    //row: 这一行的数据对象;
                    // index: 行号,第几行,从0开始计算
                    var text = \'-\';
                    if (value == 1) {
                        text = "方式一";
                    } else if (value == 2) {
                        text = "方式二";
                    } else if (value == 3) {
                        text = "方式三";
                    } else if (value == 4) {
                        text = "方式四";
                    }
                    return value;
                },

                cellStyle: function (value, row, index) {                           // cell的样式设置,可以返回css或者classes
                    return {
                        css: { \'height\': \'10px\', \'font-size\': \'small\' },
                        classes: \'danger\'      
                    }
                },
                events: function (value, row, index) {
                    alert(value);
                }

            }, {
                title: "操作",
                align: \'center\',
                valign: \'middle\',
                width: 160, // 定义列的宽度,单位为像素px
                formatter: function (value, row, index) {
                    return \'<button class="btn btn-primary btn-sm" onclick="del(\\'\' + row.Age + \'\\')">删除</button> <button class="btn btn-primary btn-sm" onclick="del(\\'\' + row.Age + \'\\')">删除</button>\';
                },
                cellStyle: function (value, row, index) {
                    return { classes: \'danger\' }

                }
            }
        ],
        onLoadSuccess: function (result) {  //加载成功时执行
            console.info("加载成功");
        },
        onLoadError: function () {  //加载失败时执行
            console.info("加载数据失败");
        }

    })
</scrip

后台模拟分页:

   public JsonResult GetTestDataPager(int pageSize, int currentPage, string sort, string sortOrder)
        {


            PageEntity<ModelInfo> page = new PageEntity<ModelInfo>();
            var data = GetmodelInfos().Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
            page.data = data;

                       decimal totalPage = page.total * 1.00m / pageSize;
                       page.page = Convert.ToInt32(Math.Ceiling(totalPage));// page.total % pageSize > 0 ? (page.total / pageSize + 1) : (page.total / pageSize);

            // 模仿分页
            return Json(page, JsonRequestBehavior.AllowGet);
        }


        private List<ModelInfo> GetmodelInfos()
        {
            List<ModelInfo> lst = new List<ModelInfo>();
            for (int i = 0; i < 5000; i++)
            {
                lst.Add(new ModelInfo { Name = $"{i}_zheng", Age = i, Work = $"{i}_work" });
            }
            return lst;

        }
        public class ModelInfo
        {
            public string Name { get; set; }

            public int Age { get; set; }

            public string Work { get; set; }


        }


    }
    public class PageEntity<T> where T : class
    {
        public List<T> data { get; set; }

        public int page { get; set; }

        public int total { get; set; }


    }
}

  

展示: