jquery 分页功能

<div class="wrapper"> ???????????<div class="row"> ???????????????<div class="col-sm-12"> ???????????????????<section class="panel"> ???????????????????????<header class="panel-heading"> ???????????????????????????<form class="form-inline" role="form"> ???????????????????????????????<div class="form-group"> ???????????????????????????????????<label class="control-label" for="cardNo">会员卡号：</label> ???????????????????????????????????<input type="text" class="form-control" id="cardNo" placeholder="请输入会员卡号" /> ???????????????????????????????</div> ????????????????????????????????<div class="form-group"> ???????????????????????????????????<label class="control-label" for="name">会员姓名：</label> ???????????????????????????????????<input type="text" class="form-control" id="name" placeholder="请输入会员姓名" /> ???????????????????????????????</div> ???????????????????????????????<div class="form-group"> ???????????????????????????????????<label class="control-label" for="mobile">手机号码：</label> ???????????????????????????????????<input type="text" class="form-control" id="mobile" placeholder="请输入手机号码" /> ???????????????????????????????</div> ???????????????????????????????<button type="button" class="btn btn-info" id="search">查询</button> ???????????????????????????????<button type="button" class="btn btn-info" id="reset">重置</button> ???????????????????????????</form> ????????????????????????</span> ????????????????????????</header> ???????????????????????<div class="panel-body"> ???????????????????????????<div class="table-box"> ???????????????????????????<table class="table table-bordered ?table-hover general-table"> ???????????????????????????????<thead> ???????????????????????????????<tr> ???????????????????????????????????<th>编号</th> ???????????????????????????????????<th>会员卡号</th> ???????????????????????????????????<th>会员姓名</th> ???????????????????????????????????<th>会员性别</th> ???????????????????????????????????<th>会员生日</th> ???????????????????????????????????<th>手机号码</th> ???????????????????????????????????<th>来源</th> ???????????????????????????????</tr> ???????????????????????????????</thead> ???????????????????????????????<tbody id="customer"> ???????????????????????????????????<tr> ???????????????????????????????????????<td>&nbsp;</td> ???????????????????????????????????????<td></td> ???????????????????????????????????????<td></td> ???????????????????????????????????????<td></td> ???????????????????????????????????????<td></td> ???????????????????????????????????????<td></td> ???????????????????????????????????????<td></td> ???????????????????????????????????</tr> ???????????????????????????????</tbody> ???????????????????????????</table> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div class="text-center"> ???????????????????????????<ul class="pagination pagination-sm" id="page"> ???????????????????????????<!-- ????????????????????????????????<li><a href="#">?</a></li> --><!-- ????????????????????????????????<li><a href="#">1</a></li> --><!-- ????????????????????????????????<li><a href="#">2</a></li> --><!-- ????????????????????????????????<li class="active"><a href="#">3</a></li> --><!-- ????????????????????????????????<li><a href="#">4</a></li> --><!-- ????????????????????????????????<li><a href="#">5</a></li> --><!-- ????????????????????????????????<li><a href="#">?</a></li> --> ???????????????????????????</ul> ???????????????????????</div> ???????????????????</section> ???????????????</div> ???????????</div> ???????</div>

$(function(){ ???????$("#search").click(function(){ ???????customer(1); ???}) ???$("#reset").click(function(){ ???????$("#cardNo").val(""); ???????$("#name").val(""); ???????$("#mobile").val(""); ???})})//会籍列表function customer(page){ ???var cardNo = $("#cardNo").val(); ???var name = $("#name").val(); ???var mobile = $("#mobile").val(); ???if(cardNo==""){ ???????cardNo=""; ???}else if(name==""){ ???????name=""; ???}else if(mobile==""){ ???????mobile=""; ???} ???var param = {}; ???param.limit = 10; ???param.page = page; ???param.column = "" ???param.dir = ""; ???param.cardNo = cardNo; ???param.name ?= name; ???param.mobile = mobile; ???$.ajax({ ???????type: "POST", ???????url : "/crm/customer/all", ???????data:param, ???????dataType:"json", ???????success : function(date) { ???????????var tabList =date.content; ???????????var tabTr=""; ???????????var num = parseInt("1"); ???????????if(tabList==""){ ???????????????$(‘#myModal‘).modal(‘show‘); ???????????}else{ ???????????????for (var i = 0; i < tabList.length; i++) { ???????????????????var tdCon = tabList[i]; ???????????????????tabTr += "<tr><td>" ???????????????????????+(num+i)+"</td><td><a href=‘javascript:void(0);‘ onClick=‘detilLink("+tdCon["id"]+");‘>" ???????????????????????+tdCon["vipcode"]+"</a></td><td>" ???????????????????????+tdCon["name"]+"</td><td>" ???????????????????????+tdCon["sexStr"]+"</td><td>" ???????????????????????+tdCon["birthday"]+"</td><td>" ???????????????????????+tdCon["mobile"]+"</td><td>" ???????????????????????+tdCon["source"]+"</td>" ?????????????????????+"</tr>"; ???????????????} ???????????????$("#customer").html(tabTr); ???????????????????????????????????????????????//分页 ???????????????var total = date.total; ???????????????var html2 = "<li"; ???????????????if (page == 1) { ???????????????????html2 += " class=‘disabled‘"; ???????????????} ???????????????if (page == 1) { ???????????????????html2+="><a href=‘javascript:void(0)‘"; ???????????????}else{ ???????????????????html2+="><a href=‘javascript:customer("+ (page - 1)+ ")‘"; ???????????????} ???????????????????????????????html2 += "><i class=‘fa fa-chevron-left‘></i></a></li>"; ???????????????var pageTotal = Math.ceil(total / param.limit); ???????????????for (var j = 1; j <= pageTotal; j++) { ???????????????????html2 += "<li class=‘"; ???????????????????if (page == j) { ???????????????????????html2 += "active"; ???????????????????} ???????????????????html2 += "‘><a href=‘javascript:customer(" ???????????????????????+ j ???????????????????????+ ") "; ???????????????????????????????????????html2 += "‘>" + j + "</a></li>"; ???????????????} ???????????????html2 += "<li"; ???????????????if (page == pageTotal) { ???????????????????html2 += " class=‘disabled‘"; ???????????????} ???????????????if (page == pageTotal) { ???????????????????html2+="><a href=‘javascript:void(0)‘"; ???????????????}else{ ???????????????????html2+="><a href=‘javascript:customer("+ (page + 1)+ ")‘"; ???????????????} ???????????????????????????????html2 += "><i class=‘fa fa-chevron-right‘></i></a></li>"; ???????????????if (total > 0) { ???????????????????$("#page").html(html2); ???????????????} else { ???????????????????$("#page").html(""); ???????????????} ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????} ???????????????????},error: function(json){ ?????????????console.log(‘数据异常，请刷新后重试...‘,‘warning‘); ???????} ???});}function detilLink(id){ ???console.log(id); ???window.open("getById?customerId="+id);}

会员列表：/crm/customer/list ?访问页面 ????????/crm/customer/all ?异步加载数据 ?参数 limit 页码 page 页数 column，dir传空 cardNo 卡号 name 姓名 mobile手机号返回参数 ?total 总数 ?content 数据集合content 列表 字段为 id ， vipcode 卡号，name姓名，sexStr 性别，birthday 生日，mobile 手机号，source 来源