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

jquery 分页功能的更多相关文章

  1. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

  2. Jquery分页功能

    Jquery代码 /// <reference path="jquery-1.9.1-vsdoc.js" />//锚点var anchor="#apage&q ...

  3. jPList – 实现灵活排序和分页功能的 jQuery 插件

    jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...

  4. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  5. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  6. jQuery静态分页功能

    分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) #setpage { margin: 15px auto; text-align: cen ...

  7. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  8. Jqgrid的用法总结与分页功能的拓展

    这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...

  9. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

随机推荐

  1. Java-JFrame开发汇总整理

    Java-JFrame开发汇总整理 在CS框架下,可以通过java代码开发JFrame弹窗体的功能,即类似于QQ登录等安装在计算机中的程序,通过java开发CS中C即客户端的一般用到的知识点如下: 一 ...

  2. mysql数据库使用mybatis 插入数据时返回主键

    为了体现题目,特指的是mysql,先贴上代码: <insert id="saveBizProdOrderDetail" useGeneratedKeys="true ...

  3. Python基础——判断和循环

    判断 缩进代替大括号. 冒号(:)后换号缩进. if test=100 if test>50: print('OK') print('test') if-elif-else test=50 if ...

  4. 初学Python01

    1.文本编辑器区别于交互模式的Python,它可以保存Python代码文件,再次打开还是存在.文件保存时要注意是.py的模式. 2.Windows系统下,应使用命令行模式打开.py 首先进入文件所在磁 ...

  5. 稀疏表(ST / Sparse Table)

    RMQ问题: 给定一个序列,每次询问一个区间最小值 / 最大值. 没有修改. //拿区间最大值来举例. memset(ans, -INF, sizeof(ans)); for (int i = 1; ...

  6. HDU - 1496 Equations (hash)

    题意: 多组测试数据. 每组数据有一个方程 a*x1^2 + b*x2^2 + c*x3^2 + d*x4^2 = 0,方程中四个未知数 x1, x2, x3, x4 ∈ [-100, 100], 且 ...

  7. Linux学习-灾难复原的考虑

    硬件损毁,且具有完整备份的数据时 由于是硬件损毁,所以我们不需要考虑系统软件的不稳定问题,所以可以直接将完整的系统复原回去 即可. 由于软件的问题产生的被攻破资安事件 由于系统的损毁是因为被攻击,此时 ...

  8. UVa 11695 树的直径 Flight Planning

    题意: 给出一棵树,删除一条边再添加一条边,求新树的最短的直径. 分析: 因为n比较小(n ≤ 2500),所以可以枚举删除的边,分裂成两棵树,然后有这么一个结论: 合并两棵树后得到的新树的最短直径为 ...

  9. Java-创建一个线程

    第一种继承Thread类 package com.tj; public class BasicThread1 extends Thread { public void run() { System.o ...

  10. webdriver高级应用- 操作富文本框

    富文本框的技术实现和普通的文本框的定位存在较大的区别,富文本框的常见技术用到了Frame标签,并且在Frame里面实现了一个完整的HTML网页结构,所以使用普通的定位模式将无法直接定位到富文本框对象. ...