Mybatis与Ajax实现简单的分页功能

最新推荐文章于 2022-11-27 19:24:27 发布

V_99999

最新推荐文章于 2022-11-27 19:24:27 发布

阅读量280

点赞数 2

分类专栏： Mybatis 文章标签： ajax java mybatis

本文链接：https://blog.csdn.net/V_99999/article/details/109277501

版权

Mybatis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现的效果图
数据库的字段
在这里插入图片描述

<!--分页后展示房源信息-->
<select id="showHouse" resultMap="resultShowHouse" parameterType="hashmap">
    SELECT
    h.h_id,
    h.h_area,
    h.h_zarea,
    address.address_name,
    message.message_name,
    outdoors.outdoors_name,
    ridgepole.ridgepole_name,
    state.state_name,
    construction.construction_name,
    nature.nature_name
    FROM tb_house h ,address,message,ridgepole,state,outdoors,construction,nature
    WHERE
    h.h_address = address.address_id AND
    h.h_message = message.message_id AND
    h.h_ridgepole = ridgepole.ridgepole_id AND
    h.h_outdoors = outdoors.outdoors_id AND
    h.h_state = state.state_id AND
    h.h_nature =nature.nature_id AND
    h.h_construction=construction.construction_id AND
    isdel =0
    limit ${pageNo},${pageSize}
</select>

<!--查询所有房源-->
    <resultMap id="resultShowHouse" type="hashmap">
        <id column="h_id" property="id"></id>
        <result column="h_area" property="area"></result>
        <result column="h_zarea" property="zarea"></result>
        <result column="construction_name" property="construction"></result>
        <result column="nature_name" property="nature"></result>
        <result column="address_name" property="address_name"></result>
        <result column="message_name" property="message_name"></result>
        <result column="outdoors_name" property="outdoors_name"></result>
        <result column="ridgepole_name" property="ridgepole_name"></result>
        <result column="state_name" property="state_name"></result>
    </resultMap>

获取数据库总信息条数

<!--获取数据库总数据数-->
<select id="getCount" resultType="int">
    SELECT
   count(h_id)
    FROM tb_house
    WHERE
    isdel = 0
</select>

这里省略service层和utiis 层代码

