一、common.js

/*** @author team* @version 1.0*/
define(['jquery', "/codeComplete/dist/js/jquery.json-2.4.js", "template"], function ($, _, template) {var debugEnabled = true;var common = {};common.basePath = $("#current-page").attr("basePath") || "codeComplete";/*** 将对象字面量转为字符串*/common.stringify = function (obj) {obj = obj || {};var jsonStr = JSON.stringify(obj);return jsonStr;};/*** 将字符串转为对象字面量,依赖jquery.json，安全可靠*/common.parse = function (jsonStr) {jsonStr = jsonStr || "{}";var obj = JSON.parse(jsonStr);return obj;};/*** 异步请求方法*/common.ajax = function (ajaxParam) {//如果自己实现了success方法，认为是通过ajax的方式调用此方法if (ajaxParam.success) {$.ajax(ajaxParam);return;}ajaxParam.dataType = ajaxParam.dataType || "json";ajaxParam.type = ajaxParam.type || "get";var deferred = $.Deferred(); // 新建一个deferred对象ajaxParam.success = function (data) {if (data.errcode === -1) {common.error("error,", data);if (data.errmsg) {alert(data.errmsg);deferred.reject(data.errmsg);} else {deferred.reject("系统繁忙");}} else if (data.errcode === 4001 || data.errcode === 4002) {common.info("此请求需要登录即将跳转到登陆页面");alert("请先登陆");common.login();deferred.reject("");} else if (data.errcode === 5013) {common.info(data.errmsg);alert(data.errmsg);//弹出层的弹出层不能用common.alert,所以直接就用了alertdeferred.reject(data.errmsg);} else {common.debug("ajaxParam-responseDate", ajaxParam, data);deferred.resolve(data);}};ajaxParam.error = function (xhr) {//common.alert("系统繁忙");common.error("error:" + xhr);deferred.reject(xhr);};$.ajax(ajaxParam);return deferred.promise();};/*** 从约定的元素获取值*/common.getAttr = function (key) {return $("#current-page").attr(key);};/*** 在页面约定的元素上存储数据*/common.setAttr = function (key, val) {$("#current-page").attr(key, val);};/*** 改element设置文本内容*/common.setText = function (key, val) {$(key).text(val);};/*** 给指定class或者id设置文本内容*/common.setContent = function (content, target) {var texts = target.texts || [];for (var i in texts) {if ($("." + texts[i])) {$("." + texts[i]).last().text(content[texts[i]]);} else {$("#" + texts[i]).text(content[texts[i]]);}}var srcs = target.srcs || [];for (i in srcs) {$("#" + srcs[i]).attr("src", content[srcs[i]]);}var attrs = target.attrs || [];for (i in attrs) {$("#" + attrs[i]).attr(attrs[i], content[attrs[i]]);}var appends = target.appends || [];for (i in appends) {$("#" + appends[i]).append(content[appends[i]]);}};//兼容低版本ie浏览器common.info = function () {try {if (debugEnabled) {console.info(arguments);}} catch (e) {}return common;};common.error = function () {try {if (debugEnabled) {console.info(arguments);}} catch (e) {}return common;};common.warn = function () {try {if (debugEnabled) {console.info(arguments);}} catch (e) {}return common;};common.debug = function () {try {if (debugEnabled) {console.info(arguments);}} catch (e) {}return common;};common.log = function () {try {if (debugEnabled) {console.info(arguments);}} catch (e) {}return common;};/*** 函数名称：Trim 函数功能：去除字符串两边的空格 函数参数：str,需要处理的字符串*/common.Trim = function (str) {return str.replace(/(^\s*)|(\s*$)/g, "");};// 校验是否为空(先删除二边空格再验证)common.isNull = function (obj) {if (obj === null || typeof (obj) == "null" || typeof (obj) == "undefined")return true;elsereturn false;};/*** 函数名称：isEmpty 函数功能：判断给定字符串是否为空 函数参数：str,需要处理的字符串*/common.isEmpty = function (obj) {if (obj === null) {return true;}if (!common.isNull(obj) &&common.Trim(obj).length > 0)return false;elsereturn true;};// 校验是否全是数字common.isDigit = function (str) {var patrn = /^\d+$/;return patrn.test(str);};/*** 判断字符串是否为空*/common.isNotEmpty = function (obj) {return !common.isEmpty(obj);};/*** 拼接请求参数*/common.buildQueryString = function (params) {var kvs = [];for (var p in params) {kvs.push(p + '=' + params[p]);}return '?' + kvs.join('&');};/*** 获取URL的所有查询参数,url中如果包含中文慎用*/common.getUrlQueryParams = function () {var params = {};var regex = /[\?&]([a-zA-Z_]+)=([\w\-\.\s\+\%\:]*)/g;while ((results = regex.exec(window.location.href)) !== null) {params[results[1]] = results[2];}return params || {};};/*** 判断对象字面量是否为空*/common.objIsEmpty = function (json) {json = json || {};var jsonStr = JSON.stringify(json);return jsonStr === "{}";};common.objIsNotEmpty = function (json) {return !common.objIsEmpty(json);};/***   变量是否为数字*/common.isNumber = function (str) {var regExp = /^\d+$/g;return regExp.test(str);};common.notice = function (message) {$(".error_box").text(message);setTimeout(function () {$(".error_box").text("");}, 3000);};common.render = function (data, source) {var render = null;if (data instanceof Array) {source = '{{each list as item i}}' + source + '{{/each}}';render = template.compile(source);return render({"list": data});} else {render = template.compile(source);return render(data);}};/*** html模板直接从页面中拿，页面模板在页面中先隐藏*/common.renderById = function (data, id) {var source = $("#" + id).html();var render = null;var html = null;var flag = data.hide;if (data instanceof Array) {source = '{{each list as item i}}' + source + '{{/each}}';render = template.compile(source);html = render({"list": data});} else {render = template.compile(source);html = render(data);}$("#" + id).html(html);$("#" + id).show();$(".hide").hide();};common.setPageParam = function (pageParam) {pageParam = pageParam || {};$("#current-page").attr("pageParam", common.stringify(pageParam));};common.getPageParam = function () {var pageParamStr = $("#current-page").attr("pageParam") || "{}";return common.parse(pageParamStr);};return common;
});

二、返回数据json结构

{"pagination" : {"page" : 2,"total" : 6,"pageSize" : 2,"maxPage" : 3,"items" : [ {"id" : 3,"price" : "100.0","name" : "oppo","stock" : 19}, {"id" : 4,"price" : "18.0","name" : "HTC","stock" : 29} ],"result" : 0},"errcode" : 0,"errmsg" : "正常"
}

三、分页写法

/*** @author 漂泊者及其影子* @version 1.0*/
define(["jquery", "bootstrap", "common", "bootstrap-paginator", "template"], function ($, bootstrap, common, bootstrap_paginator, template) {"user strict"; // 每个模块化的js都使用严格模式var product = {};/*** 商品模块入口*/product.init = function (page) {loadList();};function loadList(param) {param = param || {};param.page = param.page || 1;param.pageSize = param.pageSize || 2;var ajaxParam = {url: "/codeComplete/rest/product/list",data: param};common.ajax(ajaxParam).then(function (data) {common.setPageParam(param);// 如果为空说明分页还没有初始化if ($("#pagination").text() === '') {pagination(data.pagination.page, data.pagination.maxPage);}var items = data.pagination.items;var listHtml = getListHtml(items);$("#listContent").html(listHtml);});}/*** 分页列表模板*/function getListHtml(datas) {var source = ' <tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.stock}}</td><td><a href="projectEdit.html"><button type="button" class="btn">编辑</button></a></td> </tr>';return  common.render(datas, source);}function pagination(currentPage, totalPages) {var element = $('#pagination');var options = {bootstrapMajorVersion: 3,currentPage: currentPage,numberOfPages: 5,totalPages: totalPages,onPageClicked: function (e, originalEvent, type, page) {var pageParam = common.getPageParam();pageParam.page = page;loadList(pageParam);}};element.bootstrapPaginator(options);}return product;
});

四、index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!doctype html>
<html>
<head><title>商品管理</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="../../dist/css/bootstrap.css" rel="stylesheet" /><script type="text/javascript"></script><style type="text/css"></style>
</head>
<body><div class="text-center"><h1>#后台管理</h1></div>
<div class="container"><div class="row"><div class="col-lg-3"><div class="list-group"><!-- <div class="list-group-item"><strong>#ç³»ç»ç§ç±»</strong></div> --><div class="navbar list-group-item" style="margin-bottom:0px;"><strong>#web2.0</strong></div>          <a href="projectList.html" class="list-group-item active">商品管理>></a><a href="serverList.html" class="list-group-item">用户管理>></a></div></div><div class="col-lg-9"><div class="navbar list-group-item" style="margin-bottom:0px;"><strong>商品列表</strong><a href="projectEdit.html"><button type="button" class="btn btn-info pull-right">新增</button></a></div><table class="table table-bordered table-striped"><thead><tr ><th>id</th><th>名称</th><th>价格</th><th>库存­</th><th>操作</th></tr></thead><tbody id="listContent"></tbody></table><div class="pull-right"><ul id='pagination'></ul></div></div></div>
</div>
<scriptdata-main="../../dist/js/require.config"id="current-page" current-page="product" target-module="product"src="../../dist/js/require.js"  defer async="true"></script>
</body>
</html>

五、效果