<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> </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 来源