当前位置：首页 > news >正文

mysql分页（ajax）

news 来源：原创 2024/5/19 1:33:57

分页有多种方式，mysql的limit是个不错的选择，通过ajax实现异步刷新，将当前页数和每页数量传入后台即可

1. 首先后台要拿到总记录数和所需显示数据列表，所以要分别写两个sql方法

我这里是通过spring的注解方式写的sql，其它方法原理是一样的

    /**
     * 礼品列表(分页)
     */
    @Select("select * from t_coupons  limit ${firstnum},${maxnum}")
    public List<Coupon> list(@Param("firstnum") long firstnum,@Param("maxnum") long maxnum);

    /**
     * 礼品列表总条数
     */
    @Select("select count(*) from t_coupons")
    public int countlist();

2. 再是service的处理，这里因为每条显示数量由后台控制，所以只需要传入当前页数就行，如有需要可自己加

    /**
     * 礼品列表
     */
    public List<Object> list(int pageNow) {
        //每页显示条数
        int pageNum = 5;
        //开始条数
        int beginNum = (pageNow - 1) * pageNum;
        //查询
        List<Coupon> couponDataTotal = couponDataDao.list(beginNum, pageNum);
        //总条数
        int count = couponDataDao.countlist();
        //总页数
        int allPage = PageUtil.countPageByCountAndpageNum(count, pageNum);
        //数据集合
        List<Object> list = new ArrayList<Object>();
        list.add(couponDataTotal);
        list.add(allPage);
        return list;

    }

后台返回的是一个object数据，包含数据列表和总页数

3. 接下来就是前端处理了，我同事写了一个公共js，只需要引用js和一行html即可实现上一页、下一页的控制效果和当前页数、总页数的显示，觉得很不错，所以拿来用了

/**
 * 分页的改变
 * @param pageShowId    分页显示的id
 * @param i    (1 上一页，2 下一页，3 当前页，4 第一页)
 * @returns    操作过后的页数（当前页）
 */
function pageChange(pageShowId,i){
    if(i == 1){
        clickUp(pageShowId);
    }else if(i == 2){
        clickNext(pageShowId);
    }else if(i == 4){
        setPageNum(pageShowId, 1, 1);
    }
    var nowPage = getPageNum(pageShowId, 1);
    return nowPage;
}

/**
 * 点击上一页的时候触发
 */
function clickUp(pageShowId){
    var now = getPageNum(pageShowId,1);
    if(now==1){
        nowPage = 1;
    }else if(now>1){
        nowPage = parseInt(now) - 1;
    }
    setPageNum(pageShowId,1,nowPage);
}

/**
 * 点击下一页时触发
 * @param pageShowId
 * @returns
 */
function clickNext(pageShowId){
    var now = getPageNum(pageShowId,1);
    var all = getPageNum(pageShowId,2);
    if(now==all){
            nowPage = all;
    }else if(parseInt(now)<parseInt(all)){
        nowPage = parseInt(now) + 1;
    }else{
        nowPage = 1;
    }
    setPageNum(pageShowId,1,nowPage);
}

/**
 * 获取分页(pageShowId 显示分页的id，index 1为当前页，2为总页)
 */
function getPageNum(pageShowId,index){
    var pageText = $("#"+pageShowId+"").text();
    var strs= new Array(); //定义一数组 
    strs = pageText.split("/");
    if(index==1){
        return strs[0];
    }else if(index==2){
        return strs[1];
    }
}

/**
 * 设置分页（pageShowId 显示分页的id，index 1为当前页，2为总页,str 是要修改的字符串）
 */
function setPageNum(pageShowId,index,str){
    var pageText = $("#"+pageShowId+"").text();
    var strs= new Array(); //定义一数组 
    strs = pageText.split("/");
    if(index==1){
        //修改当前页
        $("#"+pageShowId+"").text(str+"/"+strs[1]);
    }else if(index==2){
        //修改总页
        $("#"+pageShowId+"").text(strs[0]+"/"+str);
    }
}

这个js基本不用改，直接引用然后配合下面的html代码，基本通用

4. 然后是html界面

<div class="table-cont">
    <table width="100%" border="0" class="ins" cellspacing="0" cellpadding="0">
      <tr class="tbHead">
        <td>部门机构（支行）名称</td>
        <td>已分配</td>
        <td>价值</td>
        <td>已发放</td>
        <td>价值</td>
        <td>库存</td>
        <td>价值</td>
        <td>已领取</td>
        <td>未领取</td>
        <td>已使用</td>
        <td>未使用</td>
        <td>使用中</td>
        <td>操作</td>
      </tr>     
    </table>
  </div>
  
  <div class="pager tc">
    <input name="" type="button" value="上一页" onclick="change(1)" class="btn_prev" />
    <span id="pageShow-up" class="btn_page">1/1</span>
    <input name="" type="button" value="下一页" onclick="change(2)" class="btn_next" />
    <input name="" type="button" value="返回"  onclick="javascript:history.go(-1)" class="btn_back" />
  </div>

其实只有

<span id="pageShow-up" class="btn_page">1/1</span>

这行代码不能变，其它都是可以根据界面需求自己改的

5. 最后就是通过ajax将当前页数传入后台即可

//获取支行礼品统计列表
 function getBranchCouponDataList(nowPage){
      $(".remove").remove();
      $.ajax({
            url:path + "/couponData/branchCouponData",
            type:"POST",
            dataType: "json",
            data:{nowPage:nowPage},
            success:function(data){
                //设置总页数
                setPageNum("pageShow-up", 2, data[1]);
                 var html = '';
                  for(var i=0; i<data[0].length; i++){
                      var info = data[0][i];
                      html +=" <tr class='cl remove'>"
                       +" <td>"+info.branch_name+"</td>"
                       +" <td>"+info.puted_num+"份</td>"
                       +" <td>"+info.sum_price+"元</td>"
                       +" <td>"+info.send_num+"份</td>"
                       +" <td>"+info.send_price+"元</td>"
                       +" <td>"+info.last_num+"份</td>"
                       +" <td>"+info.last_price+"元</td>"
                       +" <td>"+info.receive_num+"份</td>"
                       +" <td>"+info.not_receive+"份</td>"
                       +" <td>"+info.used_num+"份</td>"
                       +" <td>"+info.notuse_num+"份</td>"
                       +" <td>"+info.useing_num+"份</td>"
                       +" <td>"
                       +"  <input name='' type='button' value='查看' class='btn_red' οnclick='toManagerCouponData("+info.branch_id+")'/>" 
                       +" </td>"
                       +" </tr>";
                   }
                  $(".ins").append(html);
            },
            error:function(e){
                alert("错误");
            }
        });
}