使用Bootstrap Table实现无刷新分页

前提

在以前做分页时，都是使用mybatis-plus进行的分页，但是点击页面的时候会进行刷新，这样在一些场景下会使用不了，但是使用AJAX也是可以实现的，但是今天使用Bootstrap的一个很好的插件进行分页，里面也提供了很多工具，比如可以导出表格等。
前提工作：准备相关的JS、CSS文件

<link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"><!--layer upload -css-->

<script src ="../js/bootstrap/bootstrap-table/extensions/editable/bootstrap-editable.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../js/bootstrap/bootstrap-table/local/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/layer/layer.js"></script>
<script src ="../js/bootstrap/datetimePicker/js/bootstrap-datetimepicker.js"></script>
<script src ="../js/bootstrap/datetimePicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src ="../js/bootstrap/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
<script src="../js/bootstrap/bootstrap-tableExport/tableExport.js"></script>
<script src="../js/bootstrap/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>

实现

首先在html中给一个table，并且给赋值一个id

<table id="dayAlarmTable"></table>

然后需要ajax请求对后端接口进行请求数据

//加载日预警数据
function loadDay() {
    //获取日发布预警表格数据
    $.ajax({    //获取数据(日)
        url : "../metAlarm/getAlarmInfo",
        type : "get",
        contentType : "application/json",
        dataType : "json",
        success : function(data) {
            dayAlarm = data.dayAlarmList;
            for(var i in dayAlarm){
                timestamp = dayAlarm[i].issueTime
                var date = new Date(timestamp);
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var day = ("0" + date.getDate()).slice(-2);
                var datetime = year + "-" + month + "-" + day;
                dayAlarm[i].issueTime = datetime
            }
            $("#dayAlarmTable").bootstrapTable("load", dayAlarm);
        },
        error :function(){
            layer.close(index);
            layer.msg("没有找到数据！", {icon: 2});
        }
    });
}

请求中使用$("#dayAlarmTable").bootstrapTable("load", dayAlarm);语句把数据传入到表格中。

然后在写入表格样式的语句
根据自己写的id进行修改，对不同的格式也可以在里面进行修改，表头和数据的名称，field一般是根据传入的对象名进行写入，要注意的是可能会自动进行驼峰命名

//日预警表格样式
function dayTableFactory() {

    // var options=$("#cs option:selected");//获取id为"cs"的选中的项
    var me = this;
    var init = function () {
        $.when().then(function () {
            $("#dayAlarmTable").bootstrapTable({
                method: 'get',				  //请求方式（*）
                striped: true,					  //是否显示行间隔色
                cache: false,					   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,				   //是否显示分页（*）
                sortable: true,					 //是否启用排序
                sortOrder: "desc",				   //排序方式
                sidePagination: "client",		   //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,					   //初始化加载第一页，默认第一页
                // search: true,					   //是否显示表格搜索，只能进行客户端搜索
                strictSearch: false,                //true为全匹配，false为模糊查询
                showColumns: true,				  //是否显示筛选列按钮
                showRefresh: true,			  //是否显示刷新按钮
                clickToSelect:true,				//是否启用点击选中行
                showToggle: false,					//是否显示详细视图和列表视图的切换按钮
                cardView: false,					//是否显示详细视图
                detailView: false,				   //是否显示父子表
                singleSelect: true,                //是否支持多选,false表示支持多选，true表示不支持
                //undefinedText: '_',              //当数据为undefined时显示的字符
                height: 'auto',
                pageSize: 5,
                pageList: [5, 25, 50, 100],
                // editable:true,//是否可以行内编辑
                showExport: true,//是否显示导出按钮
                exportDataType:'all',//导出全部
                exportTypes:[  'csv'], //导出文件类型
                export: 'glyphicon-export icon-share',
                exportOptions:{
                    // ignoreColumn: [0,1],  //忽略某一列的索引
                    // fileName:startTime+"_"+endTime,  //文件名称设置
                    // worksheetName: 'sheet1',  //表格工作区名称
                    // tableName: '总台帐报表',
                    //  excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
                    // onMsoNumberFormat: DoOnMsoNumberFormat
                },
                columns: [
                    {
                        title: '预警时间',
                        field: 'issueTime',
                        align: 'center',
                        valign: 'middle'

                    }
                    ,{
                        title: '发布单位',
                        field: 'pubUnit',
                        align: 'center',
                        valign: 'middle'

                    },{
                        title: '预警信号',
                        field: 'alarmSignal',
                        align: 'center',
                        valign: 'middle'
                    },{
                        title: '预警范围',
                        field: 'alarmRange',
                        align: 'center',
                        valign: 'middle'
                    },{
                        title: '预警内容',
                        field: 'content',
                        align: 'center',
                        valign: 'middle'
                    }
                ]
            });
            loadDay();
        });


    }
    init();
}

最后调用表格函数就行了

dayTableFactory()

最后就完成了。