基于js分页功能的实现-秋月博客

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).分页页面

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).添加元素显示的的页面

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();
   }

}

目录CONTENT

基于js分页功能的实现

评论区