侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

基于js分页功能的实现

2023-12-17 星期日 / 0 评论 / 0 点赞 / 18 阅读 / 24575 字

1.array数组的使用1).创建数组Array giftArr= new Array();1).添加元素:push.说明:在js脚本发起一个ajax请求,从后台获取一个实体对象(data),gift

1.array数组的使用

1).创建数组

Array giftArr=  new Array();

1).添加元素:push.

说明:在js脚本发起一个ajax请求,从后台获取一个实体对象(data),giftArr.push(data).

2).删除or修改元素:splice.

example: 删除一个元素。giftArr.splice(1,1)。第一个1代表数组的角标,第二个1表示删除的个数。

修改元素:arr.splice(1,1,giftArr[1]),giftArr[i]表示新元素。

2.分页插件的使用

                    /**
                     * 分页函数
                     */
                    function getQuery(len) {              //len表示数组的长度
                        /**
                         * 添加的内分页
                         */
                        alert("len-------------" + len);
                        if (len <= 5) {
                            addPageCount = 1;                //addPageCount表示总页数
                        } else {
                            if (len % 5 == 0) {
                                addPageCount = len / 5;
                            } else {
                                addPageCount = Math.floor((len / 5)) + 1;
                            }
                        }
                      
                        $('#itemPagination')
                                .jqPaginator(
                                        {
                                            totalPages : addPageCount,
                                            visiblePages : 10,          //visiblePages表示显示的最大页码
                                            currentPage : 1,                //currentPage表示当前显示的页码
                                            prev : '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
                                            page : '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                                            next : '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
                                            onPageChange : function(num, type) {
                                                clearItemTable();
                                                alert("num-----------"+num);
                                                var itemTable = $("#itemsTable");
                                                var start = num * 5 - 5;
                                                var end = num * 5;
                                                rowNum++;
                                                var idx = 0;
                                                alert("start---------"+start);
                                                    for (i = start; i < giftArr.length; i++) {
                                                        if(idx<5){
                                                            addItemContent(itemTable,giftArr[i],i);
                                                            idx++;
                                                        }
                                                }
                                            }
                                        });
                    }

3.Demo

1).分页页面

            <table id="itemsTable" class="table table-bordered">
                 <tr>
                  <td style="text-align: center; width: 100px;">礼品编号</td>
                  <td style="text-align: center; width: 100px;">礼品名称</td>
                  <td style="text-align: center; width: 100px;">单价</td>
                  <td style="text-align: center; width: 100px;">数量</td>
                  <td style="text-align: center; width: 100px;">总价</td>
                  <td style="text-align: center; width: 100px;">操作</td>
                 </tr>
             </table>
               </div>
              <div style="text-align: center;">
               <ul class="pagination" id="itemPagination"></ul>
              </div>
              <div style="text-align: center;">
                <div id="InPageResult">
                  <input id="InPageCount" type="hidden" value="${InPageResult.pageCount}" />
                  <input id="InTotalCount" type="hidden" value="${InPageResult.totalCount}" />
                  <input id="InPageIndex" type="hidden" value="${InPageResult.pageIndex}" />
                  <input id="InPageSize" type="hidden" value="${InPageResult.pageSize}" />
                  </div>
                </div>
              </div>

 

2).添加元素

/*
      *
      * 添加礼品
      */
     $("#searchInfor")
       .delegate(
         '#addItem',
         'click',
         function() {

          var itemId = $("#itemId").val();
          var itemName = $("#itemName").val();
          if (itemName != "") {
           var loadProductUrl = "loadGiftInfor.do?id="
             + itemId;
           $
             .ajax({
              url : loadProductUrl,
              dataType : "json",
              success : function(data) {
               alert("successfully");
               if (data != null) {
                var itemTable = $("#itemsTable");
                if (isItemInOrder(
                  itemTable,
                  data) <= 0) {
                 putGiftList(data);

                } else {
                 alert("["
                   + data.giftCode
                   + "]"
                   + data.giftName
                   + " 已存在于库单中..");
                }

                return;
               }

              },
              error : function(data) {
               alert("加载数据出错");
               return;

              }
             });
          } else {
           alert("请选择要添加的礼品!");
          }

         });

