jqueryのシンプルな実装ajaxページングplug-in_jquery-jsチュートリアル-php.cn

jqueryのシンプルな実装ajaxページングplug-in_jquery

WBOY

リリース： 2016-05-16 15:17:45

オリジナル

1307 人が閲覧しました

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 はデータレコードの合計数を表します。および items はページ分割されたデータを表します。

ここでは、コードの一般的な構造と提示された効果のみを示します。最初は自分で実装することもできます。