bootstraptable+tableExport 简易导出功能+datetimepicker 日期时间函数

html

<button class="btn btn-info " onclick="tableExportInLBattery()" id="btn_export">导出</button>

<div class="col-sm-2 m-b-xs">
    <div class="date-container">
    <label>日期：</label>
        <i class="fa fa-calendar date-icon"></i>
        <input type="text" id="startData" style="height:32px;" class="form-horizontal date-input"/>
    </div>
</div>

<table id="inLibraryBatteryTab" data-mobile-responsive="true"
       class="table table-striped table-bordered table-hover dataTables-example">
</table>

JS代码

$(function () {
    $("#title").keydown(function (e) {
        if(e.keyCode == 13){
            $("#searchBut").trigger("click");
        }
    });
    //刷新
    $("#refresh").click(function () {
        $('#inLibraryBatteryTab').bootstrapTable('refresh');
    });
    //search
    $("#searchBut").click(function () {
        $('#inLibraryBatteryTab').bootstrapTable('filterBy', queryParams);
    });

    $('#inLibraryBatteryTab').bootstrapTable({
        url: '/cargo/inLibraryBattery/list',
        contentType: 'application/json',
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,              //隔行变色效果
        pagination: true,           //显示分页信息
        cache: false,
        pageSize: 10,               //每页显示数据
        pageNumber: 1,              //页码
        sidePagination: 'server',   //设置为服务器端分页
        queryParamsType: 'limit',
        uniqueId: 'id',
        queryParams: queryParams,
        columns: [
            {field: 'id', align: "center", title: '编号'},
            {field: 'gpsNo', align: "center", title: 'GPS编号'},
            {
                align: "center", title: "电池配置", formatter: function (value, row, index) {
                    var obj = "";
                    obj += '<p>型号：<span>' + row.specV + '</span>V&nbsp;-&nbsp;<span>' + row.specA + '</span>A</p>';
                    return obj;
                }
            },
            {field: 'quotaPrice', align: "center", title: '配额采购价', formatter: function (value,row,index) {
                    var rowV = value/100 + "￥";
                    return rowV;
                }},
            {field: 'status', align: "center", title: '状态', formatter: function (value) {
                    if (value == 1) {
                        return "新电池";
                    }else if (value == 2) {
                        return "售后电池";
                    }
                }},
            {field: 'productPime', align: "center", title: '生产日期'},
            {field: 'instName', align: "center", title: '所属机构名称'},
        ],
    });
    //动态加载电池配置下拉框值
    loadBatteryConfig();
});


//查询

function queryParams(params) {
    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
    var str = $("#model").val();
    var result=str.split(",");
    var specV=result[0];//电压
    var specA=result[1]; //电流
    var obj = {
        startData:$("#startData").val(),
        endData:$("#endData").val(),
        specV:specV,
        specA:specA,
        status:$("#status").val(),
        search: $("#title").val().replace(/\s+/g, ""),
        size: params.limit,              //页面大小
        page: params.offset / params.limit //页码
    }
    return obj;
}

//导出按钮
function tableExportInLBattery(){
　　//这里的是你table表的ID
    $('#inLibraryBatteryTab').tableExport(
        {
            type: 'excel',//导出excel
            escape: 'false' ,
            ignoreColumn: [0],  //忽略某一列的索引
            fileName: '数据导出',  //文件名称设置
            worksheetName: 'sheet1',  //表格工作区名称
            tableName: '在库电池',
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
        }
    )
}

//日期函数
//日期插件  开始
$("#startData").datetimepicker({
    format: 'yyyy-mm-dd',//显示格式
    language: 'zh-CN',//中文
    todayHighlight: 1,//今天高亮
    minView: "month",//设置只显示到月份
    todayBtn : true,  //在底部是否显示今天
    startView:2,
    forceParse: 0,
    showMeridian: 1,
    autoclose: 1//选择后自动关闭
}).on("changeDate",function(){
    var start = $("#startData").val();
    $("#endData").datetimepicker("setStartDate",start);
});

//日期插件  结束
$("#endData").datetimepicker({
    format: 'yyyy-mm-dd',//显示格式
    language: 'zh-CN', //中文
    todayHighlight: 1,//今天高亮
    minView: "month",//设置只显示到月份
    todayBtn : true,  //在底部是否显示今天
    startView:2,
    forceParse: 0,
    showMeridian: 1,
    autoclose: 1//选择后自动关闭
}).on("changeDate",function(){
    var end = $("#endData").val();
    $("#startData").datetimepicker("setEndDate",end);
});