彤筹网ssm（二）Day06之查 分页角色维护的分页（ajax）

AJAX分页

后端

1. 建角色表

CREATE TABLE ssm2_tongchou.t_role( id INT NOT NULL, name CHAR(100), PRIMARY KEY (id) );
ALTER TABLE ssm2_tongchou.t_role CHANGE id id INT NOT NULL AUTO_INCREMENT;

2. 逆向生成，更改generatorConfig.xml中的执行目标对象类，执行逆向生成命令

        <table tableName="t_role" domainObjectName="Role"></table>

3. 在RoleMapper中添写带关键字搜索的查询

<select id="selectRoleByKeyword" resultMap="BaseResultMap">
    select id,name from t_role
    where name like concat("%",#{keyword},"%")
</select>

4. RoleMapper接口抽象方法编写

    List<Role> selectRoleByKeyword(String keyword);

5. service层及实现

@Override
    public PageInfo<Role> getPageInfo(Integer pageNum, Integer pageSize, String keyword) {
    
    
        PageHelper.startPage(pageNum, pageSize); // 开启分页
        List<Role> roleList = roleMapper.selectRoleByKeyword(keyword); // 执行查询
        return new PageInfo<>(roleList); // 封装为PageInfo对象返回
    }

6. handler层

@Controller
public class RoleHandler {
    
    

    @Autowired
    private RoleService roleService;

    @ResponseBody
    @RequestMapping("/role/get/page/info.json") // 因为返回json，扩展名写.json
    public ResultEntity<PageInfo<Role>> getPageInfo(
            @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
            @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize,
            @RequestParam(value = "keyword",defaultValue = "") String keyword // 获取浏览器发送过来的请求参数
         ){
    
    

            PageInfo<Role> pageInfo = roleService.getPageInfo(pageNum, pageSize, keyword);
            return ResultEntity.successWithData(pageInfo); // 封装到ResultEntity对象中返回json，如果抛出异常，交给异常映射机制处理

    }
}

前端

1. springmvc配置文件dispatcherServlet-servlet.xml中添加

<!--    角色：前往角色页面，必须写.html-->
    <mvc:view-controller path="/role/to/page.html" view-name="role-page"/>

2. 修改角色维护超链接sidebar

<a href="role/to/page.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a>

3. 初始化分页数据（作用极大）

$(function () {
    
    
    window.pageNum = 1;
    window.pageSize = 5;
    window.keyword = "";
});

4. 引入外部/tongchou/my-role.js，更改role-page.jsp

<link rel="stylesheet" href="/css/pagination.css">
<script src="/jquery/jquery.pagination.js"></script>
<script src="/tongchou/my-role.js"></script>

<tfoot>
                                <tr>
                                    <td colspan="6" align="center">
                                        <div id="paginationId" class="pagination"></div>
                                    </td>
                                </tr>

                                </tfoot>

5. 编写my-role.js文件

function generatePage() {
    
      // 执行分页
    // 远程获取分页数据
    var pageInfo = getPageInfoRemote();
    fillTableBody(pageInfo);// 填充表格体
}

function getPageInfoRemote() {
    
     // 发AJAX请求获取远程访问服务器端获取的分页数据
    var ajaxResult = $.ajax({
    
    
        async:false,
        url:"role/get/page/info.json",
        type:"post",
        data:{
    
    
            "pageNum":window.pageNum,
            "pageSize":window.pageSize,
            "keyword":window.keyword
        },
        dataType:"json" // 服务器返回的数据用json格式解析
    });
    // 判断当前响应状态码是否为200。失败让当前函数停止执行
    var statusCode = ajaxResult.status;
    if (statusCode != 200){
    
    
        layer.msg("服务器端程序调用失败，响应状态码="+statusCode+"说明信息"+ajaxResult.statusText);
        return null;
    }

    var resultEntity = ajaxResult.responseJSON;

    var result = resultEntity.result;


    if (result == "FAILED"){
    
    
        layer.msg(result)
        // layer.msg(resultEntity.message);
        return null;
    }

    // 确认result成功后获取pageInfo
    var pageInfo = resultEntity.data;

    return pageInfo;
}

function fillTableBody(pageInfo) {
    
     // 表格体
     // 掏空旧数据
    $("#role-page-body").empty();

    // 判断pageInfo是否有效
    if (pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0){
    
    
        $("#role-page-body").append("<tr><td colspan='4'>抱歉，没有查询到您想要的信息</td></tr>");
        return;
    }

    // 使用pageInfo的list属性填充tbody
    for (var i = 0; i < pageInfo.list.length; i++) {
    
    
        var role = pageInfo.list[i];
        var roleId = role.id;
        var roleName = role.name;
        var numberTd = "<td>"+(i+1)+"</td>";
        var checkboxTd = "<td><input type='checkbox'></td>";
        var roleNameTd = "<td>"+roleName+"</td>";
        var checkBtn = "<button type=\"button\" class=\"btn btn-success btn-xs\"><i class=\" glyphicon glyphicon-check\"></i></button>";
        var pencilBtn = "<button type=\"button\" class=\"btn btn-primary btn-xs\"><i class=\" glyphicon glyphicon-pencil\"></i></button>";
        var removeBtn = "<button type=\"button\" class=\"btn btn-danger btn-xs\"><i class=\" glyphicon glyphicon-remove\"></i></button>";
        var buttonTd = "<td>"+" "+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
        var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>"
        $("#role-page-body").append(tr);
    }
    generateNavigator(pageInfo);
}

function generateNavigator(pageInfo) {
    
     // 生成分页翻页条
    var totalRecord = pageInfo.total;
    var properties = {
    
    
        num_edge_entries:3,
        num_display_entries:4,
        callback:paginationCallback,
        items_per_page:pageInfo.pageSize,
        current_page:pageInfo.pageNum-1,
        prev_text:"上一页",
        next_text:"下一页"
    }
    $("#paginationId").pagination(totalRecord,properties);
}

function paginationCallback(pageIndex,jQuery) {
    
     // 翻页时的回调函数
    window.pageNum = pageIndex + 1;
    generatePage();
    return false;
}

6. 基于ajax技术的关键字搜索
   点击查询按钮，绑定单击响应函数事件。获取关键词数据赋值给window.keyword,调用执行分页函数即可

<script>
    $(function () {
    
    
        window.pageNum = 1;
        window.pageSize = 5;
        window.keyword = "";

        generatePage(); // 执行分页

        // 给查询按钮绑定点击事件
        $("#searchBtn").click(function () {
    
    
            window.keyword = $("#keywordInput").val(); // 获取关键词数据赋值给keyword这个全局变量
            generatePage();// 执行分页函数刷新页面
        });
    });
</script>