BootStrap实现邮件列表的分页和模态框添加邮件的功能_javascript技巧

废话不多说具体代码如下所示：

package com.rc.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONObject;
import com.rc.dao.R_mailboxDAO;
import com.rc.daoimpl.R_mailboxDAOimpl;
import com.rc.dbutil.Sqltools;
import com.rc.entity.Mailbox;
import com.rc.entity.R_user;
import com.rc.entity.TreeNodes;
import com.rc.util.Page;
import com.rc.util.PageUtil;
public class MailBoxServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String action =request.getParameter("action");
HttpSession hs = request.getSession(false); //读取登录人员session
R_user cuser =(R_user)hs.getAttribute("user");
PrintWriter out = null;
R_mailboxDAO mb = new R_mailboxDAOimpl();
boolean b = true;
if("page".equals(action)){//查询所有
int pageNumber = 0;
String PageNumberstr = request.getParameter("pageNumber");//从页面获取的当前页
int count =mb.getcount();
if(PageNumberstr == null||"".equals(PageNumberstr)){
pageNumber= 1;
}else{
pageNumber = Integer.parseInt(PageNumberstr);//否则强转
}
List <Page> pages = new ArrayList<Page>();
Page page = PageUtil.createPage(5, count, pageNumber);
pages.add(page);
List<Mailbox> mailboxlist = mb.getcostList(page);
JSONObject obj = new JSONObject();//定义一个json对象
obj.put("mailbox", mailboxlist);
obj.put("Page", pages);
out = response.getWriter();
out.write(obj.toString());
}else if("delete".equals(action)){//删除操作
String mid = request.getParameter("id");
JSONObject obj = new JSONObject();
b =mb.delete(Integer.parseInt(mid));//用boolean接收
obj.put("biaozhi",b);
out = response.getWriter();
out.write(obj.toString());
}else if("edit".equals(action)){//弹出编辑页面
}else if("tedit".equals(action)){//提交编辑信息
}else if("pldelete".equals(action)){//批量删除
JSONObject obj = new JSONObject();
String deleteidlist = request.getParameter("deleteidlist");
String[] item = deleteidlist.split(",");
for (int i = 0; i < item.length; i++) {
b =mb.delete(Integer.parseInt(item[i]));
}
obj.put("biaozhi",b);
out = response.getWriter();
out.write(obj.toString());
}else if("tree".equals(action)){
List<TreeNodes> treelist = mb.getnodes();
JSONObject obj = new JSONObject();//定义一个json对象
obj.put("treelist", treelist);
out = response.getWriter();
out.write(obj.toString());
}else if("save".equals(action)){
String id = request.getParameter("id");
String zhuti = request.getParameter("zhuti");
String content = request.getParameter("content");
Mailbox mail = new Mailbox();
mail.setS_id(Integer.parseInt(id));//收件人
mail.setS_name(Sqltools.findusername(Integer.parseInt(id)));//收件人姓名
mail.setP_name(cuser.getUsername());//发件人姓名
mail.setP_id(cuser.getId());
mail.setContent(content);
mail.setTitle(zhuti);
b = mb.addmailbox(mail);
JSONObject obj = new JSONObject();
obj.put("biaozhi", b);
out = response.getWriter();
out.write(obj.toString());
}
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}

dao层

package com.rc.dao;
import java.util.List;
import com.rc.entity.Mailbox;
import com.rc.entity.TreeNodes;
import com.rc.util.Page;
public interface R_mailboxDAO {
public List<Mailbox> getcostList(Page page); //获取全部的邮件
public int getcount();//获取数目
public boolean delete(Integer id); //删除
public boolean add(Mailbox mail);//写信
public boolean update(Integer id);//修改
public List<TreeNodes> getnodes();//树
public boolean addmailbox(Mailbox mail);//添加邮件
}

daoimpl

