主頁(yè) > 知識(shí)庫(kù) > jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法

jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法

熱門(mén)標(biāo)簽:企業(yè)怎么在聯(lián)通申請(qǐng)400電話(huà) 好操作的電話(huà)機(jī)器人廠家 聊城智能電銷(xiāo)機(jī)器人外呼 百度地圖添加標(biāo)注圖標(biāo)樣式 南京新思維電話(huà)機(jī)器人 南昌市地圖標(biāo)注app 地圖標(biāo)注市場(chǎng)怎么樣 如何用中國(guó)地圖標(biāo)注數(shù)字點(diǎn) 泰州泰興400電話(huà) 怎么申請(qǐng)

1. 服務(wù)端先返回頁(yè)面基本結(jié)構(gòu)(如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>創(chuàng)建時(shí)間: 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">發(fā)送者/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">創(chuàng)建時(shí)間/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">新建應(yīng)用/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">名稱(chēng)/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">類(lèi)別/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">授權(quán)模式/label>
        div class="col-sm-10">
         select class="form-control m-b" name="account">
           option>授權(quán)/option>
           option>不授權(quán)/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">確認(rèn)密碼/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">關(guān)閉/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">編輯節(jié)目特殊單/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">表單標(biāo)題/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">關(guān)閉/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加載的時(shí)候,再去異步請(qǐng)求獲取頁(yè)面數(shù)據(jù)(表格、分頁(yè)等),再動(dòng)態(tài)創(chuàng)建表,分頁(yè)鏈接等

$(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){
      }
    });
  }
  //查詢(xún)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: "結(jié)束日期不能晚于開(kāi)始日期",
        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 + '項(xiàng) , 共' + totalCount +' 項(xiàng)。';
      $("#message_showLines").html(str);
    }
  }
  
  
  $('#message_body').on('click','a.message_del',function(){
    var message_id = $(this).parent("td").attr("message_id");
    swal({
      title : "確認(rèn)要?jiǎng)h除嗎?",
      text : "刪除后將不能恢復(fù)!",
      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("刪除!",
                  "已經(jīng)成功刪除.",
              "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);
    }
  });
  
});

注意: 表格是動(dòng)態(tài)創(chuàng)建的,其中的按鈕綁定事件時(shí),一定要先找到它的父節(jié)點(diǎn)(或祖先節(jié)點(diǎn)),再到指定節(jié)點(diǎn),綁定事件

如上面的  $("#serviceRepo_body").on('click','a.record_view',function(){});

分頁(yè)js插件(page.js), 同時(shí)引入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('總數(shù)不能為空!');
      $(this).empty();
      return false;
    } else if (Number(defaults.totalCount) = 0) {
      //alert('總數(shù)要大于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.項(xiàng)目采用struts2, 返回json, 在struts中配置, 并在action中使用map來(lái)封裝數(shù)據(jù), 并添加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";
  }
}

以上就是小編為大家?guī)?lái)的jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~

您可能感興趣的文章:
  • Ajax+Servlet+jsp顯示搜索效果
  • 基于jsp的AJAX多文件上傳的實(shí)例
  • JSP使用ajaxFileUpload.js實(shí)現(xiàn)跨域問(wèn)題
  • AJAX和JSP混合使用方法實(shí)例
  • jsp+ajax實(shí)現(xiàn)無(wú)刷新上傳文件的方法
  • JSP+jquery使用ajax方式調(diào)用json的實(shí)現(xiàn)方法
  • jsp+ajax實(shí)現(xiàn)的局部刷新較驗(yàn)驗(yàn)證碼(onblur事件觸發(fā)較驗(yàn))
  • jquery ajax 如何向jsp提交表單數(shù)據(jù)
  • jsp實(shí)現(xiàn)checkbox的ajax傳值實(shí)例
  • jsp+ajax發(fā)送GET請(qǐng)求的方法
  • 在(ASP/PHP/JSP/html/js)中禁止ajax緩存的方法集錦
  • 使用js聲明數(shù)組,對(duì)象在jsp頁(yè)面中(獲得ajax得到j(luò)son數(shù)據(jù))
  • jsp中利用jquery+ajax在前后臺(tái)之間傳遞json格式參數(shù)
  • ajax 提交數(shù)據(jù)到后臺(tái)jsp頁(yè)面及頁(yè)面跳轉(zhuǎn)問(wèn)題

標(biāo)簽:臨汾 白銀 開(kāi)封 自貢 山南 吉林 烏蘭察布 銅川

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法》,本文關(guān)鍵詞  jsp,頁(yè)面,列表,展示,ajax,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于jsp頁(yè)面 列表 展示 ajax異步實(shí)現(xiàn)方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章