/**
      * 存储礼品
      */
     function putGiftList(data) {
      giftArr.push(data);
      len++;
      getQuery(len);// 分页函数
     }

3).添加元素显示的的页面

function addItemContent(itemTable, data, rowNum) {
      var rowContent = "<tr id="
        + data.id
        + "><td style='text-align: center;'><input type='text'  id='giftCode_"
        + data.id + "'  name='details[" + rowNum
        + "].giftCode' itemName='giftCode' value='"
        + data.giftCode
        + "' /><input type='hidden'  id='giftId_"
        + data.id + "'  name='details[" + rowNum
        + "].giftId' itemName='giftId' value='"
        + data.id + "' /></td>";
      rowContent = rowContent
        + "<td style='text-align: center;'><input id='giftName_"
        + data.id + "' type='text' name='details["
        + rowNum
        + "].giftName' itemName='giftName' value='"
        + data.giftName + "' /></td>";
      rowContent = rowContent
        + "<td style='text-align: center;'><input id='salePrice_"
        + data.id + "' type='text' name='details["
        + rowNum
        + "].salePrice' itemName='salePrice' value='"
        + data.salePrice + "'/></td>";
      if(data.total == null || data.total == 'undefined'){
       rowContent = rowContent
       + "<td style='text-align: center;'><input  id='total_"
       + data.id + "' type='text' name='details["
       + rowNum + "].total' rowId='" + rowNum
       + "' itemName='total' /></td>";
     rowContent = rowContent
       + "<td style='text-align: center;'><input id='summery_"
       + data.id + "' type='text' name='details["
       + rowNum + "].summery' rowId='" + rowNum
       + "' itemName='summery' /></td>";
      }
      else{
       
       rowContent = rowContent
       + "<td style='text-align: center;'><input  id='total_"
       + data.id + "' type='text' name='details["
       + rowNum + "].total' rowId='" + rowNum
       + "' itemName='total' value='"+data.total+"'/></td>";
       rowContent = rowContent
       + "<td style='text-align: center;'><input id='summery_"
       + data.id + "' type='text' name='details["
       + rowNum + "].summery' rowId='" + rowNum
       + "' itemName='summery' value='"+data.summery+"'/></td>";
      }
      rowContent = rowContent
        + "<td style='text-align: center;'><button name='delItem' rowId='"
        + rowNum + "' type='button'>删除</button></td>";
      rowContent = rowContent + "</tr>";
      itemTable.append(rowContent);
     }

4).后台存储数据的方法

@RequestMapping(value = "/save", method = RequestMethod.POST)
 public void save(@ModelAttribute("orderInfo") OrderInforVO orderInforVO,
   HttpServletRequest request, HttpServletResponse response) {
  System.out.println("save");
  System.out.println("orderInforVO:" + orderInforVO.getPostCode());
  orderInforVO.setIsdelete(0);
  orderInforVO.setStatus(0);
  orderInforVO.setSender("何人堂");
  orderInforVO.setCreateTime(this.orderInforService.getDate());
  List<OrderDetailVO> details = new ArrayList<OrderDetailVO>(); 
   try {
    
    for(OrderDetailVO od:orderInforVO.getDetails()){
     od.setIsdelete(0);
     od.setCreateTime(this.orderInforService.getDate()
       );
     od.setCreator(this.getOnlineManager(request, response)
       .getLoginName());
     od.setEditor((this.getOnlineManager(request, response)
       .getLoginName()));
     od.setEditTime(this.orderInforService.getDate());
     details.add(od);
    }
    orderInforService.saveOrderInfor(orderInforVO, details);
    response.sendRedirect("list.do");
   } catch (IOException e) {
    e.printStackTrace();
   }
  
 }

广告 广告

评论区