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

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

## 功能效果描述 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]

## 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()
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/65ba106898e84eccaacb855cecee79d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201107200636666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1,size_16,color_FFFFFF,t_70#pic_center