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

来源：互联网发布：java short 范围编辑：程序博客网时间：2024/06/08 03:55
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>
阅读全文
0 0