jQuery_jqueryに基づいた簡単なページング制御の実装

1: レンダリング 2: マテリアル 3: コーディング 3.1 考える 何をする必要があるか? 1: ページング コントロールはバックグラウンドにリクエストを送信する必要があります。送信されるパラメーターには、現在のページ、各ページの表示数、およびクエリ条件が含まれます。データは取得され、現在のページにロードされます。 🎜>2: 現在のページを変更および削除するときに記憶できます。 3: クエリ後にページをめくったときに現在のクエリの条件を記憶できます。

3.2 実装 HTML

コードをコピー コードは次のとおりです:

jQuery コントロールを自由に使用できるように、最初にフレームワークを設定します。プラグインに simplePage という名前を付けます。

コードをコピー コードは次のとおりです。 (関数($){ $.fn.simplePage=function(o){ var options={ //設定パラメータ }; return //sth } })(jQuery)

デフォルトのパラメータは何ですか? 現在のページとページごとの表示数を送信する必要があるため、currentPage と pageSize という 2 つの基本パラメータが必要です。 テーブルの内容をクエリする必要があるため、フォーム フォームが必要です。クエリ条件を配置します。 変更および削除する必要があるため、現在のページを覚えておいてください。そのため、現在実行されている操作の種類を示す記号が必要です。 プログラムをより柔軟にするために、次のように追加します。データを取得した後にロードする必要があるコンテナ、およびページング コントロールがロードされるページャー、 は次のとおりです

コードをコピー コードは次のとおりです: var options={ pager: '.pager',//テーブル コントロールのコンテナ container: '.tableData',//Containerテーブルデータを配置するための form: '#form',//クエリ条件を配置するためのフォーム pageForm: '#pageForm',//隠しDivを配置します url: '',//宛先のアドレスリクエストを送信します currentPage: 1, pageSize: 2 type: null, //Optional: action, pageShow:7 }

順番メンテナンスを容易にするために、データを取得してイベントをバインドするための独立したオブジェクトを宣言します。これを使用します。関数の名前は $.page

コード です。 コードは次のとおりです。 $.page = { // setPage: function(o){ }, // を取得します。現在のページ getCurrentPage: function(o){ }, // 各ページの表示数量を取得 getPageSize: function(o){ }, // json データを生成送信に必要です genData: function(o){ }, //データ送信 loadData: function(o){ } }

上で宣言した関数を実装します。ページが初めてロードされるとき、ページング コントロールを生成するためにサーバーから合計ページ数を取得する必要があるため、最初にloadData関数 を実装します。 コードをコピーします コードは次のとおりです。 loadData: function(o){ var that = this; var data = that.genData(o); $.ajax({ url: o.url, data: data, type: 'post', dataType : 'html'、 キャッシュ: false、 成功: function(result){ var res = $(result).find( 'tbody').html(); var totalPage = $(result).find('#totalPage').val(); var currentPage = $(result).find('#currentPage') .val(); o.currentPage=currentPage; 🎜>o.pager.empty(); $.line.setLine(totalPage,o) //ページング制御を生成する関数を呼び出します }, error: function(){ alert("error"); } }) }

次に、上記で生成されたページング コントロール関数 $.line.setLine を実装します。

コードをコピーします コードは次のとおりです: $.line={ setLine:function(totalPage,o){ for(var i=0;i var a=$(' ').html(' ' (i 1) ' ').addClass('pageA').bind('click',function(){ var s=$(this); s.siblings().removeClass('pageActive'); s.addClass('pageActive'); o.currentPage=s.text(); $.page.loadData(o); }); if(o.currentPage==i 1){ a.addClass('pageActive'); } o.pager.append(a); } var limit=this.getLimit(o,totalPage); var aPage=o.pager.find('a.pageA').not('a.previous,a.nextAll,a.record'); aPage.hide(); aPage.slice(limit.start,limit.end).show(); var prev=$(' ').html(' 上一页 ').addClass('pageA previous').unbind('click').bind('click',function(){ var pageActive=o.pager.find('a.pageActive'); var s=$(this); if(pageActive.prev().text()=='上一页'){ alert('已经是第一页!'); return false; } pageActive.removeClass('pageActive'); pageActive.prev().addClass('pageActive'); o.currentPage=pageActive.prev().text(); $.page.loadData(o); }); var next=$(' ').html(' 下一页 ').addClass('pageA nextAll').unbind('click').bind('click',function(){ var pageActive=o.pager.find('a.pageActive'); var s=$(this); if(pageActive.next().text()=='下一页'){ alert('已经是最后一页!'); return false; } pageActive.removeClass('pageActive'); pageActive.next().addClass('pageActive'); o.currentPage=pageActive.next().text(); $.page.loadData(o); }); var pageActiveText=o.pager.find('a.pageActive').text(); var record=$(' ').html(' ' pageActiveText '/' totalPage ' ').addClass('pageA record'); o.pager.prepend(prev).prepend(record).append(next); } } 在上面的代码中我们给当前的页面加上了pageActive类，所以现在我们可以实现$.page的getCurrentPage函数，非常简单 复制代码 代码如下: getcurrentPage: function(o){ var p = o.pager.find("a.pageActive").text(); return p; } 接着我们实现生成json数据的genData函数，json格式为{key:value,key:value} 复制代码 代码如下: genData: function(o){ var sdata = $.extend({}, { "currentPage": o.currentPage, "pageSize": o.pageSize}, $.jsonObj(o.pageForm)); return sdata; }, 上面的$.jsonObj为自定义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持input，select 复制代码 代码如下: $.jsonObj = function(form){ //判断是否有序列化的东东 if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") { return null; } var formEl = $(form).find('input[type="text"]'); var formselect = $(form).find('select'); var json = "{"; for (var i = 0; i var name = formEl.eq(i).attr('name'); var val = "'" formEl.eq(i).val() "'"; json = name; json = ":"; json = val; json = ","; } var lname = formEl.eq(formEl.length - 1).attr('name'); var lval = "'" formEl.eq(formEl.length - 1).val() "'"; json = lname; json = ":"; json = lval; if (formselect) { json = ","; for (var i = 0; i var name = formselect.eq(i).attr('name'); var val = "'" formselect.eq(i).val() "'"; json = name; json = ":"; json = val; json = ","; } var lname = formselect.eq(formselect.length - 1).attr('name'); var lval = "'" formselect.eq(formselect.length - 1).val() "'"; json = lname; json = ":"; json = lval; } json = "}"; var jsonObj = eval("(" json ")") return jsonObj; } 接着我们为查询表单的按钮绑定事件，我们扩展下我们的$.page函数 复制代码 代码如下: handleQueryLine:function(o){ $(o.form).find(".query").click(function(){ //$(o.pageForm).append ($(o.form).clone(true)); $(o.pageForm).empty(); $(o.form).find('input[type="text"]' ).each(function(){ var vals = $(this).val(); var s = $(this).clone().val(vals); $(o. pageForm).append(s); }); $(o.form).find('select').each(function(){ var vals = $(this).val( ); var s = $(this).clone().val(vals); $(o.pageForm).append(s); }); $.page. query(o); }); } ok, the basic function has been completed. Now complete the main function Copy code The code is as follows: $.fn.simplePage = function(os){ var options = { pager: '.pager ',//Container for table control container: '.tableData',//Container for placing table data form: '#form',//Form for placing query conditions pageForm: '#pageForm ',//Place the hidden Div url: '',//The address to send the request currentPage: 1, pageSize: 2, type: null,//Optional: action , pageShow:7//, }; var o = $.extend(options, os); return this.each(function(){ o.pager = $ (this).find(o.pager); o.container = $(this).find(o.container); //Clear the click event first o.pager.unbind('click '); if (o.type == 'action') { //Specified action, such as an event when deleting, in which case the data needs to be refreshed on the current page o.currentPage = $. page.getPageSize(o); o.pageSize = $.page.getCurrentPage(o); $.page.loadData(o); return; } $.page .loadData(o); $.line.handleQueryLine(o); }) } Now our paging is not very good, let’s check it with firebug The generated paging structure is written in the following style Copy the code The code is as follows: .pager a { display: block; float: left; width: 16px; height: 16px; margin: 5px; } .pager a.pageA{ background:url("../images/grid/page.png") no-repeat left 0px transparent; display:inline-block; font-size:14px; margin:0 3px; padding-left:6px; text-align:center; vertical-align:bottom; height:auto; width:auto; cursor:pointer; } .pager a.pageA span{ background:url("../images/grid/page.png") no-repeat right 0px transparent; display:inline-block; height:24px; line-height:22px; padding-right:6px; } .pager a.pageActive{ background:url("../images /grid/page.png") no-repeat left -24px transparent; } You’re done! !

DEMO Download