Ajax方式分頁加載列表實現
阿新 • • 發佈：2017-12-27
rst join appid subst getx ntp none sta oot 
在前面：
最近需要用到這個功能，所以這幾天一直在研究這個，目前大致功能已實現，後續需要完善，但需要的功能點已完成，記錄下；
1、分頁功能引入bootstrap的分頁插件：
<script type="text/javascript" src="3rd/jquery/jquery.js"></script>
<script type="text/javascript" src="3rd/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="3rd/bootstrap/js/bootstrap-paginator.min.js"></script>2、Ajax沒有使用jquery的，而是找了一個方便調試的代碼，主要看重支持跨域：
(function(window,undefined) { function ajax(options) { //編碼數據 function setData() { //設置對象的遍碼 function setObjData(data, parentName) { function encodeData(name, value, parentName) {MyAjax.jsvar items = []; name = parentName === undefined ? name : parentName + "[" + name + "]"; if (typeof value === "object" && value !== null) { items = items.concat(setObjData(value, name)); } else { name= encodeURIComponent(name); value = encodeURIComponent(value); items.push(name + "=" + value); } return items; } var arr = [],value; if (Object.prototype.toString.call(data) == ‘[object Array]‘) { for (var i = 0, len = data.length; i < len; i++) { value = data[i]; arr = arr.concat(encodeData( typeof value == "object"?i:"", value, parentName)); } } else if (Object.prototype.toString.call(data) == ‘[object Object]‘) { for (var key in data) { value = data[key]; arr = arr.concat(encodeData(key, value, parentName)); } } return arr; }; //設置字符串的遍碼，字符串的格式為：a=1&b=2; function setStrData(data) { var arr = data.split("&"); for (var i = 0, len = arr.length; i < len; i++) { name = encodeURIComponent(arr[i].split("=")[0]); value = encodeURIComponent(arr[i].split("=")[1]); arr[i] = name + "=" + value; } return arr; } if (data) { if (typeof data === "string") { data = setStrData(data); } else if (typeof data === "object") { data = setObjData(data); } data = data.join("&").replace("/%20/g", "+"); //若是使用get方法或JSONP，則手動添加到URL中 if (type === "get" || dataType === "jsonp") { url += url.indexOf("?") > -1 ? (url.indexOf("=") > -1 ? "&" + data : data) : "?" + data; } } } // JSONP function createJsonp() { var script = document.createElement("script"), timeName = new Date().getTime() + Math.round(Math.random() * 1000), callback = "JSONP_" + timeName; window[callback] = function(data) { clearTimeout(timeout_flag); document.body.removeChild(script); success(data); } script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "callback=" + callback; script.type = "text/javascript"; document.body.appendChild(script); setTime(callback, script); } //設置請求超時 function setTime(callback, script) { if (timeOut !== undefined) { timeout_flag = setTimeout(function() { if (dataType === "jsonp") { delete window[callback]; document.body.removeChild(script); } else { timeout_bool = true; xhr && xhr.abort(); } console.log("timeout"); }, timeOut); } } // XHR function createXHR() { //由於IE6的XMLHttpRequest對象是通過MSXML庫中的一個ActiveX對象實現的。 //所以創建XHR對象，需要在這裏做兼容處理。 function getXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { //遍歷IE中不同版本的ActiveX對象 var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"]; for (var i = 0; i < versions.length; i++) { try { var version = versions[i] + ".XMLHTTP"; return new ActiveXObject(version); } catch (e) {} } } } //創建對象。 xhr = getXHR(); xhr.open(type, url, async); //設置請求頭 if (type === "post" && !contentType) { //若是post提交，則設置content-Type 為application/x-www-four-urlencoded xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); } else if (contentType) { xhr.setRequestHeader("Content-Type", contentType); } //添加監聽 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (timeOut !== undefined) { //由於執行abort()方法後，有可能觸發onreadystatechange事件， //所以設置一個timeout_bool標識，來忽略中止觸發的事件。 if (timeout_bool) { return; } clearTimeout(timeout_flag); } if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { success(xhr.responseText); } else { error(xhr.status, xhr.statusText); } } }; //發送請求 xhr.send(type === "get" ? null : data); setTime(); //請求超時 } var url = options.url || "", //請求的鏈接 type = (options.type || "get").toLowerCase(), //請求的方法,默認為get data = options.data || null, //請求的數據 contentType = options.contentType || "", //請求頭 dataType = options.dataType || "", //請求的類型 async = options.async === undefined ? true : options.async, //是否異步，默認為true. timeOut = options.timeOut, //超時時間。 before = options.before || function() {}, //發送之前執行的函數 error = options.error || function() {}, //錯誤執行的函數 success = options.success || function() {}; //請求成功的回調函數 var timeout_bool = false, //是否請求超時 timeout_flag = null, //超時標識 xhr = null; //xhr對角 setData(); before(); if (dataType === "jsonp") { createJsonp(); } else { createXHR(); } } window.ajax = ajax; })(window);
3、主要使用方法：
var options = { bootstrapMajorVersion: 3, currentPage: 1, //當前頁 numberOfPages: 5, //顯示的頁數 totalPages: 20, //總頁數 itemTexts: function(type, page, current) { switch(type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } }, onPageClicked: function(e, originalEvent, type, page) { console.log(‘ni dian le ‘+page); var data = {pageNo: page,pageSize: 10}; searchModule.query(data); } }; var searchModule = { query: function(data) { console.log(‘你點了query‘); console.log(‘查詢條件：‘+JSON.stringify(data)) ajax({ type: "post", url: "http://10.7.6.7:8880/ms-mcms/cms/asset/search_jsonp.do", dataType: "jsonp", data: data, timeOut: 15000, before: function() { console.log("before"); $(‘#pagination‘).bootstrapPaginator(options); }, success: function(response) { // console.log(response); var items = response.articles; var html = ‘‘; for(index in items){ var item = items[index]; // console.log(item) html+=‘<li class="row no-margin ng-scope" onclick="‘+searchModule.click(item)+‘" role="button" tabindex="0"><div class="pull-left item-left"> <img class="search-thumb ng-scope" style="background: #202334 url(‘+item.artFrame+‘) no-repeat center;background-size: contain;"> </div><div class="item-intro"><div class="row no-margin item-top"> <div class="col-md-12 title-box ng-binding">‘+item.basicTitle+‘</div></div> <div class="row no-margin-right item-bottom"> <div class="col-md-3 no-padding icon-gray"> <i class="glyphicon glyphicon-user "></i> <span class="ng-binding">‘+item.articleAuthor+‘</span> </div></div></div> <div class="pull-right item-right ng-scope" > <div class="ng-binding"> <i class="glyphicon glyphicon-facetime-video"></i>‘ +item.dateline+‘</div><div style="margin-top:25px;" class="ng-binding"> <i class="fa fa-clock-o"></i>‘+item.dateline+‘</div></div></li>‘; } $(".topicList").html(html); }, error: function() { console.log("error"); } }); }, click: function(item) { console.log(‘你點了click‘); }, moreCtrl: function() { if($(‘.more‘).hasClass(‘isShow‘)) { $(‘.more‘).removeClass(‘isShow‘); $(‘#arrowsmall‘).removeClass(‘fa-sort-desc‘); $(‘#arrowsmall‘).addClass(‘fa-sort-asc‘); } else { $(‘.more‘).addClass(‘isShow‘); $(‘#arrowsmall‘).removeClass(‘fa-sort-asc‘); $(‘#arrowsmall‘).addClass(‘fa-sort-desc‘); } }, sortFunc: function(type) { if(type == 0) { $(‘.sort ul li:first‘).addClass(‘active‘) $(‘.sort ul li:last‘).removeClass(‘active‘) } else { $(‘.sort ul li:last‘).addClass(‘active‘) $(‘.sort ul li:first‘).removeClass(‘active‘) } }, }; $(document).ready(function() { var data = {pageNo: 1,pageSize: 10}; searchModule.query(data); });
查詢所有--》初始化分頁插件--》分頁功能實現；
4.後臺代碼：
由於jsonp請求只支持get請求，所以在原方法的基礎上包一層，開放給jsonp方式訪問，並保留原方法；
import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Set; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import com.alibaba.fastjson.JSONObject; @RestController @RequestMapping("/asset") public class AssetRS { public static final Logger logger = LoggerFactory.getLogger(AssetRS.class); private String tableName; private Set<String> columnIds; @Autowired private ISearchAssetBiz searchAssetBiz; @ResponseBody @RequestMapping(value = "/search",method={RequestMethod.POST,RequestMethod.GET}) public SearchAssetInfo seachAsset(HttpServletRequest request, @RequestBody SearchPageInfo page){ int pageSize = page.getPageSize(); int pageNo = page.getPageNo(); //聚類查詢字段 String fieldGroup = ""; StringBuffer groups = new StringBuffer(""); List<String> fields = page.getFields(); if(fields != null){ for (String field : fields) { groups.append(",").append(field); } fieldGroup = groups.substring(1); } List<String> ids = new ArrayList<>(); ids.addAll(columnIds); int appId = page.getAppId()==null?1:Integer.valueOf(page.getAppId()); int count = searchAssetBiz.getSearchAssetCount(tableName,page.getWhereMap(),appId,ids); //分頁信息 SearchPageInfo searchPage = new SearchPageInfo(); searchPage.setCount(count); searchPage.setPageNo(pageNo); searchPage.setPageSize(pageSize); List<MdiyAttrInfo> list = searchAssetBiz.getSearchGroup(tableName, page.getWhereMap(), appId, ids, StringUtils.hasText(fieldGroup) ? fieldGroup : null); for (MdiyAttrInfo mdiyAttrInfo : list) { mdiyAttrInfo.getCategory(); //去重 } List<MdiyAttrInfo> assets = searchAssetBiz.querySearchList(tableName, page.getWhereMap(), appId, ids, pageNo, pageSize, page.getSortMap()); SearchAssetInfo searchAssetInfo = new SearchAssetInfo(); searchAssetInfo.setArticles(assets); searchAssetInfo.setPage(searchPage); return searchAssetInfo; } @ResponseBody @RequestMapping(value = "/search_jsonp",method={RequestMethod.GET}) public void seachAssetJsonp(HttpServletRequest request, HttpServletResponse response, @RequestParam(required=false) int pageNo, @RequestParam(required=false) int pageSize, @RequestParam(required=false) String basictitle, @RequestParam(required=false) String Category, @RequestParam(required=false) String tag, @RequestParam(required=false) String startDate, @RequestParam(required=false) String endDate, @RequestParam(required=false) String sortField, @RequestParam(required=false) String sort){ SearchPageInfo page = new SearchPageInfo(); page.setPageNo(pageNo); page.setPageSize(pageSize); Map<String,String> whereMap = new HashMap<>(); if(StringUtils.hasText(basictitle)){ whereMap.put("basictitle", basictitle); page.setWhereMap(whereMap); } Map<String, String> sortMap = new HashMap<>(); if(StringUtils.hasText(sortField)){ sortMap.put(sortField, sort); page.setSortMap(sortMap); } List<String> list = new ArrayList<>(); list.add("Category"); list.add("Tags"); page.setFields(list); String callback = (String)request.getParameter("callback"); SearchAssetInfo info = seachAsset(request, page); String retStr = callback + "(" + JSONObject.toJSONString(info)+")"; try { response.getWriter().print(retStr); } catch (IOException e) { e.printStackTrace(); } } }View Code
需要註意下，jsonp請求的返回值格式，直接返回json時，前臺會報錯的；
String retStr = callback + "(" + JSONObject.toJSONString(info)+")";
try {
response.getWriter().print(retStr);
} catch (IOException e) {
e.printStackTrace();
}
目前的功能還不完善，後續更新吧！
Ajax方式分頁加載列表實現