pagination插件的使用（1）

最新推荐文章于 2023-07-16 22:20:13 发布

原创最新推荐文章于 2023-07-16 22:20:13 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pagination

java笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在JSP中利用Cookie保存用户ID与用户名，同时详细展示了分页功能的具体实现，包括页面布局、JavaScript数据加载及数据绑定过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、cookie的使用：保存登录用户的ID和用户名
在jsp中嵌套servlet代码：

<%
    Cookie[] cookies = request.getCookies();
    String UserId = "undefined";
    String UserName = "";
    System.out.println("userId="+UserId);
    if (cookies != null) {
        for (int i = 0; i < cookies.length; i++) {
            if (cookies[i].getName().equals("UserId")) {
                UserId = java.net.URLDecoder.decode(
                        cookies[i].getValue(), "UTF-8");
            }
            if (cookies[i].getName().equals("UserName")) {
                UserName = java.net.URLDecoder.decode(
                        cookies[i].getValue(), "UTF-8");
            }
        }

    } else {
        UserId = "undefined";

    }
%>

2、分页的实现过程：
效果：
这里写图片描述
（1）、div

<!--第三栏 帖子部分-->
            <div class="tiezi_all">
                <ul class="zhengwen_title" id="zhengwentitle">

                </ul>
                <!--第一栏 分页 -->
                <div class="bbs_fenye1">
                    <div id="Pagination"></div>
                </div>
                <!--第一栏 页数 分页 -->

            </div>

（2）、数据加载（js）:插件的使用

//请求数据  
        function InitTable(page) {                                  
            $.ajax({   
                type: "POST",  
                url: 'frontSelectAllTieZhi',   
                data: {page:page+1,rows:rows},
                dataType: "json",
                async:false,   
                success: function(data) {  
                    $("#zhengwentitle").empty();   //初始化
                    BangDingTieZhi(data);  //绑定数据
                     $("#Pagination").pagination(data.total, {  //设定分页底部菜单栏
                    callback: PageCallback,  
                    prev_text: '上一页',  
                    next_text: '下一页',  
                    items_per_page: rows,  
                    num_display_entries: 3,//连续分页主体部分分页条目数  
                    current_page: page,//当前页索引  
                    num_edge_entries: 2//两侧首尾分页条目数  
                });  

                }  
            });              
        }

（3）、数据的绑定（自定义动态生成jsp代码，更好的方式：arttemple模板）：

function BangDingTieZhi(data){
          $.each(data.rows,function(i,row){
                    //alert(row.FaTieID);
                      if(row.Shihouzhiding==true){
                         //动态绑定置顶帖
                         var myli="<li><span style='display:none;'>"+row.FaTieID+"</span><img src='<%=basePath%>img/zhiding.gif' alt='置顶帖' title='置顶帖'/>"+
                                 "<span class='chanpinleixing'>["+row.TieZhiLeiXing+"]</span>"+
                                 "<span class='tiezhibiaoti'><a href='main/bbs/bbsAtrical_detail_reply.jsp?Tid="+row.FaTieID+"' target='_blank'  style='font-weight: bold;color: #EC1282;'>"
                                 +row.TieZhiTitle+"</a><img class='imgZhiDing' src='<%=basePath%>img/zhidingTitle.png' alt='置顶' title='置顶'/></span>"+
                                "<span class='tiezhi_zuozhe'>"+row.UserName+"</span>"+
                                "<span class='tiezhi_time'>"+row.FaTieTime+"</span>"+
                                "<span class='tiezhi_huifu'>"+row.HuiFuShu+"</span></li>";
                                //将html数据加入到div中显示
                                $("#zhengwentitle").append(myli);
                          }
                          else{
                              //动态绑定非置顶帖
                              //alert(row.FaTieID);
                               var li="<li><span style='display:none;'>"+row.FaTieID+"</span><img src='<%=basePath%>img/normal.gif' alt='普通帖' title='普通帖'/>"
                                        + "<span class='chanpinleixing'>["
                                        + row.TieZhiLeiXing
                                        + "]</span>"
                                        + "<span class='tiezhibiaoti'><a href='main/bbs/bbsAtrical_detail_reply.jsp?Tid="
                                        + row.FaTieID
                                        + "' target='_blank'  style='color: #2D64B3;'>"
                                        + row.TieZhiTitle + "</a></span>"
                                        + "<span class='tiezhi_zuozhe'>"
                                        + row.UserName + "</span>"
                                        + "<span class='tiezhi_time'>"
                                        + row.FaTieTime + "</span>"
                                        + "<span class='tiezhi_huifu'>"
                                        + row.HuiFuShu + "</span></li>";
                                $("#zhengwentitle").append(li);
                            }
                        });
    }