ホームページ > 記事 > ウェブフロントエンド > jqueryのシンプルな実装ajaxページングplug-in_jquery

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

WBOYオリジナル: 2016-05-16 15:17:451276ブラウズ

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 はページ分割されたデータを表します。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery+css_jqueryで実装したページ切り替えタブバー効果次の記事：jQuery+css_jqueryで実装したページ切り替えタブバー効果

続きを見る

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

関連記事