지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법

php中世界最好的语言
풀어 주다： 2018-03-15 13:19:23
원래의
1984명이 탐색했습니다.

이번에는 jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법을 보여드리겠습니다. jQuery+ajax를 사용하여 동적 데이터 페이징을 구현할 때 주의해야 할 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 봐.

jQuery를 사용하여 페이지 번호 점프 동적 데이터 페이징 효과를 얻으세요. 이 효과의 가장 확실한 효과는 데이터 로드 및 페이지 새로 고침 과정이 없다는 것입니다. 소규모 데이터 및 다단계 웹을 로드할 때도 매우 효과적입니다. 페이지.

아래에는 모든 효과 코드가 나와 있습니다.

HTML 전체 코드: 

<!DOCTYPE html>
<html>
<head>
<met
    }
  });*/
</script>
</body>
</html>
로그인 후 복사

where 실제 작업 중에 JS를 사용하여 원하는 데이터 형식을 얻기 위한 json을 얻을 수 있습니다.

shujv2.js 코드: 

var data = [ {
  "warehouseID" : "3750",
  "warehouseCode" : "CK20140825061813777127447",
  "province" : "上海",
  "endProvince" : "江苏省",
  "provinceId" : "310000",
  "cityId" : "310100",
  "areaId" : "310109",
  "endProvinceId" : "320000",
  "endCityId" : "320600",
  "endAreaId" : "320612",
  "materialId" : "0",
  "material" : "",
  "specId" : "0",
  "productNId" : "0",
  "varietiesId" : "8",
  "varietiesTypeId" : "621",
  "taskCode" : "T1611230481",
  "customerID" : "20147",
  "customerName" : "阿斯蒂芬",
  "createDate" : "2016-11-23 18:41:40",
  "wareHouseName" : "找钢仓库",
  "city" : "上海市",
  "area" : "虹口区",
  "startAddr" : "逸仙路25号",
  "endCity" : "南通市",
  "endArea" : "通州区",
  "endAddr" : "1",
  "varietiesTypeName" : "钢材",
  "varieties" : "线材",
  "productN" : "",
  "spec" : "",
  "weight" : "1",
  "num" : "1",
  "receiver" : "",
  "receiverPhone" : "1",
  "remark" : "",
  "label" : "",
  "startAddrNumber" : "1",
  "varietiesNumber" : "1",
  "contactsId" : "22494",
  "contactsName" : "刘宇测试"
 } ]
로그인 후 복사

front-endPage.js 페이지입니다. 로딩 효과가 달성됩니다. 코드는 다음과 같습니다. 

