<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 来源
原文地址：https://www.cnblogs.com/zhixi/p/9367430.html
时间： 2024-10-11 14:27:20