jquery ajax 페이징 플러그인_jquery의 간단한 구현-JS 튜토리얼-php.cn

jquery ajax 페이징 플러그인_jquery의 간단한 구현

WBOY

풀어 주다： 2016-05-16 15:17:45

원래의

1310명이 탐색했습니다.

jQuery 기반 ajax 페이징 플러그인에 관해 먼저 주요 코드 구조를 살펴보겠습니다.

1. 먼저 호출기 개체를 정의합니다.

var sjPager = window.sjPager = {
  opts: {
   //默认属性
   pageSize: 10,
   preText: "pre",
   nextText: "next",
   firstText: "First",
   lastText: "Last",
   shiftingLeft: 3,
   shiftingRight: 3,
   preLeast: 2,
   nextLeast: 2,
   showFirst: true,
   showLast: true,
   url: "",
   type: "POST",
   dataType: "JSON",
   searchParam: {},
   beforeSend: null,
   success: null,
   complete: null,
   error: function () {
    alert("抱歉,请求出错,请重新请求！");
   },
  },
  pagerElement: null,//分页dom元素
  commonHtmlText: {
   //公共文本变量
  },
  init: function (obj, op) {
   //对象初始化
  },
  doPage: function (index, pageSize, searchParam) {
   //执行分页方法
  },
  getTotalPage: function () {
   //获取总页数
  },
  createPreAndFirstBtn: function (pageTextArr) {
   //创建上一页、首页按钮链接
  },
  createNextAndLastBtn: function (pageTextArr) {
   //创建下一页、尾页按钮链接
  },
  createIndexBtn: function (pageTextArr) {
   //中间分页索引按钮链接
  },
  renderHtml: function (pageTextArr) {
   //渲染分页控件到页面
  },
  createSpan: function (text, className) {
   //创建span
  },
  createIndexText: function (index, text) {
   //创建索引文本
  },
  jumpToPage: function () {
   //跳转到
  }
 }

로그인 후 복사

객체에는 페이징 속성과 사용된 메서드가 포함되어 있습니다. doPage()는 페이징의 핵심 메서드입니다.

2. jQuery 확장

$.fn.sjAjaxPager = function (option) {
    return sjPager.init($(this), option);
  };

로그인 후 복사

3. 플러그인 사용

 <body>
   
  <table id="dataTable" border="1px"></table>
  <div id="pager"></div>

 </body>

로그인 후 복사

$(function() {
   $('#pager').sjAjaxPager({
    url: "Handler1.ashx",
    pageSize: 10,
    searchParam: {
     /*
     * 如果有其他的查询条件，直接在这里传入即可
     */
     id: 1,
     name:'test',
    },
    beforeSend: function () {
    },
    success: function (data) {
     /*
     *返回的数据根据自己需要处理
     */
     var tableStr = "<tr><td>Id</td><td>姓名</td><td>年龄</td></tr>";
     $.each(data.items, function(i,v) {
      tableStr += "<tr><td>" + v.Id + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td></tr>";
     });

     $('#dataTable').html(tableStr);
    },
    complete: function () {
    }
   });

   
  })

로그인 후 복사

사용 방법은 기본적으로 ajax를 직접 사용하는 것과 동일하다는 사실을 발견하셨나요?

마지막으로 아래와 같은 효과를 볼 수 있습니다. (테이블 스타일이 설정되지 않으면 보기 흉할 것입니다. 필요에 따라 페이지 매김 스타일에 맞게 CSS 파일을 수정할 수도 있습니다.)

F12는 디버깅 도구를 열고 페이징을 클릭하여 전송된 요청과 응답을 확인합니다.

PageIndex 및 pageSize는 플러그인의 기본 매개변수이며 백그라운드의 요청에서 직접 얻을 수 있습니다. 플러그인의 응답도 특정 형식 {"total":0,"items":[]}을 따라야 한다는 점에 유의하는 것이 특히 중요합니다. 위 그림에 표시된 것처럼 total은 총 데이터 레코드 수를 나타냅니다. 항목은 페이지가 매겨진 데이터를 나타냅니다.

여기에는 코드의 일반적인 구조와 제시된 효과만 나와 있습니다. 먼저 직접 구현해 보시기 바랍니다.