A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

public void SelectProductType(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
                ProductTypeService productTypeService=(ProductTypeService )ObjectFactory.getObject("productTypeService");
                //上面获取proxy层的类,下面用到这个类的方法
                //PageHelper.startPage(Integer.parseInt(pageNo), 3);
                response.setContentType(Constant.CONTENT_TYPE);
                String pageNoStr=request.getParameter("pageNo");
                String pageSizeStr=request.getParameter("pageSize");
                int pageNo=Integer.parseInt(pageNoStr);
                int pageSize=Integer.parseInt(pageSizeStr);
                Page<Object> page =  PageHelper.startPage(pageNo,pageSize);
                List<ProductType> product=productTypeService.findAllType();
                PageInfo<ProductType> pageInfo = new PageInfo<ProductType>(product);
                response.getWriter().print(JSON.toJSONString(pageInfo));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这里获取pageNo,pageSize分别为起始页与每页几个
利用工具PageHelper来设置,利用其中的 pageInfo,将搜查的结果集返回到页面上,最够以Json的形式发给Ajax获取
jsp页面

function isEmpty(val) {
        if (val == null || val == '' || val.typeOf == 'undefined') {
            return true;
        }
        return false;
    }
    /*发送ajax请求获取数据*/
    function loadData(pageNo, pageSize) {
        pageNo = !isEmpty(pageNo) && !isNaN(pageNo) && pageNo > 0 ? pageNo : 1;
        pageSize = !isEmpty(pageSize) && !isNaN(pageSize) && pageSize > 0 ? pageSize :5;

        $.ajax({
            url: '${pageContext.request.contextPath}/sysuser/ProducTypetList.do',
            type: 'post',
            data : {"pageNo":pageNo,"pageSize":pageSize},
            dataType:'json',
            success: function(data){
                var pageNo = data.pageNum;
                var totalPage = data.pages;
                var list = {
                    pruductTypes: data.list
                };
                var html = template('data-template', list);/利用template包list集合写入属性为data-template的javascript中,然后以HTML的形式写入id为data-box的tbody中
                $('#data-box').html(html)

                // 数据加载完成后进行分页器的初始化
                initPaginator(pageNo, totalPage);
            }
        });


    }

   //初始化分页器
    function initPaginator(pageNo, totalPage) {
        // jqueryPage插件
        $('.tcdPageCode').createPage({
            current: pageNo,
            pageCount: totalPage,
            backFn: function(p) {
                loadData(p, '');
            }
        });

    }

    $(function() {
        loadData('${pageNo}');
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
再用工具的时候要导包

  <script type="text/javascript" src="${pageContext.request.contextPath}/js/template-web.js"></script>
                   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
        <!-- jqueryPage -->
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jqueryPage.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jqueryPage.css">
1
2
3
4
5
然后获取的值从页面中输出注意:这中写法的格式{{ }}输出的语句

<tbody id="data-box">
            <script type="text/html" id="data-template">
            {{each pruductTypes  as pro index}}<!--将pruductTypes以pro的形式遍历pruductTypes中的数据-->
<tr>
            <td>{{pro.productTypeId}}</td>         
                        <td>{{pro.productTypeName}}</td>
            <td> {{if pro.productTypeState==1}}启用{{else}}禁用{{/if}} </td>
            <!--{{语法}}括号外呈现页面的语句-->
                        <td>
                                                          <a class="btn btn-primary  btn-xs btn-warning"
                                                           href="javascript:;">
                                                                    修改
                                                                  <span class="glyphicon glyphicon-pencil"></span>
                                                          </a>
                                                          <a class="btn btn-primary btn-xs btn-danger" href="javascript:;">
                                                                  禁用
                                                                  <span class="glyphicon glyphicon-remove"></span>
                                                          </a>
                          </td>
</tr>
                {{/each}}
            </script>
             </tbody>
                             <div class="tcdPageCode"></div><!--工具中的分页插件放的位置,根据类选择器来定义-->
---------------------
【转载,仅作分享,侵删】
作者:困惑的阿星
原文:https://blog.csdn.net/qq_40183281/article/details/86176719


2 个回复

倒序浏览
多谢楼主,学到了一点新东西。
回复 使用道具 举报
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马