saas-export项目-dept记录列表的每页显示条数切换-蒲公英云

saas-export项目-dept记录列表的每页显示条数切换

叁歲伎倆 2022-12-19 13:12 237阅读 0赞

功能效果描述

在这里插入图片描述

DeptController

多传一个pageSize,model.addAttribute("pageSize",pageSize);,用来判断哪个option是selected状态。

@RequestMapping(path="/toList.do",method ={  RequestMethod.GET, RequestMethod.POST})
public String toList(Model model, @RequestParam(defaultValue = "1") Integer curr,
                     @RequestParam(defaultValue = "5")  Integer pageSize){ 
    log.info("toList curr = "+curr);//当前第几页
    log.info("toList pageSize = "+pageSize);//每页记录数
    log.info("toList companyId = "+super.getLoginCompanyId());//指定公司id
    //查询一个分页
    PageInfo<Dept> pi = iDeptService.findByPage(curr, pageSize, super.getLoginCompanyId());
    log.info("toList pi = "+pi);
    model.addAttribute("pi",pi);
    //将pageSize传到页面
    model.addAttribute("pageSize",pageSize);
    return "system/dept/dept-list";
}

page.jsp

用el表达式获取Controller传来的pageSize值，${pageSize==5?'selected':""}，然后再用三元运算符判断，将与之对应的option设置为selected。

<div class="form-group form-inline">
    总共${ pi.pages} 页，共${ pi.total} 条数据。每页
    <select onchange="change()" class="form-control">
        <option ${ pageSize==5?'selected':""}>5</option>
        <option ${ pageSize==10?'selected':""}>10</option>
        <option ${ pageSize==15?'selected':""}>15</option>
        <option  ${ pageSize==20?'selected':""}>20</option>
        <option  ${ pageSize==50?'selected':""}>50</option>
        <option  ${ pageSize==80?'selected':""}>80</option>
    </select> 条
</div>

当select选择框改变时，调用这个chagne方法。

function change() { 
    var options=$("select option:selected"); //获取选中的项
    // alert(options.val()); //拿到选中项的值
    alert(options.text()); //拿到选中项的文本
    var pageSize=options.text();
    document.getElementById("curr").value = 1 //curr=1
    document.getElementById("pageSize").value =pageSize; //动态获取pageSize
        document.getElementById("pageForm").submit()
}