05我的文件目录分页

我的文件

需要做分页的入口：

（1）home页面左侧“我的文件”导航

（2）查询：“我的文件”页面中的查询按钮

（3）分页的导航：“我的文件”页面中的页码导航栏

工具：后端：pageHelper，前端：pagination

前端：显示表格和页码

一、预期效果

1、home页面：

2、点击“我的文件”：可以显示列有文件信息的列表；默认显示第一页数据，每页显示5条数据。

3、点击页码导航栏中的页码，可以跳转到对应的页面。

4、在搜索框中输入关键词可以查找对应的文件，并显示在下方的文件信息列表中。

二、分页查询后端

1、添加依赖，引入pageHelper

（1）依赖——注意版本不能过高！

<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>4.1.6</version>
</dependency>

（2）在applicationContext.xml配置文件中的SqlSessionFactoryBean配置下Mybatis插件

<!--用SqlSessionFactoryBean创建SqlSessionFactory对象-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"/>
    <property name="configLocation" value="classpath:conf/mybatis.xml"/>
    <property name="plugins">
        <array>
            <!--配置PageHelper插件-->
            <bean class="com.github.pagehelper.PageHelper">
                <property name="properties">
                    <props>
                        <!--配置数据库方言，告诉当前使用的数据库-->
                        <prop key="dialect">mysql</prop>
                        <!--配置页码的合理修正,在1~总页数之间修正页码-->
                        <prop key="reasonable">true</prop>
                    </props>
                </property>
            </bean>
        </array>
    </property>
</bean>

2、编写sql语句，用于关键词搜索查询。

查询语句：

concat函数：将多个字符串连接成一个字符串。

模糊查询：where login_acct like contact("%",#{keyword},"%")

<select id="selectFileByKeyword" resultType="FileInfo">
select name,size,uploadTime,type from file where name like concat("%",#{keyword},"%") or type like concat("%",#{keyword},"%")
</select>

3、编写service方法

public class FileInfoServiceImpl implements FileInfoService {
    @Resource
    FileInfoDao fileInfoDao;
    //参数：关键词和页码，条数
    @Override
    public PageInfo<FileInfo> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
        //1、调用PageHelper的静态方法开启分页功能
        PageHelper.startPage(pageNum,pageSize);
        //2、执行查询
        List<FileInfo> list =fileInfoDao.selectFileByKeyword(keyword);
        //3、封装到PageInfo对象中
        return new PageInfo<>(list);
    }
}

4、编写controller方法

给keyword、pageNum、pageSize三个参数设置默认值，当前端的请求没有携带对应参数时，可以使用默认值。

这一设置主要用于点击“我的文件”时，默认展示全部文件。

@Controller
@RequestMapping("/file")
public class FileInfoController {

    @Resource
    FileInfoService fileInfoService;
    //使用@RequestParam中的defaultValue属性指定默认值，当请求中没有携带对应参数时，可使用默认值
    @RequestMapping("/pageInfo")
    @ResponseBody
    public  PageInfo<FileInfo> getPageInfo(
        @RequestParam(value="keyword",defaultValue ="")String keyword,
        @RequestParam(value="pageNum",defaultValue ="1")Integer pageNum,
        @RequestParam(value="pageSize",defaultValue ="5")Integer pageSize){
        //调用service方法获取数据
        PageInfo<FileInfo>pageInfo=
        fileInfoService.getPageInfo(keyword,pageNum,pageSize);
        return  pageInfo;
    }

}

三、前端（基于ajax）

0、从home跳转到“我的文件”，进行文件管理。

在home页面点击“我的文件”，前端请求访问页面fileinfo.jsp。但是由于前端的请求无法直接访问WEB-INF中的数据，所以在dipatcherServlet中配置视图控制器，跳转到fileinfo.jsp。

<mvc:view-controller path="/file/fileinfo" view-name="fileinfo"></mvc:view-controller>

前端“我的文件”链接指向的请求地址：

<a href="file/fileinfo">"我的文件"/a>

1、前端发送ajax请求，

请求参数：keyword、pageNum、pageSize

返回值：response.list

$(function () {
            //初始化分页数据
            window.pageNum=1;
            window.pageSize=5;
            window.keyword="";
            loadPageInfo(1);
            //初始化页码导航条
          //  initPagination();
            // $("#btnLoader").click(function () {
            //     loadStudentData();
            // })
        })
        //加载分页信息
        function loadPageInfo(pagenum) {

            $.ajax({
                url:"file/pageInfo",
                type:"get",
                data:{
                    "keyword":window.keyword,
                    "pageNum":pagenum,
                    "pageSize":window.pageSize,
                },
                dataType:"json",
                success:function (response) {
                    var pageInfo=response;
                    //清除旧的数据
                    $("#info").html("");
                    $.each(response.list,function(i,n){
                        $("#info").append("<tr>")
                            .append("<th>"+n.name+"</th>")
                            .append("<th>"+n.uploadTime+"</th>")
                            .append("<th>"+n.type+"</th>")
                            .append("<th>"+n.size+"</th>")
                            .append("<tr>")
                    })
                    generateNavigator(pageInfo);
                }
            });
        }
</script>

2、生成页码导航

使用工具 pagination分页插件:

（1）引入依赖资源，注意顺序：pagination要在jquery的后面！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAfPm6eR-1634651416372)(C:\Users\rr\AppData\Roaming\Typora\typora-user-images\image-20210802181751152.png)]

