Bootstrap-table 基本模板

2019-01-15  本文已影响14人  东方不喵

Bootstrap demo
GitHub https://github.com/oldguys/Bootstrap3Demo
https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/table/SimpleTableList.html
部署URL: http://localhost:8081/view/table/simple

Bootstrap-table 基本用法
css:

  1. bootstrap.min.css
  2. bootstrap-table.css

js:

  1. jquery-2.1.0.min.js
  2. bootstrap.min.js
  3. bootstrap-table.js

代码模板：基于 thymeleaf

<table id="records-info"></table>

<script th:inline="text">
    $('#records-info').bootstrapTable({
        url: "[[@{/table/list}]]",//请求数据url 
        showRefresh: true, 
        smartDisplay: true,
        showToggle: true,
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        pagination: true,//分页
        pageNumber: 1,
        pageSize: 15,
        pageList: [10, 20, 30, 50, 'all'],//分页步进值
        search: true, //显示搜索框
        columns: [
            {
                field: 'id',
                title: '编号',
            },
            {
                field: 'name',
                title: '名称',
            },
            {
                field: 'time',
                title: '时间',
            },
            {
                field: 'context',
                title: '序列号',
                width: '600px'   // 宽度
            },
            {
                field: 'status',
                title: '状态',
                formatter: function (value, row, index) { // 单元格格式化函数
                    if(value == 1){
                        return "<span class='text-success'>正常</span>"
                    }
                    return "<span class='text-danger'>禁用</span>"
                }
            },
            {
                title: '编辑',
                formatter: function (value, row, index) { // 单元格格式化函数

                    var id = row['id'];
                    var str = '<div class="btn-group"> ' +
                        ' <button class="btn btn-default btn-edit" title="详情"' +
                        'data-toggle="tooltip" data-placement="left" data-value="' + id + '" >  ' +
                        '  <i class="glyphicon glyphicon-pencil"></i>  ' +
                        ' </button>  ' +
                        ' </div>  ';

                    return str;
                }
            },
        ]
    })
</script>

使用后端分页
配置位置

sidePagination: 'server',//服务器端分页
// 查询参数
queryParams: function (params) {
            params['size'] = params['limit'];
            params['current'] = (params['offset'] + params['limit']) / params['limit'];
            return params;
},

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server</title>
    <span th:include="common/templates :: common-css-js"></span>
    <span th:include="common/templates :: init-menu"></span>
    <span th:include="common/templates :: bootstrap-table"></span>
</head>
<body>
<div th:replace="common/templates :: header"></div>
<div class="container">
    <div class="page-header">
        <div class="h3">Server Table</div>
    </div>
    <table id="records-info"></table>
</div>
</body>
<script th:inline="text">
    $('#records-info').bootstrapTable({
        url: "[[@{/table/page}]]",//请求数据url
        showRefresh: true,
        smartDisplay: true,
        showToggle: true,
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        pagination: true,//分页
        pageNumber: 1,
        pageSize: 15,
        pageList: [10, 20, 30, 50, 'all'],//分页步进值
        search: true, //显示搜索框
        sidePagination: 'server',//服务器端分页
        queryParams: function (params) {
            params['size'] = params['limit'];
            params['current'] = (params['offset'] + params['limit']) / params['limit'];
            return params;
        },
        columns: [
            {
                field: 'id',
                title: '编号',
            },
            {
                field: 'name',
                title: '名称',
            },
            {
                field: 'time',
                title: '时间',
            },
            {
                field: 'context',
                title: '序列号',
            },
            {
                field: 'status',
                title: '状态',
                formatter: function (value, row, index) { // 单元格格式化函数
                    if(value == 1){
                        return "<span class='text-success'>正常</span>"
                    }
                    return "<span class='text-danger'>禁用</span>"
                }
            },
            {
                title: '编辑',
                formatter: function (value, row, index) { // 单元格格式化函数

                    var id = row['id'];
                    var str = '<div class="btn-group"> ' +
                        ' <button class="btn btn-default btn-edit" title="详情"' +
                        'data-toggle="tooltip" data-placement="left" data-value="' + id + '" >  ' +
                        '  <i class="glyphicon glyphicon-pencil"></i>  ' +
                        ' </button>  ' +
                        ' </div>  ';

                    return str;
                }
            },
        ]
    })
</script>
</html>
上一篇下一篇

猜你喜欢

热点阅读