实现这个功能，就是在模态框弹出，修改内容并确定后，仍能够留在本页中，并实现表格内容的刷新。
实现这个功能，有几点需要实现：
1、模态框弹出，修改相应内容后，点击确定的值，模态框关闭时，记录下当前页码，赋值给mPage参数。
2、表格刷新后，跳至本页码，通过设置pageNumber参数，值为mPage,这样一个可变的参数。
3、模态框隐藏，即关闭后，模态框的内容清空。
模态框弹点击确认后，记录下当前页码，并刷新
模态框如下，请注意其中的changeData()函数的位置。
<!--添加bootstrap的模态框-->
<div class="export">
<div class="modal fade" id="mod_IP_Info">
<div class="modal-dialog modal-lg modal_position">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">修改 一条IP网络信息</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
//重点在于，form中的onsubmit的参数，运行函数changeData()。
<form id="IP_Index_Refresh" action="IP_IndexServlet?act=mod" method="post" onsubmit="return changeData();">
<div class="modal-body">
<table id="xztb" class="table">
<!--新修改弹窗的样式-->
<tbody>
<tr>
<td class="tb_bg"><label for="">序号</label>
</td>
<td><input name="userid" id="userid" readonly="readonly" type="text" placeholder="无需填写"/></td>
<td class="tb_bg"><label for="">类型</label>
</td>
<td><input name="LX" id="LX" type="text" placeholder="请输入类型"/></td>
</tr>
<tr>
<td class="tb_bg"><label for="">品牌</label>
</td>
<td><input name="PP" id="PP" type="text" placeholder="请输入品牌"/></td>
<td class="tb_bg"><label for="">操作系统</label></td>
<td><select name="CZXT" id="CZXT" class="form-control select_down" style="font-size: 13px; color: #666;width: 165px;margin-left: 75px">
<option value="Windows XP">Windows XP</option>
<option value="Windows 7">Windows 7</option>
<option value="Windows Server">Windows Server</option>
<option value="Linux">Linux</option>
<option value="无">无</option>
</select></td>
<!-- <td><input name="CZXT" id="CZXT" type="text" placeholder="请输入操作系统"/></td> -->
</tr>
<tr>
<td class="tb_bg"><label for="">IP地址</label>
</td>
<td><input name="mIP" id="mIP" type="text" readonly="readonly"/></td>
<td class="tb_bg"><label for="">MAC地址</label></td>
<td><input name="MACDZ" id="MACDZ" type="text" placeholder="请输入MAC地址"/></td>
</tr>
<tr>
<td class="tb_bg"><label for="">用户名</label>
</td>
<td><input name="YHM" id="YHM" type="text" placeholder="请输入用户名"/></td>
<td class="tb_bg"><label for="">密码</label></td>
<td><input name="MM" id="MM" type="text" placeholder="请输入密码"/></td>
</tr>
<tr>
<td class="tb_bg"><label for="">接入地点</label>
</td>
<td><input name="JRDD" id="JRDD" type="text" placeholder="请输入接入地点"/></td>
<td class="tb_bg"><label for="">最后修改时间</label></td>
<td><input name="ZHXGSJ" id="ZHXGSJ" type="text" readonly="readonly"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-secondary">修改</button>
</div>
</form>
</div>
</div>
</div>
</div>
然后是表格和changeData()函数的内容，注意bootstrap-table的初始化时，其pageNumber参数，值为mPage,这样一个可变的参数。
<table id="reportTable" >
<tbody id="show_tbody">
</tbody>
</table>
<script type="text/javascript">
var state ="loadData";
var mIP ="28.41.64.XX";
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+"&&mIP="+mIP+"&&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, //注意，这里是重点，这里的页码是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 : '用户名',
title : '用户名'
}, {
field : '密码',
title : '密码'
}, {
field : '接入地点',
title : '接入地点'
}, {
field : '最后修改时间',
title : '最后修改时间'
}, {
field : '是否分配',
title : '是否分配'
}, {
field : '备注',
title : '用途'
},{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,//给按钮注册事件
formatter: operateFormatter
}],
responseHandler: function (res) {
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 changeData(){
mPage=$("#reportTable").bootstrapTable("getOptions").pageNumber;
$('#IP_Index_Refresh').ajaxSubmit( {
success:function() {
$('#mod_IP_Info').modal('hide');//隐藏弹出框
var oTable = new TableInit();//重置表格
oTable.destroy();
oTable.Init();
}
});
return false;
}
</script>
清空弹出框的内容
这个时候弹出框只是隐藏而已，原本的一些内容不会清空，这样会影响再修改内容时，弹出框获取表格中的内容。因此需要清空。
//清除弹窗原数据
$("#mod_IP_Info").on("hidden.bs.modal", function() {
document.getElementById("IP_Index_Refresh").reset();
});
