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

jQuery+Ajax는 새로 고침 없는 페이징을 구현합니다.

高洛峰
풀어 주다： 2017-01-10 14:20:29
원래의
1217명이 탐색했습니다.

1. 프론트 데스크에서는 주로 페이징 툴바를 생성해야 합니다.
코드는 아래에 게시되어 있습니다

/**
  * This jQuery plugin displays pagination links inside the selected elements.
  *
  * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  * @version 1.2
  * @param {int} maxentries Number of entries to paginate
  * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
 jQuery.fn.pagination = function(maxentries, opts){
   opts = jQuery.extend({
   items_per_page:10,
   num_display_entries:10,
   current_page:0,
   num_edge_entries:0,
   link_to:"#",
   prev_text:"Prev",
   next_text:"Next",
   ellipse_text:"...",
   prev_show_always:true,
   next_show_always:true,
   callback:function(){return false;}
  },opts||{});
 
   return this.each(function() {
   /**
   * 计算最大分页显示数目
    */
   function numPages() {
     return Math.ceil(maxentries/opts.items_per_page);
    }  
   /**
   * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.
   * @返回 {数组(Array)}
    */
  function getInterval() {
      var ne_half = Math.ceil(opts.num_display_entries/2);
     var np = numPages();
    var upper_limit = np-opts.num_display_entries;
       var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
       var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
       return [start,end];
    }
      
    /**
     * 分页链接事件处理函数
     * @参数 {int} page_id 为新页码
    */
     function pageSelected(page_id, evt){
     current_page = page_id;
      drawLinks();
      var continuePropagation = opts.callback(page_id, panel);
     if (!continuePropagation) {
        if (evt.stopPropagation) {
        evt.stopPropagation();
        }
        else {
         evt.cancelBubble = true;
        }
      }
      return continuePropagation;
   }
    
   /**
    * 此函数将分页链接插入到容器元素中
     */
    function drawLinks() {
      panel.empty();
      var interval = getInterval();
       var np = numPages();
      // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
       var getClickHandler = function(page_id) {
        return function(evt){ return pageSelected(page_id,evt); }
      }
      //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
      var appendItem = function(page_id, appendopts){
        page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
        appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
        if(page_id == current_page){
          var lnk = jQuery("<a href class=&#39;currentPage&#39;>" + (appendopts.text) + "</a>");
        }else{
           var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
            .bind("click", getClickHandler(page_id))
            .attr(&#39;href&#39;, opts.link_to.replace(/__id__/,page_id));    
        }
         if (appendopts.classes) { lnk.addClass(appendopts.classes); }
         panel.append(lnk);
      }
       //产生描述
      panel.append("<span>共有 " + maxentries + " 条记录，当前第 <b>" + (current_page + 1) + "</b>/" + np + " 页</span>");
        
      // 产生"Previous"-链接
       if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
         appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
       }
     // 产生起始点
       if (interval[0] > 0 && opts.num_edge_entries > 0)
       {
         var end = Math.min(opts.num_edge_entries, interval[0]);
         for(var i=0; i<end; i++) {
           appendItem(i);
         }
         if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
         {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
        }
       }
       // 产生内部的些链接
       for(var i=interval[0]; i<interval[1]; i++) {
         appendItem(i);
       }
      // 产生结束点
       if (interval[1] < np && opts.num_edge_entries > 0)
      {
         if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
        {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
         }
         var begin = Math.max(np-opts.num_edge_entries, interval[1]);
         for(var i=begin; i<np; i++) {
           appendItem(i);
         }
         
       }
       // 产生 "Next"-链接
     if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
         appendItem(current_page+1,{text:opts.next_text, classes:"next"});
       }
      }
      
     //从选项中提取current_page
     var current_page = opts.current_page;
     //创建一个显示条数和每页显示条数值
    maxentries = (!maxentries || maxentries < 0)?1:maxentries;
     opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
     //存储DOM元素，以方便从所有的内部结构中获取
     var panel = jQuery(this);
     // 获得附加功能的元素
     this.selectPage = function(page_id){ pageSelected(page_id);}
     this.prevPage = function(){ 
       if (current_page > 0) {
         pageSelected(current_page - 1);
         return true;
       }
       else {
        return false;
      }
    }
    this.nextPage = function(){ 
      if(current_page < numPages()-1) {
        pageSelected(current_page+1);
       return true;
      }
      else {
        return false;
       }
    }
    // 所有初始化完成，绘制链接
   drawLinks();
     // 回调函数
     //opts.callback(current_page, this);
  });
}
로그인 후 복사

코드는 비교적 읽기 쉽습니다. 필요에 따라 수정할 수 있습니다.

스타일 코드: 

.pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;}
.pages b{ color:#e75f49;}
.pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;}
.pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}
로그인 후 복사

표시 효과는 다음과 같습니다. :

jQuery+Ajax는 새로 고침 없는 페이징을 구현합니다.

원래 CSS 스타일: 

