立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › jsp页面 列表 展示 ajax异步实现方法

赞

评论

收藏

[JSP] jsp页面 列表 展示 ajax异步实现方法

开发技术 开发技术 发布于：2021-10-21 10:18 | 阅读数：488 | 评论：0

1. 服务端先返回页面基本结构（如message.jsp），
<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="https://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"  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异步实现方法全部内容了，希望大家多多支持CodeAE代码之家~

关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
3416 经验
3415 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2024  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2