bootstrap-pagination demo

2019独角兽企业重金招聘Python工程师标准>>>

一、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,所以直接就用了alert
				deferred.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;
		else
			return false;
	};

	/**
	 * 函数名称：isEmpty 函数功能：判断给定字符串是否为空 函数参数：str,需要处理的字符串
	 */
	common.isEmpty = function (obj) {
		if (obj === null) {
			return true;
		}
		if (!common.isNull(obj) &&
			common.Trim(obj).length > 0)
			return false;
		else
			return 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>
<script
		data-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>

五、效果

转载于:https://my.oschina.net/fengshuzi/blog/755647