bootstrap table 获取数据与刷新

表格初始化

直接上代码：

$('#mytab').bootstrapTable({
    method: 'get',
    url: "Servlet",  //请求服务器数据，此处为服务器url
    //url: "data.json",  //请求本地数据
    striped: true, // 是否显示行间隔色
    pageNumber: 1, // 初始化加载第一页
    pagination: true, // 是否分页
    sidePagination: 'client', // server:服务器端分页|client：前端分页
    pageSize: 15, // 单页记录数
    //pageList: [5, 20, 30],  //可选每页记录数
    //showRefresh : true,// 刷新按钮
    silent: true,  //刷新时页面不会闪动，效果较好
    queryParams: function(params) { // 上传服务器的参数
        var temp = {
        };
        return temp;
    },
    columns: [  //列名  需要什么写什么
        {
            title: 'id',
            field: 'id',
            visible: false
        }, {
            title: '学科门类',
            field: 'field',
        }, {
            title: '科目',
            field: 'subject'
        }, {
            title: '教师',
            field: 'teacher'
        }, {
            title: '邮箱',
            field: 'email'
        }, {
            title: '已预约',
            field: 'had',
        }, {
            title: '总数',
            field: 'have',
        }, {
            title: '时间段',
            field: 'time',
        }, {
            title: '地址',
            field: 'address',
        }, {
            title: '操作',
            field: 'op',
            formatter: option  //自定义格式，可以添加按钮
        }
    ]
});

若自定义按钮，可以这么写：

function option(value, row, index) {  //option对应formatter
    return '<button type="button" οnclick="appoint(\''+index+'\')" class="btn btn-outline-dark">预约</button>'  //按钮响应为appoint函数
}

function appoint(index) {
    var data = $('#mytab').bootstrapTable('getData');
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var data = $('#mytab').bootstrapTable('getData');//获取表格数据
    var temail = data[index]['email'];  //获取表格某一列的值
    var subject = data[index]['subject'];
    var time = data[index]['time'];
    var teacher = data[index]['teacher'];
    var address = data[index]['address'];
    xmlhttp.open("POST","DailyServlet?p1="+email+"&p2="+temail+"&p3="+subject+"&p4="+time+"&p5="+teacher+"&p6="+address+"&op="+option,true);//传参 请求服务器
    xmlhttp.send();

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)//收到服务器返回
        {
            var mes = xmlhttp.responseText;//接收服务端传来的text数据
            //做你想做的事
        }
    };

表格刷新

function clock() {
    $.ajax({
        type: 'get',
        url : 'Servlet',
        data : {}, //json格式参数
        dataType : 'json',  //json格式返回
        silent: true,
        success : function(data){
            $('#mytab').bootstrapTable("refresh", data); //刷新
        },
        error:function(data){
            //alert("error");
        }
    })
}

如果想要隔一个时间段刷新一次，你可以：

var int=self.setInterval("tclock()",1000);//1000为1s

完