bootstrap-table的使用(2)--bootstrap-table与servlet的配合使用,读取数据库内容并显示

实现表格与servlet的传值

为了实现bootstrap-table的表格中实现数据显示,归根结底就是将你想要显示的数据进行封装,分装成一个json数据包,包含"total"和"rows"两个参数的值的一个json数据包,然后传回表格,进行显示。

(1)修改bootstrapTable的设置

    <table id="reportTable" >
    <tbody id="show_tbody">
        </tbody> 
    </table>
    <script type="text/javascript">
        
	var state ="loadData";
	var StartSearch =null;
	var EndSearch =null;
	var mPage =1;
	//将bootstrap-table的过程放入一个函数中,方便初始化,毁灭,重建。
	var TableInit=function(){
	    var oTableInit = new Object();
	    oTableInit.Init=function(){
			$('#reportTable').bootstrapTable({
				method: 'get',
				url: "<c:url value='/IP_IndexServlet?act="+state+"&&other="+otherdata+"'/>", 
				//重点在这里,url后面写的就是你想要指向的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:1,
				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: 'operate',
	            	title: '操作',
	            	align: 'center',
	            	events: operateEvents,//给按钮注册事件
	            	formatter: operateFormatter
	            }],
			});
			//隐藏正在加载
			//$('#reportTable').bootstrapTable('hideLoading');
	    };
	    oTableInit.destroy=function(){
	        $("#reportTable").bootstrapTable('destroy');
	    }
	    return oTableInit;
	}
	var oTable = new TableInit();//新定义一个表格
	oTable.destroy();//如果之前存在,则先毁灭
	oTable.Init();//初始化表格

	</script>

(2)servlet中的写法

request.setCharacterEncoding("UTF-8");
String act=request.getParameter("act");
String other=request.getParameter("other");
IP_Dao ipd=new IP_Dao();//数据库的一个类,在此我写了一个查询功能
if(act.equals("loadData")) {
			response.setContentType("text/json; charset=utf-8");
			PrintWriter out = response.getWriter();
			JSONArray jsonarray = new JSONArray();  
			try {
			ipd.IP_CreateTable(mIP);
		} catch (SQLException e1) {
			// TODO 自动生成的 catch 块
			e1.printStackTrace();
		}

			//获取全部的IP信息
			Result result=ipd.SelectAll(mIP);

	        for(int i=0;i<result.getRowCount();i++) {
				Map rst=result.getRows()[i];
				JSONObject jsonobj = new JSONObject();
				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("责任人"));  
				jsonobj.put("用户名", rst.get("用户名"));
				jsonobj.put("密码", rst.get("密码"));  
				jsonobj.put("接入地点", rst.get("接入地点"));
				jsonobj.put("最后修改时间", rst.get("最后修改时间"));  
				jsonobj.put("是否分配", rst.get("是否分配"));
				jsonobj.put("备注", rst.get("备注"));  

				jsonarray.add(jsonobj);
			}
			int length = jsonarray.size();
			
			JSONObject jsonobj1 = new JSONObject();
			jsonobj1.put("total", length);
			jsonobj1.put("rows", jsonarray);
			out = response.getWriter();
			out.println(jsonobj1);
		}
发布了45 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/baidu_31788709/article/details/102690339