不理解請回復，基本每天在線！！！！
閱讀路線：1.jsp頁面:
2.js頁面:(重點看，有可能會：迷聞經累劫,悟則剎那間)
3.Controller:
4.自己做的開發類向前臺傳遞json數據工具類
jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BootStrap Table使用</title>
<!-- @*1、Jquery組件引用*@ -->
<script src="js/jquery.min.js"></script>
<!-- @*2、bootstrap組件引用*@ -->
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- @*3、bootstrap table組件以及中文包的引用*@ -->
<script src="bootstrap-table/bootstrap-table.js"></script>
<link href="bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- @*4、頁面Js文件的引用*@ -->
<script src="js/bootstrap-table-fang.js"></script>
</head>
<body>
<div class="panel-body" style="padding-bottom: 0px;">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal" method="post">
<div class="form-group" style="margin-top: 15px">
<label class="control-label col-sm-1"
for="txt_search_departmentname">部門名稱</label>
<div class="col-sm-3">
<input type="text" class="form-control"
id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">狀態</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align: left;">
<button type="button" style="margin-left: 50px" id="btn_query"
class="btn btn-primary">查詢</button>
</div>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>
<table id="tb_departments"></table>
</div></body>
</html>
js頁面
var str;$(function() {
// 1.初始化Table
var oTable = new TableInit();
oTable.Init();
// 2.初始化Button的點擊事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function() {
var oTableInit = new Object();
// 初始化Table
oTableInit.Init = function() {
$('#tb_departments').bootstrapTable({
url : '/BootstrapTest/UserServlet?flag=showtest', // 請求後臺的URL（*）連接一般是項目名加controller
method : 'post', // 請求方式（*）
toolbar : '#toolbar', // 工具按鈕用哪個容器
striped : true, // 是否顯示行間隔色
cache : false, // 是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
pagination : true, // 是否顯示分頁（*）
sortable : false, // 是否啓用排序
sortOrder : "asc", // 排序方式
queryParamsType:"undefined",
queryParams : oTableInit.queryParams,// 傳遞參數（*）
sidePagination : "server", // 分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber : 1, // 初始化加載第一頁，默認第一頁
pageSize : 10, // 每頁的記錄行數（*）
pageList : [ 10, 25, 50, 100 ], // 可供選擇的每頁的行數（*）
search : true, // 是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch : true,
showColumns : true, // 是否顯示所有的列
showRefresh : true, // 是否顯示刷新按鈕
minimumCountColumns : 2, // 最少允許的列數
clickToSelect : true, // 是否啓用點擊選中行
height : 500, // 行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId : "ID", // 每一行的唯一標識，一般爲主鍵列
showToggle : true, // 是否顯示詳細視圖和列表視圖的切換按鈕
cardView : false, // 是否顯示詳細視圖
detailView : false, // 是否顯示父子表
responseHandler:function (res) {
return{
//"total":res//總頁數
"rows":res,//數據
}
},
return{
//"total":res//總頁數
"rows":res,//數據
}
},
columns : [ {
checkbox : true
}, {
field : 'Name',
title : '部門名稱'
}, {
field : 'ParentName',
title : '上級部門'
}, {
field : 'Level',
title : '部門級別'
}, {
field : 'Desc',
title : '描述'
},
{
field:'goodsId',
title:'操作',
formatter:function(value,row,index){
var ret='<button class="btn btn-info" οnclick="handler.goodsBuy('+value+');">購買</button>';
return ret;
}
}]
});
};
// 得到查詢的參數
oTableInit.queryParams = function(params) {
var temp = { // 這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit : params.limit, // 頁面大小
offset : params.offset, // 頁碼
departmentname : $("#txt_search_departmentname").val(),
statu : $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function() {
var oInit = new Object();
var postdata = {};
oInit.Init = function() {
// 初始化頁面上面的按鈕事件
};
return oInit;
};
Controller頁面
package com.fang.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fang.dao.UserDAO;
import com.fang.daoImp.UserDAOImp;
import com.fang.entity.UserEntity;
import com.fang.util.AjaxRequestUntils;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserDAO dao=new UserDAOImp();
/**
* Default constructor.
*/
public UserServlet() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.先置統一字符串
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name=request.getParameter("username");
String pass=request.getParameter("password");
String flag=request.getParameter("flag");
if("login".equals(flag)){
int a=dao.login(name,pass);
if(a>0){
//把用戶名通過session傳遞出去
request.getSession().setAttribute("username", name);
request.getRequestDispatcher("bootstrap-table-fang.jsp").forward(request, response);
}else{
response.sendRedirect("Login.jsp");
}
}
if("off".equals(flag)){
request.getSession().removeAttribute("username");
request.getRequestDispatcher("Login.jsp").forward(request, response);
}if("showtest".equals(flag)){//展示數據
System.out.println("來到這裏了嗎?");
showRsb(request,response);
}
}
/**
* 新添加的方法
* @param limit
* @param offset
* @param departmentname
* @param statu
* @return
*/
public void showRsb(HttpServletRequest request,HttpServletResponse response)
{
List<Map<String, Object>> list=dao.showRsb();
AjaxRequestUntils.AjaxAndJsonArray(list, request, response);
}
}
貢獻一個自己開發的untils工具類
package com.fang.util;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
/**
* ajax異步請求
* @author fang
*
*/
public class AjaxRequestUntils {
/**
* ajax與json相互調用
*
* @param jsonArray
* @param request
* @param response
*/
public static void AjaxAndJsonArray(List list, HttpServletRequest request, HttpServletResponse response) {
JSONArray jsonArray = new JSONArray(list);// 轉換成JSon傳給jsp
try {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* AjaxAndJsonObject
*
* @param object
* @param request
* @param response
*/
public static void AjaxAndJsonObject(Object object, HttpServletRequest request, HttpServletResponse response) {
try {
response.setHeader("Access-Control-Allow-Origin", "*");
// 這是一種輸出流,
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(object);
} catch (IOException e) {
e.printStackTrace();
}
}
}