• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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>创建时间: nbsp;/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>接收者:nbsp;/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(num0){
          $("#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; imessageListPage.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">nbsp;删除nbsp;/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="#">laquo;/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="#">raquo;/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;
      
      MapString, Object> dataMap = new HashMapString, Object>();
      
      public MapString, 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();
        ListMessage> 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();
        }
        ListMessage> 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异步实现方法全部内容了,希望大家多多支持脚本之家~

    您可能感兴趣的文章:
    • Ajax+Servlet+jsp显示搜索效果
    • 基于jsp的AJAX多文件上传的实例
    • JSP使用ajaxFileUpload.js实现跨域问题
    • AJAX和JSP混合使用方法实例
    • jsp+ajax实现无刷新上传文件的方法
    • JSP+jquery使用ajax方式调用json的实现方法
    • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
    • jquery ajax 如何向jsp提交表单数据
    • jsp实现checkbox的ajax传值实例
    • jsp+ajax发送GET请求的方法
    • 在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦
    • 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
    • jsp中利用jquery+ajax在前后台之间传递json格式参数
    • ajax 提交数据到后台jsp页面及页面跳转问题
    上一篇:jsp中自定义Taglib详解
    下一篇:纯JSP实现的简单登录示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    jsp页面 列表 展示 ajax异步实现方法 jsp,页面,列表,展示,ajax,