//  设置接收参数的编码格式。
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html charset=utf-8");
//创建输出流
PrintWriter out = response.getWriter();
// 获取请求资源路径。
String uri = request.getRequestURI();
// 截取请求名。
String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
//展示所有房源信息
if (path.equals("/showHouse")){
    HashMap<String,Integer> map = new HashMap<>();

    int pageSize =5;
    Integer pageNo = Integer.parseInt(request.getParameter("pageNo"));
    System.out.println(pageNo);
    map.put("pageSize",pageSize);
    map.put("pageNo",pageNo);
    List<HashMap<String, String>> hashMaps = hif.showHouse(map);

    HashMap<String, String> map1 = new HashMap<>();

    String count = String.valueOf(hif.getCount());

    map1.put("page",count);

    hashMaps.add(map1);

    String hashMap = JSON.toJSONString(hashMaps);
    out.write(hashMap);

前面 getCount()已经查询出数据库的总信息条数了
然后把获取的总数放入HashMap集合搭上从数据库获取的房源信息的List集合的便车由JOSN写出返回到页面
然后来看前端JS代码

//展示所有房源
function showHouse(pageNo) {

    $.ajax({
        type: "GET",
        url: "/house/showHouse.htm?pageNo="+(pageNo-1)*5,
        dataType: "json",
        success:function (data) {
        //截取List集合带来的总信息条数
            var pageCount = data[data.length-1].page;
            //声明最大页数
            var pageMax;
            if(pageCount%5==0){
                pageMax = pageCount/5;
            }else{
                pageMax = parseInt((pageCount/5)+1)
            }
            $("#showByOutdoors").nextAll().remove();
            for (var i=0;i<data.length-1;i++){
                $("#showByOutdoors").after("<tr>"+
                    "<td><input type='checkbox' name='IDCheck' value='"+data[i].id+"' class='acb' /></td>"+
                    "<td>"+data[i].address_name+"</td>"+
                    "<td>"+data[i].message_name+"&nbsp;"+data[i].ridgepole_name+"</td>"+
                    "<td>"+data[i].area+"<span>m²</span></td>"+
                    "<td>"+data[i].zarea+"<span>m²</span></td>"+
                    "<td>"+data[i].outdoors_name+"</td>"+
                    "<td>"+data[i].construction+"</td>"+
                    "<td>"+data[i].nature+"</td>"+
                    "<td>"+data[i].state_name+"</td>"+
                    "<td>" +
                    "<a href='javascript:;οnclick=update("+data[i].id+")' id='edits"+data[i].id+"'>编辑</a>" +
                    "<a href='javascript:;οnclick=del("+data[i].id+");'>删除</a> " +
                    "</td>" +
                    "</tr>");
            }
            addpage(pageNo,pageMax,pageCount)
        }
    });
}

//分页
function addpage(pageNo,pageMax,pageCount){

    $("#dpage").html("");
    $("#dpage").append(
        "<div class=\"ui_flt\" style=\"height: 30px; line-height: 30px;\">" +
        "共有" +
        "<span class=\"ui_txt_bold04\" id=\"zongnum\">"+pageCount+"</span>" +
        "条记录，当前第" +
        " <span class=\"ui_txt_bold04\">"+pageNo+"/"+pageMax+"</span>" +
        "页" +
        "</div>");
    $("#dpage").append(
        " <div class=\"ui_frt\" >" +
        "<input type=\"button\" value=\"首页\" class=\"ui_input_btn01\"\n" +
        "    οnclick=\"showHouse(1);\"/>\n" +
        "        <input type=\"button\" value=\"上一页\" id='prevpage' class=\"ui_input_btn01\"\n" +
        " />\n" +
        "        <input type=\"button\" value=\"下一页\" id='nextpage' class=\"ui_input_btn01\"\n" +
        " />\n" +
        "        <input type=\"button\" value=\"尾页\" class=\"ui_input_btn01\"\n" +
        "    οnclick=\"showHouse("+(pageMax)+");\" />" +
        "转到第<input type=\"text\" id=\"jumpNumTxt\" class=\"ui_input_txt01\" />页\n" +
        "\t\t\t\t\t\t\t <input type=\"button\" class=\"ui_input_btn01\" value=\"跳转\" οnclick=\"jumpInputPage("+pageMax+");\" />" +
        " </div>");

    $("#prevpage").click(function () {
        if (pageNo==1){
            showHouse(1)
        }else {
            showHouse(parseInt(pageNo)-1)
        }
    });
    $("#nextpage").click(function () {
        if (pageNo==pageMax){
            showHouse(pageMax)
        }else {
            showHouse(parseInt(pageNo)+1)
        }
    })
}

//跳转
function jumpInputPage(totalPage){

    // 如果“跳转页数”不为空
    if($("#jumpNumTxt").val() != ''){
        var pageNum = parseInt($("#jumpNumTxt").val());
        // 如果跳转页数在不合理范围内，则置为1
        if(pageNum<1 | pageNum>totalPage){
            art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'请输入合适的页数，\n自动为您跳到首页', ok:true,});
            pageNum = 1;
        }
        showHouse(pageNum)
    }else{
        // “跳转页数”为空
        art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'请输入合适的页数，\n自动为您跳到首页', ok:true,});
        showHouse(1)
    }
}

随页面加载而加载

$(function () {
    showHouse(1);
    });

html页面代码

<div class="ui_content">
   <div class="ui_tb">
      <table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
         <tr id ="showByOutdoors">
            <th width="30"><input type="checkbox" id="all" onclick="selectOrClearAllCheckbox(this);" />
            </th>
            <th>位置</th>
            <th>房源</th>
            <th>房源面积</th>
            <th>计租面积</th>
            <th>户型</th>
            <th>建筑结构</th>
            <th>租赁性质</th>
            <th>状态</th>
            <th>操作</th>
         </tr>
            <tr>

            </tr>
      </table>
   </div>
   <div  id="dpage" class="ui_tb_h30">
      <div class="ui_flt" style="height: 30px; line-height: 30px;">
         共有
         <span  id="counts" class="ui_txt_bold04">90</span>
         条记录，当前第
         <span class="ui_txt_bold04">1</span>
         <span class="ui_txt_bold04">/</span>
         <span id="sumPage" class="ui_txt_bold04">9</span>
         页
      </div>
      <div class="ui_frt">
         <!--    如果是第一页，则只显示下一页、尾页 -->
         
            <input type="button" value="首页" class="ui_input_btn01"
            onclick="jumpNormalPage(1);"/>
            <input type="button" value="上一页" class="ui_input_btn01"
                onclick="jumpNormalPage(2);"/>
            <input type="button" value="下一页" class="ui_input_btn01"
               onclick="jumpNormalPage(2);" />
            <input type="button" value="尾页" class="ui_input_btn01"
               onclick="jumpNormalPage($('#sumPage').html());" />
         
         
         
         <!--     如果是最后一页，则只显示首页、上一页 -->
         
         转到第<input type="text" id="jumpNumTxt" class="ui_input_txt01" />页
             <input type="button" class="ui_input_btn01" value="跳转" onclick="jumpInputPage(9);" />
      </div>
   </div>
</div>