我爱编程

利用bootstrap-table 创建服务器分页方式的表格

2018-01-30  本文已影响0人  妮妮喔

导语

Bootstrap-table 是基于Bootstrap的Jquery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

Bootstrap-table 显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。

客户端模式较为简单，读者可根据官方文档和例子来实践。本文主要介绍服务器模式，并可以实现带参数的查询。

开始使用

1、bootstrap-table 的引入

Bootstrap table 可以有几种快速入门的方法，每种适合不同技能等级的人使用，可以查看官方文档（http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/），找到合适的方法引入。本文采用将bootstrap下载到本地直接引用。这里有两点需要注意：

2、页面Html引用相关组件，并定义好一个空的table
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="dataGrid">
        <div class="formPart">
           <form class="form-inline">
                <div class="form-group col-md-5">
                    <label for="startTime" class="col-md-3 control-label time_label">开始时间</label>
                    <div class="input-group date form_date col-md-8" data-date="2018-01-23" data-date-format="yyyy-mm-dd" data-link-field="startTime" data-link-format="yyyy-mm-dd">
                        <input class="form-control startTime" size="16" type="text" value="2018-01-23">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="startTime" value="2018-01-23" /><br/>
                </div>
                <div class="form-group col-md-5">
                    <label for="endTime" class="col-md-3 control-label time_label">至</label>
                    <div class="input-group date form_date col-md-8" data-date="2018-01-23" data-date-format="yyyy-mm-dd" data-link-field="endTime" data-link-format="yyyy-mm-dd">
                        <input class="form-control endTime" size="16" type="text" value="2018-01-23">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="endTime" value="2018-01-23" /><br/>
                </div>
                <input type="button" class="btn btn-primary" value="查询" id="queryBtn">
            </form>
        </div>

        <div>
            <table id="table" class="tableStyle" >
                <thead>
                    <tr>
                        <th data-formatter="num" data-align="center">序号</th>
                        <th data-field="userid" data-align="center">用户UID</th>
                        <th data-field="browseNum" data-align="center">浏览数</th>
                        <th data-field="status" data-align="center">报名状态</th>
                        <th data-field="time" data-align="center">时间</th>
                        <th data-field="auditStatus" data-align="center">审核状态</th>
                        <th data-field="result" data-align="center">审核结果</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script src="js/asset/jquery-1.8.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-table.min.js"></script>
    <script src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/page/grid.js"></script>
</body>
</html>
3、js代码

var pageSize = 10;
var pageNum = 1;
var startTime = "";
var endTime = "";

$(function(){
    startTime = $(".startTime").val();
    endTime = $(".endTime").val();

    // 对table进行初始化
    $('#table').bootstrapTable({ 
        striped:true,  
        height:500,
        pagination: true,  
        sidePagination:"server",    //这里设置为服务端分页模式
        pageList: [10, 20, 30, 50],
        onPageChange:pageChange,
        onClickRow:clickRow
    }).bootstrapTable('load',getData(pageNum,pageSize));

   // 初始化日历插件
    $('.form_date').datetimepicker({
        language:  'cn',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });

    // 对分页插件显示的文本进行汉化，在html中需要引入汉化的js文件
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})

function getData(pageNum,pageSize){
    var datas = {
        "from":startTime,
        "end":endTime,
        "pageNum":pageNum,
        "pageSize":pageSize
    }
    var data = {};
    $.ajax({
        type: "post",
        url: "GetHistoryData",
        cache: false,
        data:datas,
        async:false,
        dataType:"json",
        success: function (str) {
            if(str.result == true){
                var result = str.data.details;
                var total = str.data.total;
                data.total=total;
                data.rows=result;
            }else{
                alert('系统忙，请稍候重试！');
            }
        },
        error: function (result) {
            alert('系统忙，请稍候重试！');
        }
    })
    return data;
}    

function pageChange(pageNum,pageSize){
    $('#table').bootstrapTable('load',getData(pageNum,pageSize));
}

function clickRow(field, value){
    console.log(field)
}

// 在表格显示序号
function num(value, row, index){
    var options = $('#table').bootstrapTable('getOptions');  
    return options.pageSize * (options.pageNumber - 1) + index + 1;  
}

// 根据查询条件进行查询
$("#queryBtn").click(function(){
    startTime = $(".startTime").val();
    endTime = $(".endTime").val();
    $('#table').bootstrapTable('load',getData(pageNum,pageSize));
})
4、页面
table
5、总结

初次写简书，一个小Demo，如有写错的地方欢迎指正，谢谢！

上一篇 下一篇

猜你喜欢

热点阅读