（2）使用Pagination要求的div标签来替换bootstrap标签提供的页码部分（去掉ul部分）

<div style="text-align:center">
    <div id="Pagination" class="pagination"><!--这里显示分页--></div>
</div>

(3) js代码：

注意回调函数放在generateNavigator的前面，否则会报错：callback is not a function

//翻页时的回调函数,声明以后不是我们自己调用的，交给系统/框架调用
function pageSelectCallback(pageIndex,jQuery) {
    //修改全局变量的pageNum属性
    Window.pageNum=pageIndex+1;
    //alert(window.pageNum);
    loadPageInfo(Window.pageNum);
    //取消页码超链接的默认行为
    return false;
}
//生成分页导航栏
function generateNavigator(pageInfo) {
    //获取总记录数
    var totalRecord=pageInfo.total;
    $("#Pagination").pagination(totalRecord, {
        num_edge_entries: 3, //边缘页数
        num_display_entries: 5, //主体页数
        callback: pageSelectCallback,
        items_per_page: pageInfo.pageSize, //每页显示项数
        current_page:pageInfo.pageNum-1,
        prev_text: "前一页",
        next_text: "后一页"
    });
}

四、搜索查询

为“搜索按钮添加一个click单击事件”查询带有关键字的数据。

$("#searchBtn").click(function () {
    window.keyword=$("#keywordinput").val();
    loadPageInfo(window.pageNum);
});

五、报错

1、mapper文件报错

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.example.dao.FileInfoDao.selectFileByKeyword
	org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:235)
	org.apache.ibatis.binding.MapperMethod.<init>(MapperMethod.java:53)
	org.apache.ibatis.binding.MapperProxy.lambda$cachedInvoker$0(MapperProxy.java:108)

原因：

1、resultType中的返回值没有写全限定名称

2、xml和dao接口名称不一致

2、文.件[/WEB-INF/jsp/file/pageInfo.jsp] 未找到

原因：

1、返回的是数据，但是没有添加ResponseBody注解

3、未定义的callback

原因：没有研究过java script，不知道为什么callback回调函数必须放在调用该函数的函数前面，难道和C++一样 ，函数必须先声明，声明之后才能调用？

4、点击页码导航，跳转失败，一直跳转到默认的第1页

原因：查看了浏览器中传输的请求参数，发现请求参数没有被更新，说明我在回调函数中对全局变量PageNum的更新没有被传入到ajax请求参数中。

修改：使用传参方式，在ajax的data中，不直接传window.pageNum,而是为该函数定义了一个形参，通过形参传值。