<pre name="code" class="html">ackage com.rc.daoimpl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.rc.dao.R_mailboxDAO;
import com.rc.dbutil.Sqltools;
import com.rc.entity.Mailbox;
import com.rc.entity.TreeNodes;
import com.rc.util.Page;
import com.rc.util.StringUtil;
public class R_mailboxDAOimpl implements R_mailboxDAO {
boolean b=true;
Connection cnn = null;
PreparedStatement ps = null;
ResultSet rs= null;
Statement st = null;
String sql="";
@Override
public List<Mailbox> getcostList(Page page) {
List <Mailbox> mailboxlist = new ArrayList<Mailbox>();//定义一个数组
int startsize = page.getCurrentPage()*page.getEverPage();
int endsize = (page.getCurrentPage()-1)*page.getEverPage()+1;
sql = "select * from (select a1.*,rownum rn from (select * from mailbox order by m_id desc) a1 WHERE rownum<="+startsize+") where rn>="+endsize+"";
try{
rs =Sqltools.excuteQuery(sql, null);
while(rs.next()){
Mailbox mailbox = new Mailbox();
mailbox.setMid(rs.getInt("m_id"));
mailbox.setP_name(rs.getString("p_name"));
mailbox.setS_name(rs.getString("r_name"));
mailbox.setStatus(rs.getString("r_status"));
mailbox.setContent(rs.getString("r_content"));
mailbox.setTitle(rs.getString("r_title"));
mailbox.setR_time(StringUtil.TimetoString(rs.getDate("r_time")));
mailboxlist.add(mailbox);
}
}catch(Exception e){
Sqltools.close(rs, st, cnn);
}
return mailboxlist.size()==0 ? null:mailboxlist;
}
@Override
public int getcount() {
int count =0;
sql = "select count(*) from mailbox";
try{
cnn = Sqltools.getConnection();
ps = cnn.prepareStatement(sql);
rs = ps.executeQuery();
if(rs.next()){
count = rs.getInt(1);
}
}catch(Exception e){
e.printStackTrace();
}finally{
Sqltools.close(rs, ps, cnn);
}
return count;
}
@Override
public boolean delete(Integer id) {
sql="delete from mailbox where m_id=?";
try{
cnn=Sqltools.getConnection();
ps=cnn.prepareStatement(sql);
ps.setInt(1, id);
ps.executeUpdate();
}catch(Exception e){
b=false;
e.printStackTrace();
}finally{
Sqltools.aclose(rs, ps, cnn);
}
return b;
}
@Override
public boolean add(Mailbox mail) {
return false;
}
@Override
public boolean update(Integer id) {
return false;
}
@Override
public List<TreeNodes> getnodes() {//得到树节点
String sql = "select * from tree_table order by nid ";
cnn = Sqltools.getConnection();
ArrayList<TreeNodes> treelist = new ArrayList<TreeNodes>();
try {
ps = cnn.prepareStatement(sql);
rs =ps.executeQuery();
while (rs.next()){
TreeNodes node = new TreeNodes();
node.setNid(rs.getInt("nid"));
node.setParentId(rs.getInt("parentid"));
node.setNodeName(rs.getString("nodename"));
treelist.add(node);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
Sqltools.aclose(rs, ps, cnn);
}
return treelist;
}
@Override
public boolean addmailbox(Mailbox mail) {
sql = "insert into mailbox(m_id,p_name,r_name,p_id,r_id,r_content,r_title,r_send,r_status,r_time) values(mailbox_id_seq.nextval,?,?,?,?,?,?,?,?,sysdate)";
try{
cnn =Sqltools.getConnection();
ps = cnn.prepareStatement(sql);
ps.setString(1,mail.getP_name());
ps.setString(2,mail.getS_name());
ps.setInt(3,mail.getP_id());
ps.setInt(4,mail.getS_id());
ps.setString(5,mail.getContent());
ps.setString(6,mail.getTitle());
ps.setString(7,"0");//是否发送
ps.setString(8,"3");//是否读取
ps.executeUpdate();
}catch(Exception e){
b = false;
e.printStackTrace();
}finally{
Sqltools.aclose(rs, ps, cnn);
}
return b;
}
}

jsp页面

<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'mailbox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/sweetalert.css">
<link rel="stylesheet" type="text/css" href="/rccwgl/components/dtree/dtree.css">
</head>
<body>
<!-- tab导航列表 -->
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab" class="btn btn-primary">邮件列表</a></li>
<li><a href="#ios" data-toggle="tab" class="btn btn-success">未读邮件</a></li>
<li><a href="#gz" data-toggle="tab" class="btn btn-warning">已读邮件</a></li>
<li><a href="#cg" data-toggle="tab" class="btn btn-info">草稿列表</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle btn-danger" data-toggle="dropdown">功能开发中
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">开发一</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">开发二</a></li>
</ul>
</li>
</ul>
<!-- 邮件内容显示 -->
<div id="myTabContent" class="tab-content">
<!-- 邮件列表 -->
<div class="tab-pane fade in active" id="home">
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">-->
<div class="mainContent" >
<input id="pl" type="button" class="btn btn-info" style="margin-top:50px;" onclick="pl()" value="批量删除">
<button class="btn btn-primary btn-bg pull-right" style="margin-top:50px;" data-toggle="modal" data-target="#myModal" onclick="addmail()">写邮件</button>
<div class="row">
<div class="content">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan()" >全选</td>
<td>主题</td>
<td>发件人</td>
<td>邮件内容</td>
<td>接收时间</td>
<td>是否读取</td>
<td>操作</td>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<div id="pageinfo" style="height:200px;"></div>
</div>
</div>
</div>
<!--</form> -->
</div>
<!-- 未读邮件 -->
<div class="tab-pane fade" id="ios">
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">-->
<div class="mainContent" >
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;">
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;">
<div class="row">
<div class="content">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td>
<td>序号</td>
<td>发件人</td>
<td>邮件内容</td>
<td>接收时间</td>
<td>是否读取</td>
<td>编辑</td>
</tr>
</thead>
<tbody id="list1"></tbody>
</table>
<div id="pageinfo1" style="height:200px;"></div>
</div>
</div>
</div>
<!-- </form>-->
</div>
<!-- 已读邮件 -->
<div class="tab-pane fade" id="gz">
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">-->
<div class="mainContent" >
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;">
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;">
<div class="row">
<div class="content">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td>
<td>序号</td>
<td>发件人</td>
<td>邮件内容</td>
<td>接收时间</td>
<td>是否读取</td>
<td>编辑</td>
</tr>
</thead>
<tbody id="list2"></tbody>
</table>
<div id="pageinfo2" style="height:200px;"></div>
</div>
</div>
</div>
<!-- </form>-->
</div>
<div class="tab-pane fade" id="jmeter">
<div class="mainContent" >
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
<!-- 草稿列表 -->
<div class="tab-pane fade" id="cg">
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">-->
<div class="mainContent" >
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;">
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;">
<div class="row">
<div class="content">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td>
<td>序号</td>
<td>发件人</td>
<td>邮件内容</td>
<td>接收时间</td>
<td>是否读取</td>
<td>编辑</td>
</tr>
</thead>
<tbody id="list3"></tbody>
</table>
<div id="pageinfo3" style="height:200px;"></div>
</div>
</div>
</div>
<!-- </form>-->
</div>
<!-- -->
</div>
<!-- 写邮件的弹出框 -->
<div id="alls" style="">
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog" role="document" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">写邮件</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt_departmentname">主题</label>
<input type="text" name="txt_departmentname" class="form-control" id="zhuti" placeholder="部门名称">
</div>
<div class="form-group">
<div id="treediv" style="display:none;overflow:scroll; width: 150px;height:300px; padding: 5px;background: #fff;color: #fff;border: 1px solid #cccccc" >
<input type="text" name="txt_parentdepartment" class="form-control" id="menu_parent_name">
</div>
</div>
<div class="form-group">
<label for="txt_departmentname">收件人</label>
<input type="text" name="txt_departmentname" class="form-control" id="setvalue" placeholder="部门名称">
<input type="hidden" id="menu_parent" name="menu_parent"><!-- 父菜单id -->
</div>
<div class="form-group">
<label for="txt_statu">邮件内容</label>
<textarea rows="8" class="form-control" id="editor_id" name="content"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="send" data-dismiss="modal"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>发送</button>
<button type="button" class="btn btn-default" id="btn_close" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/rccwgl/js/jquery-3.1.0.min.js"></script>
<script src="/rccwgl/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="js/sweetalert.min.js"></script>
<script type="text/javascript" src="js/sweetalert-dev.js"></script>
<script src="/rccwgl/mailbox/js/mailbox.js"></script>
<script type="text/javascript" charset="utf-8" src="mailbox/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="mailbox/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/rccwgl/mailbox/js//kdreply.js"></script>
<SCRIPT type="text/javascript" src="/rccwgl/components/dtree/dtree.js"></SCRIPT>
</body>
</html>

js

<pre name="code" class="html">$(function(){//初始化页面
page1();
initTree();
shouwtree();
$('#treediv').mouseleave(function(){//在鼠标离开选择树的时候，选择书影藏
//alert("进来了");
$("#treediv").hide();
});
});
function Delete(mid){
swal({ title: "你确定要进行该操作?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "是的, 删除!",
cancelButtonText: "不, 取消",
closeOnConfirm: false,
closeOnCancel: false },
function(isConfirm){
if (isConfirm) {
var action = "delete";
$.ajax({
type : "post",
url : "MailBoxServlet",
datatype:'json',
data:{action:action,id:mid,a:Math.random()},
success : function(data){
var d= eval('('+data+')');
if(d.biaozhi==true){
swal("删除!", "删除成功", "success");
//window.location.reload();这种方式无法显示成功提示
$("#list").empty();
page1();
}else{
swal("Deleted!", "删除失败", "error");
}
}
});
}
else {
swal("", "你已经取消的该操作 ", "error");
}
});
}
function Edit(mid){
alert(mid);
}
function pl(){//批量删除
var checkedList = new Array();
var ids = "";
if($("input[name='deleteCusersid']:checked").length>0){
$("input[name='deleteCusersid']").each(function(){
if($(this).prop("checked")){//如果要未选中的 ==false 就可以了
//ids += $(this).val()+",";
checkedList.push($(this).val());
}
});
swal({ title: "你确定要删除这"+checkedList.length+"行?",
//text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "是的, 确定删除!",
cancelButtonText: "不, 取消",
closeOnConfirm: false,
closeOnCancel: false },
function(isConfirm){
if (isConfirm) {
var action = "pldelete";
$.ajax({
type : "post",
url : "MailBoxServlet",
datatype:'json',
data:{action:action,a:Math.random(),deleteidlist:checkedList.toString()},
success : function(data){
var d= eval('('+data+')');
if(d.biaozhi==true){
swal("删除!", "批量删除成功", "success");
$("input[name='deleteCusersid']").prop("checked",false);//将其他有对号的清除
$("input[name='qx']").prop("checked",false);//将全选的对号清除
$("#list").empty();
page1();
//window.location.reload();
}else{
swal("Deleted!", "删除失败", "error");
}
}
});
}
else {
swal("", "你已经取消的该操作 ", "error");
$("input[name='qx']").prop("checked",false);
$("input[name='deleteCusersid']").prop("checked",false);
}
});
}else{
swal("失败!", "你必须选择至少一行进行该操作!", "info");
}
}
function quanxuan(){//全选与全不选
if($("input[name='qx']").prop("checked")){
var checkbox = $("input[name='deleteCusersid']");
checkbox.prop("checked",true);
}else{
var checkbox = $("input[name='deleteCusersid']");
checkbox.prop("checked",false);
}
}
function addmail(){//写邮件
$("#btn_submit").click(function(){
var id = $("#menu_parent").val();
var zhuti = $("#zhuti").val();//获取主题
var content = $("#editor_id").val();//获取内容
if(zhuti==""||id==""){
if(zhuti==""){
swal("主题不能为空");
}else{
swal("收件人不能为空");
}
return false;
}else{
var action = "save";
$.ajax({
url: "MailBoxServlet",
data : 'json',
type : "post",
data :{action:action,id :id,content :content,zhuti :zhuti,a : Math.random()},
success : function(data){
if(data !=null){
var d= eval('('+data+')');
if(d.biaozhi){
swal("邮件编写成功");
}else{
swal("邮件编写失败");
}
}
$("#zhuti").val(""); //关闭的时候将所有的值制空
$("#setvalue").val("");
KindEditor.instances[0].html('');//专门的将textarea值置空0表示第一个KindEditor编辑器对象
$("#list").empty();//置空
page1();//异步刷新页面
}
});
}
//swal("关闭");
});
$("#btn_close").click(function(){
$("#zhuti").val(""); //关闭的时候将所有的值制空
$("#setvalue").val("");
KindEditor.instances[0].html('');//专门的将textarea值置空0表示第一个KindEditor编辑器对象
swal("关闭");
});
$("#send").click(function(){
swal("发送成功");
});
}
function initTree(){//初始化树
var action = "tree";
mydtree = new dTree('mydtree','${pageContext.request.contextPath}/style/default/images/dtree/','no','no');
mydtree.add(0,
-1,
"根目录",
"javascript:setvalue('0','根目录')",
"根目录",
"_self",
true);
$.ajax({
url: "MailBoxServlet",
data : 'json',
type : "post",
data :{action:action,a : Math.random()},
success : function(data){
if(data !=null){
$.each(eval("(" +data+ ")").treelist,function(index,item){
var id =item.nid;
var pid = item.parentId;
var nodesname = item.nodeName;
mydtree.add(id,pid,nodesname,"javascript:setvalue('"+id+"','"+nodesname+"')",nodesname,"_self",false);
});
//document.write(mydtree);
//将树添加到指定div（jQuery）
$("#treediv").html(mydtree.toString());
}
}
});
}
function shouwtree(){
$("#setvalue").click(function(){
$("#treediv").show();
});
}
function setvalue(id,name){
$("#setvalue").val(name);
$("#menu_parent").val(id);
$("#treediv").hide();
}
function page1(){
var pageNumber = 1;//默认初始页为第一页
var action = "page";//定义一个要进入的条件
$.ajax({//ajax请求
url: "MailBoxServlet",
data :'json',
type: "Post",
data:{action:action,pageNumber:pageNumber,a:Math.random()},//参数
success : function(data){//请求成功的方法
if(data !=null){
$.each(eval("(" + data + ")").mailbox, function (index, item) { //遍历返回的json
var html = "<tr><td><input type='checkbox' name='deleteCusersid' value='"+item.mid+"'/></td><td>" + item.title + "</td><td>" + item.p_name + "</td><td>" + item.content + "</td><td>" +item.r_time+ "</td><td>" +item.status+ "</td><td>";
m1 ="编辑";
m2="删除";
html2="<div class='btn-group'><button onclick='Edit("+item.mid+")' class='btn btn-info btn-sm' ><span class='glyphicon glyphicon-edit icon-white'></span> " +m1+"</button>"
+"<button onclick='Delete("+item.mid+")' class='btn btn-danger btn-sm' ><span class='glyphicon glyphicon-trash icon-white'></span> " +m2+"</button>"
+"</div></td></tr>";
html+= html2;
$("#list").append(html);
});
var pageCount = eval("(" + data + ")").Page[0].totalPage; //取到pageCount的值(把返回数据转成object类型)
var currentPage = eval("(" + data + ")").Page[0].currentPage; //得到urrentPage
var options = {
bootstrapMajorVersion: 2, //版本
currentPage: currentPage, //当前页数
totalPages: pageCount, //总页数
//numberOfPages:10,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked: function (event, originalEvent, type, page) {
$("#list").empty();
$.ajax({
url: "MailBoxServlet?pageNumber=" + page,
type: "Post",
data:{action:"page",a:Math.random()},
success: function (data1) {
if (data1 != null) {
$.each(eval("(" + data1 + ")").mailbox, function (index, item) { //遍历返回的json
var html = "<tr><td><input type='checkbox' name='deleteCusersid' value='"+item.mid+"'/></td><td>" + item.mid + "</td><td>" + item.p_name + "</td><td>" + item.content + "</td><td>" +item.r_time+ "</td><td>" +item.status+ "</td><td>";
m1 ="编辑";
m2="删除";
html2="<div class='btn-group'><button onclick='Edit("+item.mid+")' class='btn btn-info btn-sm' ><span class='glyphicon glyphicon-edit icon-white'></span> " +m1+"</button>"
+"<button onclick='Delete("+item.mid+")' class='btn btn-danger btn-sm' ><span class='glyphicon glyphicon-trash icon-white'></span> " +m2+"</button>"
+"</div></td></tr>";
html+= html2;
$("#list").append(html);
});
}
}
});
}
};
$('#pageinfo').bootstrapPaginator(options);
}
}
});
}

以上所述是小编给大家介绍的BootStrap实现邮件列表的分页和模态框添加邮件的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索bootstrap
模态框分页
bootstrap 模态框分页、bootstrap模态框i分页、bootstrap 模态框、bootstrap 关闭模态框、bootstrap模态框居中，以便于您获取更多的相关知识。