jsp页面 列表 展示 ajax异步实现方法(2)

$(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>'); html.push('<td>'+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="#">&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