基於js分頁功能的實現

時間 2019-12-01

標籤基於分頁功能實現欄目 JavaScript 简体版

原文原文鏈接

1.array數組的使用javascript

1).建立數組java

Array giftArr= new Array();
ajax

1).添加元素：push.json

說明：在js腳本發起一個ajax請求，從後臺獲取一個實體對象(data)，giftArr.push(data).數組

2).刪除or修改元素：splice.app

example: 刪除一個元素。giftArr.splice(1,1)。第一個1表明數組的角標，第二個1表示刪除的個數。函數

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

2.分頁插件的使用
url

                    /**
                   * 分頁函數
                   */
                   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(); } }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。