;(function($, window, document,undefined) {
 var cjjTable = function(ele,opt){
    this.$element = ele,
    this.defaults ={
       title:null,
       body:null,
       display:null,
       pageNUmber:8,
       pageLength:0,
       url:null,
       dbTrclick:function(that){
       }
    }
    this.options = $.extend({},this.defaults,opt)
 }
 cjjTable.prototype = {
    start:function(){
      var _this = this;
      var titlelistBox="";
      var titlesmall="";
      for(var i=0;i<_this.options.title.length;i++){
        titlesmall+="<th>"+_this.options.title[i]+"</th>";
        titlelistBox = titlesmall;
      }
      var json = "";
      var maxpagenumberBox = 7;//选择项最多的数量
      var json = this.options.url;
      var histroy_DDBox = "";
      var histroy_DD = "";
      var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
      for (var i = 0; i <firstPageNumber; i++) {
        var bodyBigBox="";
        var bodyBox="";
        for(var x=0;x<_this.options.body.length;x++){
          var type = _this.options.body[x];
          var display = "table-cell";
          if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){
            display = _this.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td class=&#39;"+type+"&#39; style=&#39;display:"+display+"&#39;>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class=&#39;new_productBox&#39;>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $( _this.$element.selector+" table tfoot").html("");
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
        $( _this.$element.selector+" .nextPage").css("display", "none");
        $(_this.$element.selector+" .endPage").css("display", "none");
      }
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) < maxpagenumberBox) {
        for (var i = 0; i < Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      var buttonTfoot = "<tr>"+
      "<td colspan=&#39;"+_this.options.title.length+"&#39;>"+
        "<p style=&#39;float:right;margin-left:10px;&#39; class=&#39;tfootRight&#39;>"+
          "<input placeholder=&#39;输入页码&#39; type=&#39;text&#39;>"+
          "<button>确定</button>"+
          "</p>"+
          "<p style=&#39;float:right&#39;>"+
            "<span class=&#39;firstPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;&#39;>首页</span>"+
            "<span class=&#39;lastPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;&#39;>上一页</span>"+
            "<ul class=&#39;pagenumberBox&#39;>"+maxpagenumberBoxBigbox+"</ul>"+
            "<input class=&#39;typeNumber&#39; type=&#39;text&#39; value=&#39;1&#39; onfocus=&#39;this.blur()&#39; style=&#39;display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;&#39;>"+
            "<span class=&#39;nextPage&#39; style=&#39;margin-right:10px;float:left;cursor: pointer;&#39;>下一页</span>"+
            "<span class=&#39;endPage&#39; style=&#39;cursor: pointer;float:left;&#39;>尾页</span>"+
          "</p>"+
          "<p style=&#39;float:right&#39;>"+
             "<select><option value=&#39;5&#39;>5</option><option value=&#39;10&#39;>10</option><option value=&#39;20&#39;>20</option><option value=&#39;50&#39;>50</option><option value=&#39;100&#39;>100</option><option value=&#39;200&#39;>200</option><option value=&#39;500&#39;>500</option></select>"
          "</p>"+
        "</p>"+
      "<td>"+
      "<tr>";
      _this.$element.html("<table class=&#39;CJJ-Table&#39;><thead>"+titlelistBox+"</thead><tbody>"+histroy_DDBox+"</tbody><tfoot>"+buttonTfoot+"</tfoot></table>");
      $(_this.$element.selector+ ' select').val(_this.options.pageNUmber);
      if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)<2){
        $(_this.$element.selector+ &#39; .endPage&#39;).hide();
        $(_this.$element.selector+ &#39; .nextPage&#39;).hide();
      }
      $(_this.$element.selector+ &#39; .tfootRight input&#39;).unbind(&#39;keyup&#39;).keyup(function(){
        _this.inputKeyup(_this,maxpagenumberBox,json);
      })
      $(_this.$element.selector+ &#39; .tfootRight button&#39;).unbind(&#39;click&#39;).click(function(){
         _this.button(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .firstPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.firstPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .endPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.endPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .nextPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.nextPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; table tfoot ul li&#39;).unbind(&#39;click&#39;).click(function(){
         _this.nextTableLi(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ &#39; .lastPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.lastPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; select&#39;).unbind(&#39;change&#39;).change(function(){
         _this.select(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ &#39; tbody tr&#39;).unbind(&#39;dblclick&#39;).dblclick(function(){
         _this.options.dbTrclick($(this));
      });
    },
    inputKeyup:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ " .tfootRight input").val();
      if (val == 0) {
        var val2 = val.replace(0, "");
      } else if (val > 0 && val <= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {
        var val2 = val.replace(/[^0-9]/g, "");
      } else if (val > Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
        var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
      }
      $(e.$element.selector+ ' .tfootRight input').val(val2);
    },
    button:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ ' .tfootRight input').val();
      $(e.$element.selector+ " .typeNumber").val(val);
      if (val != "") {
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    firstPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    endPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    nextPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      $(e.$element.selector+ " .typeNumber").val(number * 1 + 1);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
  
    },
    nextTableLi:function(e,maxpagenumberBox,json,that){
      var val = that.html();
      $(e.$element.selector+ " .typeNumber").val(val);
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    lastPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ " .typeNumber").val();
      if (number > 1) {
        $(e.$element.selector+ " .typeNumber").val(number * 1 - 1);
        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    select:function(e,maxpagenumberBox,json,that){
      var select = that.find("option:selected").val();
      $(e.$element.selector+ " .typeNumber").val(1); 
      e.options.pageNUmber = select;
      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
      var histroy_DDBox = "";
      var histroy_DD = "";
      var lastPage=Pagenumber<Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;
      for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) {
        var bodyBigBox="";
        var bodyBox="";
        for(var x=0;x<e.options.body.length;x++){
          var type = e.options.body[x];
          var display = "table-cell";
          if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){
            display = e.options.display[x]*1==1?"table-cell":"none";
          }
          bodyBox+="<td class=&#39;"+type+"&#39; style=&#39;display:"+display+"&#39;>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class=&#39;new_productBox&#39;>"+bodyBigBox+"</tr>";
        histroy_DDBox = histroy_DD;
      }
      $(that.selector+" table tbody").html(histroy_DD);
      var maxpagenumberBoxBigbox = "";
      var maxpagenumberBoxBig = "";
      if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) < maxpagenumberBox) {
        for (var i = 0; i < Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      $(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);
      if (Pagenumber == 1) {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();
      } else {
        $(that.selector+" .firstPage,"+that.selector+" .lastPage").show();
      }
      if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").hide();
      } else {
        $(that.selector+" .endPage,"+that.selector+" .nextPage").show();
      }
      if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {
        if (Pagenumber > 0 && Pagenumber < Math.ceil(maxpagenumberBox / 2) * 1 + 1) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = 0; i < maxpagenumberBox; i++) {
            maxpagenumberBoxBig += &#39;<li>' + (i * 1 + 1) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber < Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i < Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {
            maxpagenumberBoxBig += &#39;<li>' + (i) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');
        } else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
          maxpagenumberBoxBigbox = "";
          maxpagenumberBoxBig = "";
          for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i < Math.ceil(e.options.pageLength / pageNUmber); i++) {
            maxpagenumberBoxBig += &#39;<li>' + (i * 1 + 1) + '</li>';
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');
        }
      } else {
        if (Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
          $(that.selector+' .pagenumberBox li').removeClass('pagenumberBoxLi');
          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
        }
      }
      $(that.selector+ ' table tfoot ul li').unbind('click').click(function(){
         e.nextTableLi(e,maxpagenumberBox,json,$(this));
      });
      $(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
         e.options.dbTrclick($(this));
      });
    }  
 }
 $.fn.CJJTable = function(options){
     var cjj = new cjjTable(this,options);
     return cjj.start();
 }
})(jQuery, window, document);
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

HTML+CSS+jQuery 캐러셀 광고 이미지 구현

html+css+jquery 바닥 스크롤 효과 구현

위 내용은 jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
어때요? 数据
원천：php.cn
이전 기사：jQuery에서 ajax를 사용하여 데이터 할당을 추출하는 방법 다음 기사：C3+jQuery는 애니메이션 효과와 콜백 함수를 생성합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