ssh 通过select实现分类显示商品及分页显示

ssh 通过select实现分类显示商品及分页显示

1.使用jquery来写和ajax来实现。

//用这个主要是刚进入页面时网页不会自动查询第一个，你也可以设置默认值用ajax查询
$(function() {

      $.ajax({
            url:"selectCategory.action",//请求名称
            type:"post",//请求类型
            data:{"lb.lId":1},
            dataType:"json",//数据类型
            success:function(data){
                var pn = 1;
                var totalCount = data.length; // 总记录数 
                var pageSize = 4; // 每页显示几条记录 
                var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
                var startPage = pageSize * (pn - 1); 
                var endPage = startPage + pageSize - 1; 

                var s="";
                if (pageTotal == 1) {   // 当只有一页时 
                      for (var j = 0; j < totalCount; j++) {
                        var category=data[j];
                        s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdateCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } else { 
                      for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
                        if( j == totalCount){ 
                          break;    // 当遍历到最后一条记录时，跳出循环 
                        } 
                      var category=data[j];
                    s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdateCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } 
                    //json是后台一个list转换而成的
                    $("#tbb").html(s);

                  $("#next").click(function() { 
                      if (pn == pageTotal) { 

                        pn = pageTotal; 
                      }else if(pageTotal=="0"){ 
                       s +='<p>此类别没有商品，请添加</p>';
                    $(".ppp").html(s);
                   pn=1;
                  gotoPage(pn); 
                  }  else { 
                        pn++; 
                        gotoPage(pn); 
                      } 
                    }); 
                $("#prev").click(function() { 
                      if (pn == 1) { 

                        pn = 1; 
                      } else { 
                        pn--; 
                        gotoPage(pn); 
                      } 
                    })
                },
            error:function(e){
                alert(e.status);

            },
        });
    //这个是当select的值改变后调用的方法
      $("#lb").change(function(){
          $.ajax({
            url:"selectCategory.action",//请求名称
            type:"post",//请求类型
            data:{"lb.lId":$(this).val(),"pageNum":1},
            dataType:"json",//数据类型
            success:function(data){
                var pn = 1;
                var totalCount = data.length; // 总记录数 
                var pageSize = 4; // 每页显示几条记录 
                var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
                var startPage = pageSize * (pn - 1); 
                var endPage = startPage + pageSize - 1; 

                var s="";
                 $(".current-page").text(pn); 
                if (pageTotal == 1) {   // 当只有一页时 
                      for (var j = 0; j < totalCount; j++) {
                        var category=data[j];
                        s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdateCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } else { 
                      for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
                        if( j == totalCount){ 
                          break;    // 当遍历到最后一条记录时，跳出循环 
                        } 
                      var category=data[j];
                    s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdatCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } 
                    //json是后台一个list转换而成的
                    $("#tbb").html(s);
                    if(pageTotal=="0"){
                         s +='<p>此类别没有商品，请添加</p>';
                       $(".ppp").html(s);
                    }else{
                         $(".ppp").html("");
                    }
                  $("#next").click(function() { 
                      if (pn == pageTotal) { 

                        pn = pageTotal; 
                      }else if(pageTotal=="0"){ 

                       pn=1;
                       gotoPage(pn); 
                      }  else { 
                        pn++; 
                        gotoPage(pn); 
                      } 
                    }); 
                $("#prev").click(function() { 
                      if (pn == 1) { 

                        pn = 1; 
                      } else{
                          pn--; 
                        gotoPage(pn); 
                      }
                    });
                },
            error:function(e){
                alert(e.status);

            }
        });
      });

      ##//这个是分页查询以及上一页下一页
      function page(pn){
          $.ajax({
            url:"selectCategory.action",//请求名称
            type:"post",//请求类型
            data:{"lb.lId":$("#lb").val()},
            dataType:"json",//数据类型
            success:function(data){
                var totalCount = data.length; // 总记录数 
                var pageSize = 4; // 每页显示几条记录 
                var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
                var startPage = pageSize * (pn - 1); 
                var endPage = startPage + pageSize - 1; 

                var s="";

                if (pageTotal == 1) {   // 当只有一页时 
                      for (var j = 0; j < totalCount; j++) {
                        var category=data[j];
                        s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdateCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } else { 
                      for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
                        if( j == totalCount){ 
                          break;    // 当遍历到最后一条记录时，跳出循环 
                        } 
                      var category=data[j];
                    s +='<tr><td>'+category.cId+'</td><td>'+category.cName+'</td><td>'+category.cImg+'</td><td>'+category.cPrice+'</td><td><a href="ToUpdateCategory.action?category.cId='+category.cId+'" class="tablelink">修改</a>'+'         '+'<a href="DeleteCategory.action?category.cId='+category.cId+'" class="tablelink" ">删除</a></td></tr>';

                      } 
                    } 
                    //json是后台一个list转换而成的
                    $("#tbb").html(s);
                  $("#next").click(function() { 
                      if (pn == pageTotal) { 

                        pn = pageTotal; 
                      }else if(pageTotal=="0"){ 

                       gotoPage(1); 
                  }  else { 
                        pn++; 
                        gotoPage(pn); 
                      } 
                    }); 
                $("#prev").click(function() { 
                      if (pn == 1) { 

                        pn = 1; 
                      } else { 
                        pn--; 
                        gotoPage(pn); 
                      } 
                    });
                },
            error:function(e){
                alert(e.status);

            }
        });
      };

      function gotoPage(pn) { 

          $(".current-page").text(pn); 
          page(pn); 
        } 
        $(function() { 
          getPage(); 
        });
    }); 

</script>