jquery 分页功能

Posted 2020-12-25 知兮

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