.pagination a {
 text-decoration: none;
  border: 1px solid #AAE;
  color: #15B;
 }
 .pagination a, .pagination span {
  display: inline-block;
 padding: 0.1em 0.4em;
  margin-right: 5px;
 margin-bottom: 5px;
 }
  
.pagination .current {
 background: #26B;
 color: #fff;
 border: 1px solid #AAE;
 }
 .pagination .current.prev, .pagination .current.next{
  color:#999;
  border-color:#999;
  background:#fff;
 }
로그인 후 복사

나만의 디스플레이 스타일을 디자인할 수 있습니다.

2.

2.1, html 표시 

<div class="second-ul-ctn">
  <ul class="second-ul" id="ulProducts">
  </ul>
 <div class="pages">
  <input type="hidden" id="hideTotalCount" />
   <div id="Pagination" class="pagination">
   </div>
  </div>
 </div>
로그인 후 복사

ulProducts에는 표시할 데이터가 포함되어 있으며 생성된 페이징 툴바는 Pagination

2.2 javascript 코드

<🎜에 배치됩니다. >
$(function () {
   searchMyme(0);
   pageInit();
   $("#btnSearch").on("click", function () {
    searchMyme(0);
    pageInit();
    return false;
   });
  });
  function searchMyme(page, pageination) {
   var month = $("#btnMonth").val();
   var obj = {
    Month: month,
    OpType: "getme",
    page: (page + 1)
    , rows: 10
   };
   var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx";
   $.get(url, obj, function (data) {
    $("#tbIncome").empty();
    var obj = JSON.parse(data);
    var total = obj.Total;
    $("#hideTotalCount").val(total);
    var arrHtml = [];
    $.each(obj.Rows, function (i, data) {
     arrHtml.push("<tr><td>" + (i + 1) + "</td>");
     arrHtml.push("<td>" + data.Account + "</td>");
     arrHtml.push("<td>" + data.Name + "</td>");
     arrHtml.push("<td>" + data.Month + "</td>");
     arrHtml.push("<td>" + data.IncomeAmount + "</td>");
     arrHtml.push("<td><a href=&#39;MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"&#39; class=&#39;a-blue&#39;>查看明细</a></td></tr>");
    });
    $("#tbIncome").append(arrHtml.join(&#39;&#39;));
   });
  };
  function pageInit() {
   var totalCount = $("#hideTotalCount").val();
   $("#Pagination").pagination(parseInt(totalCount), {
    items_per_page: 10,
    //current_page: 1,//当前选中的页面默认是0，表示第1页
    num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0，好像是尾部显示的个数
    num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10
    link_to: "javascript:void(0)",//分页的链接
    prev_text: "上一页",
    next_text: "下一页",
    prev_show_always: true,
    next_show_always: true,
    callback: searchMyIncome
   });
  }
로그인 후 복사
searchMyme은 페이징 데이터를 얻기 위한 것입니다. 총 개수는 숨겨진 컨트롤에 배치되며, 여기에서 총 페이징 컨트롤을 사용해야 합니다. 그렇지 않으면 반환된 총 개수를 얻을 수 없습니다. .pageInit()은 컨트롤을 초기화하는 것이므로 기본적으로는 설정이 OK입니다.

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

새로 고침 없는 페이징을 구현하는 jQuery+Ajax와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨：
jquery ajax 刷新
원천：php.cn
이전 기사：AJAX(asp.net)를 사용하여 새로 고치지 않고 페이징 구현 코드 다음 기사：Bootstrap Paginator 페이징 플러그인은 Ajax와 결합하여 새로 고침되지 않는 동적 페이징 효과를 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
for 루프는 무작위로 1에서 0으로 이동합니다. 기본적으로 페이지가 새로 고쳐질 때마다 for 루프는 1에서 0으로 변경될 가능성이 있습니다. 왜 이런 일이 발생하는지 모르겠지만 내 이미지가 서로 겹쳐지는 방식...
에서 2024-04-06 16:48:14
0
1
393
클리어 후에도 내 파일 입력값은 그대로 남아있습니다 스크린샷에서 볼 수 있듯이. 파일을 선택하고 페이지를 새로 고치지 않고 팝업을 유지한 후 다시 열면 파일 입력이 여전히 내가 선택한 파일입니다. <input...
에서 2024-04-06 15:44:52
0
1
384
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
Gmail 및 XOAUTH2를 사용하는 PHPMailer: 현재 새로 고침 토큰이 만료되면 자동으로 새 새로 고침 토큰을 얻는 방법은 무엇입니까? XOAUTH2(PHPMailerWiki)와 함께 Gmail을 사용하는 것과 GmailXOAUTH2와 함께 PHPMailer를 사용하여 이메일을 보내는 방법이 걱정...
에서 2024-04-06 10:14:45
0
1
373
VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함 공지 사항 목록(API에서 검색)을 페이지에 표시하려고 합니다. 저는 Vuex 스토어를 사용하고 있으며 Announcements라는 상태가 있습니다. 또한 사용자...
에서 2024-04-06 10:37:58
0
1
385
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