jsp页面 列表 展示 ajax异步实现方法
1. 服务端先返回页面基本结构（如message.jsp），
<%@ page language=\"java\" contentType=\"text/html; charset=utf-8\"
pageEncoding=\"utf-8\"%>
<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\" %>
<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + \"://\" + request.getServerName() + \":\" + request.getServerPort()
+ path + \"/\";
%>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class=\"ie ie6 lt-ie9 lt-ie8 lt-ie7\" lang=\"en\"> <![endif]-->
<!--[if IE 7]> <html class=\"ie ie7 lt-ie9 lt-ie8\" lang=\"en\"> <![endif]-->
<!--[if IE 8]> <html class=\"ie ie8 lt-ie9\" lang=\"en\"> <![endif]-->
<!--[if IE 9]> <html class=\"ie ie9\" lang=\"en\"> <![endif]-->
<!--[if !IE]><!-->
<html lang=\"en\" class=\"no-ie\">
<!--<![endif]-->
<head>
<!-- Meta-->
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\">
<meta name=\"description\" content=\"\">
<meta name=\"keywords\" content=\"\">
<meta name=\"author\" content=\"\">
<title>消息中心</title>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src=\"https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js\"></script><script src=\"https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js\"></script><![endif]-->
<!-- Bootstrap CSS-->
<link rel=\"stylesheet\" href=\"<%=path %>/app/css/bootstrap.css\">
<!-- Vendor CSS-->
<link rel=\"stylesheet\" href=\"<%=path %>/vendor/fontawesome/css/font-awesome.min.css\">
<link rel=\"stylesheet\" href=\"<%=path %>/vendor/animo/animate+animo.css\">
<!-- START Page Custom CSS-->
<!-- Data Table styles-->
<link rel=\"stylesheet\" href=\"<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css\">
<link rel=\"stylesheet\" href=\"<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css\">
<!-- END Page Custom CSS-->
<!-- App CSS-->
<link rel=\"stylesheet\" href=\"<%=path %>/app/css/app.css\">
<link rel=\"stylesheet\" href=\"<%=path %>/app/css/beadmin-theme-c2.css\">
<link rel=\"stylesheet\" href=\"<%=path %>/vendor/sweetalert/lib/sweet-alert.css\" />
<link rel=\"stylesheet\" href=\"<%=path %>/css/page.css\"/>
<!-- Modernizr JS Script-->
<script src=\"<%=path %>/vendor/modernizr/modernizr.js\" type=\"application/javascript\"></script>
<!-- FastClick for mobiles-->
<script src=\"<%=path %>/vendor/fastclick/fastclick.js\" type=\"application/javascript\"></script>.
<script>
var basePath = \'<%=basePath %>\';
var pageNo = ${page.pageNo};
var totalCount = ${page.totalCount};
var totalPage = ${page>totalPage};
var pageSize = ${page.pageSize};
</script>
</head>
<body>
<!-- START Main wrapper-->
<div class=\"wrapper\" >
<!-- START Main section-->
<section>
<!-- START Page content-->
<div class=\"content-wrapper\" style=\"margin-left:-250px;margin-top:-40px;\">
<h3>消息中心
<!-- <div style=\"float:right; margin-top:5px;\" class=\"form-group\">
<button type=\"button\" onclick=\"$(\'#myModal\').modal({backdrop: \'static\', keyboard: false});;\" class=\"btn btn-labeled btn-success\"> <span class=\"btn-label\"><i class=\"fa fa-plus\"></i> </span>添加</button>
</div>-->
<small>消息管理</small>
</h3>
<!-- START panel-->
<!-- START DATATABLE 3-->
<div class=\"row\">
<div class=\"col-lg-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\" style=\"border-bottom:1px solid #eee;\">
<form class=\"form-inline\" id=\"searchForm\" method=\"post\" action=\"<%=path %>/page/messageSearch.action\">
<div class=\"form-group\"> <b>创建时间: </b>
<div class=\"datetimepicker input-group date mb-lg\" data-pick-time=\"false\">
<input type=\"text\" class=\"form-control\" id=\"searchDateStart\" name=\"searchDateStart\" value=\'\' disabled=\"disabled\">
<span class=\"input-group-addon\"> <span class=\"fa-calendar fa\"></span> </span> </div>
<span style=\"margin-top:-8px;\">—</span>
<div class=\"datetimepicker input-group date mb-lg\" data-pick-time=\"false\">
<input type=\"text\" class=\"form-control\" id=\"searchDateEnd\" name=\"searchDateEnd\" value=\'\' disabled=\"disabled\">
<span class=\"input-group-addon\"> <span class=\"fa-calendar fa\"></span> </span> </div>
</div>
<div class=\"form-group\">
<b>接收者: </b>
<input type=\"text\" class=\"form-control mb-lg\" id=\"receiver\" name=\"receiver\" value=\'\'>
</div>
<div class=\"form-group\"> <a style=\"margin:-10px 0 0 5px; float:left;\" href=\"javascript:void(0);\" class=\"mb-sm btn btn-primary\" type=\"button\" id=\"searchMessage\">搜索</a> </div>
<input type=\"hidden\" id=\"pageNo\" name=\"pageNo\" value=\'\'>
</form>
</div>
<div class=\"table-responsive\">
<table class=\"table table-bordered table-hover dataTable no-footer\" id=\"table-ext-1\" >
<thead>
<tr>
<th style=\"width:300px;\">描述</th>
<th class=\"sorting center\" tabindex=\"0\" aria-controls=\"datatable1\" rowspan=\"1\" colspan=\"1\" style=\"width: 86px;\" aria-label=\"Rendering engine: activate to sort column ascending\">发送者</th>
<th class=\"sorting center\" tabindex=\"0\" aria-controls=\"datatable1\" rowspan=\"1\" colspan=\"1\" style=\"width: 86px;\" aria-label=\"Rendering engine: activate to sort column ascending\">接收者</th>
<th class=\"sorting center\" tabindex=\"0\" aria-controls=\"datatable1\" rowspan=\"1\" colspan=\"1\" style=\"width: 86px;\" aria-label=\"Rendering engine: activate to sort column ascending\">创建时间</th>
<th class=\"th150 center\">操作</th>
</tr>
</thead>
<tbody id=\"message_body\">
</tbody>
<tfoot>
<tr> </tr>
</tfoot>
</table>
</div>
<div class=\"panel-footer\">
<div class=\"row\">
<div style=\"line-height:35px;\" class=\"col-lg-3\">
<div class=\"input-group pull-left\" id=\"message_showLines\"> </div>
</div>
<div class=\"col-lg-9\"></div>
<div class=\"tcdPageCode\"></div>
</div>
</div>
</div>
</div>
</div>
<!-- END DATATABLE 3-->
</div>
<!-- END Page content-->
</section>
<!-- END Main section-->
</div>
<!-- END Main wrapper-->
<!-- START modal-->
<div id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" class=\"modal\" >
<div class=\"modal-dialog\" style=\"width:600px;\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\" class=\"close\">×</button>
<h4 id=\"myModalLabel\" class=\"modal-title\">新建应用</h4>
</div>
<div class=\"modal-body\" style=\"padding-right:20px;\">
<form method=\"get\" action=\"/\" class=\"form-horizontal\">
<fieldset>
<div class=\"form-group\" style=\"padding-bottom:5px;\">
<label class=\"col-sm-2 control-label\">名称</label>
<div class=\"col-sm-10\">
<input type=\"text\" class=\"form-control\">
</div>
</div>
<div class=\"form-group\" style=\"margin-top:10px;\">
<label class=\"col-sm-2 control-label\">描述</label>
<div class=\"col-sm-10\">
<input type=\"text\" class=\"form-control\">
</div>
</div>
<div class=\"form-group\" style=\"margin-top:10px;\">
<label class=\"col-sm-2 control-label\">URL</label>
<div class=\"col-sm-10\">
<input type=\"text\" class=\"form-control\">
</div>
</div>
<div class=\"form-group\" style=\"margin-top:5px;\">
<label class=\"col-sm-2 control-label\">类别</label>
<div class=\"col-sm-10\">
<select class=\"form-control m-b\" name=\"account\">
<option>Web</option>
<option>Mobile</option>
</select></div>
</div>
<div class=\"form-group\" style=\"margin-top:5px;\">
<label class=\"col-sm-2 control-label\">授权模式</label>
<div class=\"col-sm-10\">
<select class=\"form-control m-b\" name=\"account\">
<option>授权</option>
<option>不授权</option>
</select></div>
</div>
<div class=\"form-group\" style=\"margin-top:10px;\">
<label class=\"col-sm-2 control-label\">LOGO</label>
<div class=\"col-sm-10\">
<input type=\"button\" class=\"form-control\">
</div>
</div>
</fieldset>
</form>
</div>
</fieldset>
<div class=\"modal-footer\">
<button type=\"button\" data-dismiss=\"modal\" class=\"btn btn-default\">取消</button>
<button type=\"button\" class=\"btn btn-primary\">确定</button>
</div>
</div>
</div>
</div>
</div>
<div id=\"myModal2\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" class=\"modal\">
<div class=\"modal-dialog\" style=\"width:650px;\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\" class=\"close\">×</button>
<h4 id=\"myModalLabel\" class=\"modal-title\">修改密码</h4>
</div>
<div class=\"modal-body\">
<form method=\"get\" action=\"/\" class=\"form-horizontal\">
<fieldset>
<div class=\"form-group\" style=\"padding-bottom:5px;\">
<label class=\"col-sm-2 control-label\">原密码</label>
<div class=\"col-sm-10\">
<input type=\"text\" class=\"form-control\">
</div>
</div>
<div class=\"form-group\" style=\"padding-bottom:5px;\">
<label class=\"col-sm-2 control-label\">新密码</label>
<div class=\"col-sm-10\">
<input type=\"password\" name=\"password\" class=\"form-control\">
</div>
</div>
<div class=\"form-group\" style=\"padding-bottom:5px;\">
<label class=\"col-sm-2 control-label\">确认密码</label>
<div class=\"col-sm-10\">
<input type=\"password\" name=\"password\" class=\"form-control\">
</div>
</div>
</fieldset>
</form>
</div>
<div class=\"modal-footer\">
<button type=\"button\" data-dismiss=\"modal\" class=\"btn btn-default\">关闭</button>
<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
</div>
</div>
</div>
</div>
<div id=\"myModal3\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" class=\"modal\">
<div class=\"modal-dialog\" style=\"width:600px;\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\" class=\"close\">×</button>
<h4 id=\"myModalLabel\" class=\"modal-title\">编辑节目特殊单</h4>
</div>
<div class=\"modal-body\">
<form method=\"get\" action=\"/\" class=\"form-horizontal\">
<fieldset>
<div class=\"form-group\" style=\"padding-bottom:5px;\">
<label class=\"col-sm-2 control-label\">表单标题</label>
<div class=\"col-sm-10\">
<input type=\"text\" class=\"form-control\">
</div>
</div>
</fieldset>
</form>
</div>
<div class=\"modal-footer\">
<button type=\"button\" data-dismiss=\"modal\" class=\"btn btn-default\">关闭</button>
<button type=\"button\" class=\"btn btn-primary\">确定</button>
</div>
</div>
</div>
</div>
<!-- END modal -->
<form method=\"post\" id=\"pageForm\" name=\"pageForm\"
action=\"<%=path%>/page/message_search.action\">
<input type=\"hidden\" id=\"pageNo\" name=\"pageNo\" value=\"\" />
</form>
<!-- START Scripts-->
<!-- Main vendor Scripts-->
<script src=\"<%=path %>/vendor/jquery/jquery.min.js\"></script>
<script src=\"<%=path %>/vendor/bootstrap/js/bootstrap.min.js\"></script>
<!-- Plugins-->
<script src=\"<%=path %>/vendor/chosen/chosen.jquery.min.js\"></script>
<script src=\"<%=path %>/vendor/slider/js/bootstrap-slider.js\"></script>
<script src=\"<%=path %>/vendor/filestyle/bootstrap-filestyle.min.js\"></script>
<!-- Animo-->
<script src=\"<%=path %>/vendor/animo/animo.min.js\"></script>
<!-- Sparklines-->
<script src=\"<%=path %>/vendor/sparklines/jquery.sparkline.min.js\"></script>
<!-- MomentJs and Datepicker-->
<script src=\"<%=path %>/vendor/moment/min/moment-with-langs.js\"></script>
<script src=\"<%=path %>/vendor/datetimepicker/js/bootstrap-datetimepicker.min.js\"></script>
<!-- Slimscroll-->
<script src=\"<%=path %>/vendor/slimscroll/jquery.slimscroll.min.js\"></script>
<!-- Store + JSON-->
<script src=\"<%=path %>/vendor/store/store+json2.min.js\"></script>
<!-- ScreenFull-->
<script src=\"<%=path %>/vendor/screenfull/screenfull.min.js\"></script>
<!-- START Page Custom Script-->
<!-- Data Table Scripts-->
<script src=\"<%=path %>/vendor/datatable/media/js/jquery.dataTables.min.js\"></script>
<script src=\"<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js\"></script>
<script src=\"<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js\"></script>
<script src=\"<%=path %>/vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js\"></script>
<!-- START Page Custom Script-->
<script src=\"<%=path %>/vendor/wizard/js/bwizard.min.js\"></script>
<!-- Form Validation-->
<script src=\"<%=path %>/vendor/parsley/parsley.min.js\"></script>
<!-- END Page Custom Script-->
<!-- App Main-->
<script src=\"<%=path %>/app/js/app.js\"></script>
<script src=\"<%=path %>/vendor/sweetalert/lib/sweet-alert.min.js\"></script>
<script src=\"<%=path %>/script/message.js\"></script>
<script src=\"<%=path %>/page/js/page.js\"></script>
<!-- END Scripts-->
</body>
</html>
2. example.js加载的时候，再去异步请求获取页面数据（表格、分页等），再动态创建表，分页链接等
$(function(){
initTable();
$(\"#searchMessage\").on(\"click\",function(){
messageSearch(pageNo);
});
//获取message列表 \"pageNo\" : pageNo
function initTable(){
$.ajax({
url : basePath + \"page/message_list.action\",
type : \"get\",
dataType : \"json\",
success : function(dataMap){
createTBody(dataMap);
createTFoot(dataMap);
},
error : function(errorData){
}
});
}
//查询message
function messageSearch(pageNo){
var searchDateStart = $(\"#searchDateStart\").val();
var searchDateEnd = $(\"#searchDateEnd\").val();
var startDate = new Date(searchDateStart);
var endDate = new Date(searchDateEnd);
var num = endDate - startDate;
if(num<0){
$(\"#searchDateEnd\").val(\'\');
swal({
title: \"结束日期不能晚于开始日期\",
text: \"\",
type: \"error\"
});
return false;
}
var receiver = $(\"#receiver\").val();
$.ajax({
url : basePath + \"page/message_search.action\",
type : \"POST\",
data : {
\"pageNo\" : pageNo,
\"searchDateStart\" : searchDateStart,
\"searchDateEnd\" : searchDateEnd,
\"receiver\" : receiver
},
dataType : \"json\",
success : function(dataMap){
createTBody(dataMap);
createTFoot(dataMap);
},
error : function(errorData){
}
});
}
function createTBody(dataMap){
if(dataMap!=null){
var messageListPage = dataMap.messageListPage;
var html = [];
for(var i=0; i<messageListPage.length; i++){
var message = messageListPage[i];
var cTime = message.createtime.replace(/T/g,\" \");
html.push(\'<tr class=\"gradeX center\">\');
html.push(\'<td style=\"text-align:left;\">\'+message.content+\'</td>\');
html.push(\'<td>\' + message.provider + \'</td>\');
html.push(\'<td>\' + message.receiver + \'</td>\');
html.push(\'<td>\' + cTime + \'</td>\');
html.push(\'<td message_id=\' + message.id + \'><a href=\"#\" class=\"message_del btn btn-danger btn-xs\"> 删除 </a></td>\');
html.push(\'</tr>\');
}
$(\"#message_body\").empty().html(html.join(\'\'));
}
}
function createTFoot(dataMap){
if(dataMap!=null){
startNum = dataMap.startNum;
stopNum = dataMap.stopNum;
totalCount = dataMap.totalCount;
pageNo = dataMap.pageNo;
pageSize = dataMap.pageSize;
var str = \'显示 \' + startNum + \'至\' + stopNum + \'项 ， 共\' + totalCount +\' 项。\';
$(\"#message_showLines\").html(str);
}
}
$(\'#message_body\').on(\'click\',\'a.message_del\',function(){
var message_id = $(this).parent(\"td\").attr(\"message_id\");
swal({
title : \"确认要删除吗?\",
text : \"删除后将不能恢复!\",
type : \"warning\",
showCancelButton : true,
confirmButtonColor : \"#DD6B55\",
confirmButtonText : \"Yes, delete it!\",
cancelButtonText : \"No, cancel plx!\",
closeOnConfirm : false,
closeOnCancel : false
}, function(isConfirm) {
if (isConfirm) {
$.ajax({
url:basePath + \"page/message_del.action\",
data:{
\"id\":message_id
},
type:\"get\",
dataType:\"json\",
success:function(dataMap){
if(dataMap!=null && dataMap.message==\"success\"){
swal(\"删除!\",
\"已经成功删除.\",
\"success\");
initTable();
}else{
swal(\"删除!\",
\"删除失败.\",
\"error\");
}
},
error : function(errorMsg){
swal(\"删除失败!\",
errorMsg,
\"error\");
}
});
} else {
swal(\"Cancelled\", \"Your imaginary file is safe :)\",
\"error\");
}
});
});
$(\'.tcdPageCode\').extendPagination({
pageId : pageNo,
totalCount : totalCount,
showPage : 5,
limit : pageSize,
callback : function(pageNo, limit, totalCount) {
messageSearch(pageNo);
}
});
});
注意： 表格是动态创建的，其中的按钮绑定事件时，一定要先找到它的父节点（或祖先节点），再到指定节点，绑定事件
如上面的 $(\"#serviceRepo_body\").on(\'click\',\'a.record_view\',function(){});
分页js插件（page.js）, 同时引入jquery-1.11.1.min.js 和 bootstrap.js
/**
* Created by Hope on 2014/12/28.
*/
(function ($) {
$.fn.extendPagination = function (options) {
var defaults = {
pageId:\'\',
totalCount: \'\',
showPage: \'10\',
limit: \'5\',
callback: function () {
return false;
}
};
$.extend(defaults, options || {});
// alert(defaults.pageId);
if (defaults.totalCount == \'\') {
//alert(\'总数不能为空!\');
$(this).empty();
return false;
} else if (Number(defaults.totalCount) <= 0) {
//alert(\'总数要大于0!\');
$(this).empty();
return false;
}
if (defaults.showPage == \'\') {
defaults.showPage = \'10\';
} else if (Number(defaults.showPage) <= 0)defaults.showPage = \'10\';
if (defaults.limit == \'\') {
defaults.limit = \'5\';
} else if (Number(defaults.limit) <= 0)defaults.limit = \'5\';
var totalCount = Number(defaults.totalCount), showPage = Number(defaults.showPage),
limit = Number(defaults.limit), totalPage = Math.ceil(totalCount / limit);
if (totalPage > 0) {
var html = [];
html.push(\' <ul class=\"pagination\">\');
html.push(\' <li class=\"previous\"><a href=\"#\">«</a></li>\');
html.push(\'<li class=\"disabled hidden\"><a href=\"#\">...</a></li>\');
if (totalPage <= showPage) {
for (var i = 1; i <= totalPage; i++) {
if (i == defaults.pageId) html.push(\' <li class=\"active\"><a href=\"#\">\' + i + \'</a></li>\');
else html.push(\' <li><a href=\"#\">\' + i + \'</a></li>\');
}
} else {
for (var j = 1; j <= showPage; j++) {
if (j == defaults.pageId) html.push(\' <li class=\"active\"><a href=\"#\">\' + j + \'</a></li>\');
else html.push(\' <li><a href=\"#\">\' + j + \'</a></li>\');
}
}
html.push(\'<li class=\"disabled hidden\"><a href=\"#\">...</a></li>\');
html.push(\'<li class=\"next\"><a href=\"#\">»</a></li></ul>\');
$(this).html(html.join(\'\'));
if (totalPage > showPage) $(this).find(\'ul.pagination li.next\').prev().removeClass(\'hidden\');
var pageObj = $(this).find(\'ul.pagination\'), preObj = pageObj.find(\'li.previous\'),
currentObj = pageObj.find(\'li\').not(\'.previous,.disabled,.next\'),
nextObj = pageObj.find(\'li.next\');
function loopPageElement(minPage, maxPage) {
var tempObj = preObj.next();
for (var i = minPage; i <= maxPage; i++) {
if (minPage == 1 && (preObj.next().attr(\'class\').indexOf(\'hidden\')) < 0)
preObj.next().addClass(\'hidden\');
else if (minPage > 1 && (preObj.next().attr(\'class\').indexOf(\'hidden\')) > 0)
preObj.next().removeClass(\'hidden\');
if (maxPage == totalPage && (nextObj.prev().attr(\'class\').indexOf(\'hidden\')) < 0)
nextObj.prev().addClass(\'hidden\');
else if (maxPage < totalPage && (nextObj.prev().attr(\'class\').indexOf(\'hidden\')) > 0)
nextObj.prev().removeClass(\'hidden\');
var obj = tempObj.next().find(\'a\');
if (!isNaN(obj.html()))obj.html(i);
tempObj = tempObj.next();
}
}
function callBack(curr) {
defaults.callback(curr, defaults.limit, totalCount);
}
currentObj.click(function (event) {
event.preventDefault();
var currPage = Number($(this).find(\'a\').html()), activeObj = pageObj.find(\'li[class=\"active\"]\'),
activePage = Number(activeObj.find(\'a\').html());
if (currPage == activePage) return false;
if (totalPage > showPage) {
var maxPage = currPage, minPage = 1;
if (($(this).prev().attr(\'class\'))
&& ($(this).prev().attr(\'class\').indexOf(\'disabled\')) >= 0) {
minPage = currPage - 1;
maxPage = minPage + showPage - 1;
loopPageElement(minPage, maxPage);
} else if (($(this).next().attr(\'class\'))
&& ($(this).next().attr(\'class\').indexOf(\'disabled\')) >= 0) {
if (totalPage - currPage >= 1) maxPage = currPage + 1;
else maxPage = totalPage;
if (maxPage - showPage > 0) minPage = (maxPage - showPage) + 1;
loopPageElement(minPage, maxPage)
}
}
activeObj.removeClass(\'active\');
$.each(currentObj, function (index, thiz) {
if ($(thiz).find(\'a\').html() == currPage) {
$(thiz).addClass(\'active\');
callBack(currPage);
}
});
});
preObj.click(function (event) {
event.preventDefault();
var activeObj = pageObj.find(\'li[class=\"active\"]\'), activePage = Number(activeObj.find(\'a\').html());
if (activePage <= 1) return false;
if (totalPage > showPage) {
var maxPage = activePage, minPage = 1;
if ((activeObj.prev().prev().attr(\'class\'))
&& (activeObj.prev().prev().attr(\'class\').indexOf(\'disabled\')) >= 0) {
minPage = activePage - 1;
if (minPage > 1) minPage = minPage - 1;
maxPage = minPage + showPage - 1;
loopPageElement(minPage, maxPage);
}
}
$.each(currentObj, function (index, thiz) {
if ($(thiz).find(\'a\').html() == (activePage - 1)) {
activeObj.removeClass(\'active\');
$(thiz).addClass(\'active\');
callBack(activePage - 1);
}
});
});
nextObj.click(function (event) {
event.preventDefault();
var activeObj = pageObj.find(\'li[class=\"active\"]\'), activePage = Number(activeObj.find(\'a\').html());
if (activePage >= totalPage) return false;
if (totalPage > showPage) {
var maxPage = activePage, minPage = 1;
// if ((activeObj.next().next().attr(\'class\'))
// && (activeObj.next().next().attr(\'class\').indexOf(\'disabled\')) >= 0) {
// maxPage = activePage + 2;
// if (maxPage > totalPage) maxPage = totalPage;
// minPage = maxPage - showPage + 1;
// loopPageElement(minPage, maxPage);
// }
if ((activeObj.next().next().attr(\'class\'))
&& (activeObj.next().next().attr(\'class\').indexOf(\'disabled\')) >= 0) {
maxPage = activePage + 2;
if (maxPage > totalPage) maxPage = totalPage;
minPage = maxPage - showPage + 1;
loopPageElement(minPage, maxPage);
}
}
$.each(currentObj, function (index, thiz) {
if ($(thiz).find(\'a\').html() == (activePage + 1)) {
activeObj.removeClass(\'active\');
$(thiz).addClass(\'active\');
callBack(activePage + 1);
}
});
});
}
};
})(jQuery);
3.项目采用struts2， 返回json, 在struts中配置， 并在action中使用map来封装数据， 并添加get方法
struts.xml
<package name=\"message\" namespace=\"/\" extends=\"struts-default, json-default\">
<action name=\"message_*\" class=\"messageAction\" method=\"{1}\">
<result name=\"index\">/WEB-INF/jsp/message.jsp</result>
<result name=\"success\" type=\"json\">
<param name=\"root\">dataMap</param>
</result>
</action>
</package>
action
package com.cdv.mediastar.action;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.json.annotations.JSON;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.cdv.mediastar.model.Message;
import com.cdv.mediastar.service.MessageService;
import com.cdv.mediastar.util.PageParameter;
import com.opensymphony.xwork2.ActionSupport;
@Scope(\"request\")
@Controller(\"messageAction\")
public class MessageAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 3731009117710718470L;
private Logger logger = Logger.getLogger(MessageAction.class);
@Resource
private MessageService messageService;
Map<String, Object> dataMap = new HashMap<String, Object>();
public Map<String, Object> getDataMap() {
return dataMap;
}
public String index(){
HttpServletRequest request = ServletActionContext.getRequest();
PageParameter page = new PageParameter();
int pageNo = page.getPageNo();
int totalCount = messageService.count(null, null, null, 0);
int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
int startNum = 1, stopNum = 1;
startNum = (pageNo-1)*page.getPageSize()+1;
if((startNum+page.getPageSize()-1)<=totalCount){
stopNum = startNum+page.getPageSize()-1;
}else{
stopNum = totalCount;
}
page.setTotalCount(totalCount);
page.setTotalPage(totalPage);
request.setAttribute(\"page\", page);
request.setAttribute(\"startNum\", startNum);
request.setAttribute(\"stopNum\", stopNum);
return \"index\";
}
public String list(){
dataMap.clear();
PageParameter page = new PageParameter();
int s = 0, max = page.getPageSize();
List<Message> messageListPage = messageService.find(null, null, null, s, max);
int totalCount = messageService.count(null, null, null, 0);
int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
page.setTotalCount(totalCount);
page.setTotalPage(totalPage);
int startNum = 0, stopNum = 0;
startNum = 1;
if((startNum+page.getPageSize()-1)<=totalCount){
stopNum = startNum+page.getPageSize()-1;
}else{
stopNum = totalCount;
}
dataMap.put(\"startNum\", startNum);
dataMap.put(\"stopNum\", stopNum);
dataMap.put(\"totalCount\", totalCount);
dataMap.put(\"totalPage\", totalPage);
dataMap.put(\"pageNo\", page.getPageNo());
dataMap.put(\"messageListPage\", messageListPage);
return \"success\";
}
public String del(){
dataMap.clear();
HttpServletRequest request = ServletActionContext.getRequest();
Long id = Long.parseLong(request.getParameter(\"id\"));
int deleteFlag = messageService.delete(id);
if(deleteFlag>0){
dataMap.put(\"message\", \"success\");
}else{
dataMap.put(\"message\", \"error\");
}
logger.info(\"rocky>>>>>>>>>>>>delete message flag======\"+deleteFlag);
return \"success\";
}
public String search() throws ParseException, IOException{
dataMap.clear();
HttpServletRequest request = ServletActionContext.getRequest();
Date from = null, to = null ;
String searchDateStart = request.getParameter(\"searchDateStart\");
if(searchDateStart!=null && searchDateStart!=\"\") {
from = new SimpleDateFormat(\"MM/dd/yyyy\").parse(searchDateStart);
}
String searchDateEnd = request.getParameter(\"searchDateEnd\");
if(searchDateEnd!=null && searchDateEnd!=\"\") {
to = new SimpleDateFormat(\"MM/dd/yyyy\").parse(searchDateEnd);
}
String receiver = request.getParameter(\"receiver\");
String pageNoStr = request.getParameter(\"pageNo\");
PageParameter page = new PageParameter();
int pageNo = page.getPageNo();
int s = 0, max = page.getPageSize();
if(pageNoStr!=null && pageNoStr!=\"\"){
pageNo = Integer.parseInt(pageNoStr);
s = (pageNo-1)*page.getPageSize();
}
List<Message> messageListPage = messageService.find(receiver, from, to, s, max);
int totalCount = messageService.count(receiver, from, to, 0);
int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
int startNum = 0, stopNum = 0;
startNum = (pageNo-1)*page.getPageSize()+1;
if((startNum+page.getPageSize()-1)<=totalCount){
stopNum = startNum+page.getPageSize()-1;
}else{
stopNum = totalCount;
}
dataMap.put(\"startNum\", startNum);
dataMap.put(\"stopNum\", stopNum);
dataMap.put(\"pageNo\", pageNo);
dataMap.put(\"totalCount\", totalCount);
dataMap.put(\"pageSize\", page.getPageSize());
dataMap.put(\"searchDateStart\", searchDateStart);
dataMap.put(\"searchDateEnd\", searchDateEnd);
dataMap.put(\"receiver\", receiver);
dataMap.put(\"messageListPage\", messageListPage);
return \"success\";
}
}
以上就是小编为大家带来的jsp页面 列表 展示 ajax异步实现方法全部内容了，希望大家多多支持phpstudy~
本文地址：https://www.stayed.cn/item/625
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)