站内导航
新闻
影视
游戏
小说
旅游
购物
体育
bootstrap-table服务器端分页示例
2017/04/27    标签： bootstrap    bootstraptable   

bootstrap-table官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="toolbar"></div>
                <table id="table_style" data-toggle="table" data-height="246">
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script>
        var getQueryParams = function (params) {
            params.offset = params.offset + 1;
            return params;
        }

        $('#table_style').bootstrapTable({
            url: 'page.ashx',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            search: true,                    //启用搜索
            showColumns:true,                   //列选择
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: getQueryParams,        //传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 2,                       //每页的记录行数（*）
            pageList: [2, 5, 6, 7,'ALL'],        //可供选择的每页的行数（*）
            strictSearch: true,
            clickToSelect: true,                //是否启用点击选中行
            height: 600,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            cardView: false,                    //是否显示详细视图
            showToggle:true,
            detailView: false,                   //是否显示父子表
            columns:[
                {
                    checkbox:true//显示复选框
                },
                {
                    field: 'value',
                    title: '标题',
                    cellStyle: function() {
                        return { classes: "important", css: { color: "#5E617D", 'font-weight': 'bold','width':'200px','word-break':'break-all' } }
                    }
                }, 
                {
                    field: 'addtime',
                    title: '时间'
                 }, 
                {
                    field: 'content',
                    title: '内容'
                 }, {
                    field: 'id',
                    title: '操作',
                    formatter: function (value, row, index) {
                        //value单元格内的数据，row行数据，index行数
                        var editBtn = "<a href='edit.aspx?id=" + value + "' class='btn btn-primary'>编辑</a>";
                        var deleteBtn = "<a href='edit.aspx?id=" + value + "' class='btn btn-cancel'>删除</a>";
                        return editBtn + deleteBtn;
                    }
                  }
            ]
        });
    </script>
</body>
</html>

注意点：columns的field要与服务器对应；

queryParams对应方法的参数，默认带offset（从0开始）偏移量，，limit是每页的数据量，（offset/limit+1）是当前页码；

服务器返回json格式：

{
    "total":500,//总数据量
    "page":400,//总页数
    "rows":[
        {"value":200,"addtim":"2017-04-24","content":"bootstrap-table服务器端分页学习笔记","id":1}
        ]
 }


上一篇:
下一篇:

静水缘首页

刘丕水+宋静静=静水刘丕水+宋静静于2007年9月相识于山东理 工大学，毕业后2011年相恋，共甘苦，历 时四年，终于在11月23号拿到了红本本， 组建了自己的小家庭......
快速发布

文章分类

最新文章