自定义搜索功能
bootstrap-table是自带搜索功能的，但是搜索功能比较单一，如果我们有特殊的要求，那么需要自己写一个搜索功能，主要是应用于进行数据库查询，并将结果展示。
大致流程为：
1、利用bootstrap-table自带的url传值，传递参数到servlet。
2、在servlet中进行数据库查询，然后将数据库内容进行整理，整理成JSONArray和JSONObject的数据格式。
3、将格式封装成，“total"和"rows”,传递回表格。
下面以查询一个时间段内的数据为例子，进行介绍。
1、传参数
初始化定义几个参数，state，就是告诉servlet这次传值是为了实现什么功能，StartSearch是起始时间，EndSearch是结束时间，查询最后修改时间在这两个时间段内的数据。
定义一个bootstrap-table的函数，实现表格的初始化等功能，并且定义一个searchT()的函数，这是实现按钮的功能，点击按钮，则改变state的值为"search"，并且传参数至servlet，根据内容查询后重置表格。
var state ="loadData";
var StartSearch =null;
var EndSearch =null;
var mPage =1;
var TableInit=function(){
var oTableInit = new Object();
oTableInit.Init=function(){
$('#reportTable').bootstrapTable({
method: 'get',
url: "<c:url value='/IP_IndexServlet?act="+state+"&&start="+StartSearch+"&&end="+EndSearch+"'/>", //获取数据的Servlet地址
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
};
return param;
},
cache: false,
//height: 750,
striped: true,
pagination: true,
silent: true, //以静默方式刷新数据
toolbar:"#toolbar",
locale:"zh-US", //表格汉化
sidePagination: "client",
pageSize: 10,
pageNumber:mPage,
pageList: [10, 14,15, 16, 18,20],
search: true,
showColumns: true,
showRefresh: true,
showExport: true,
exportDataType: 'all',
clickToSelect: true,
exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
exportOptions:{
//ignoreColumn: [12,14], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: 'IP数据表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},
columns : [{
field : '序号',
title : '序号'
}, {
field : '类型',
title : '类型'
}, {
field : '品牌',
title : '品牌'
}, {
field : '操作系统',
title : '操作系统'
}, {
field : 'IP地址',
title : 'IP地址'
}, {
field : 'MAC地址',
title : 'MAC地址'
}, {
field : '最后修改时间',
title : '最后修改时间'
}, {
field : '备注',
title : '用途'
},{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,//给按钮注册事件
formatter: operateFormatter
}],
responseHandler: function (res) {
$("#calcul").html("<p>查询范围内共执行任务 "+res.mCount+" 次</p><p>总计 "+res.mTime+" 小时</p>");
return{ //return bootstrap-table能处理的数据格式
"total":res.total,
"rows":res.rows
}
},
});
//隐藏正在加载
//$('#reportTable').bootstrapTable('hideLoading');
};
oTableInit.destroy=function(){
$("#reportTable").bootstrapTable('destroy');
}
return oTableInit;
}
var oTable = new TableInit();
oTable.destroy();
oTable.Init();
//该函数实现参数的变化及表格的重置功能。
function SearchT() {
var start=document.SearchForm.start;
var end=document.SearchForm.end;
StartSearch=start.value;
EndSearch=end.value;
state="search";
var oTable = new TableInit();
oTable.destroy();
oTable.Init();
}
实现数据库查询并返回值
request.setCharacterEncoding("UTF-8");
String act=request.getParameter("act");//获知要执行什么动作
String Search_start=request.getParameter("start");
String Search_end=request.getParameter("end");
if(act.equals("search")) {//是查询动作
response.setContentType("text/json; charset=utf-8");
PrintWriter out = response.getWriter();
JSONArray jsonarray = new JSONArray(); //定义一个json数据的数据集
try {
ipd.IP_CreateTable(mIP);
} catch (SQLException e1) {
// TODO 自动生成的 catch 块
e1.printStackTrace();
}
//获取该时间段内的IP信息
Result result=ipd.findcontent(Search_start,Search_end,mIP);
for(int i=0;i<result.getRowCount();i++) {
Map rst=result.getRows()[i];
JSONObject jsonobj = new JSONObject();//新定义一个json格式的数据
jsonobj.put("序号", rst.get("序号"));
jsonobj.put("类型", rst.get("类型"));
jsonobj.put("品牌", rst.get("品牌"));
jsonobj.put("操作系统", rst.get("操作系统"));
jsonobj.put("IP地址", rst.get("IP地址"));
jsonobj.put("MAC地址", rst.get("MAC地址"));
jsonobj.put("最后修改时间", rst.get("最后修改时间"));
jsonobj.put("备注", rst.get("备注"));
jsonarray.add(jsonobj);
}
int length = jsonarray.size();
JSONObject jsonobj1 = new JSONObject();
//将数据集和数据长度，封装成一个固定格式的json数据包，即包含"total"，"rows"两个参数的内容，这两个参数必须包含，不然无法正常显示表格。
jsonobj1.put("total", length);
jsonobj1.put("rows", jsonarray);
out = response.getWriter();
out.println(jsonobj1);//显示在表格中
}
