Customizing the jquery paging plugin with Jquery.fn

Write the jquery plugin for the first time. I don't feel like writing. Writing the JQuery plugin is using this stuff Jquery.fn, for example

Jquery.fn.pluginname=function() {};

This is what I wrote the page plug-in look like
The plug-in uses an out-of-the-way function to page the page, whether it is clicking Forward, backward, or changing the size of the pages, the function will be called.

First look at the code structure of the plugin

(function ($) { //attribute fields required to store the plug-invarPagerfields = { }; //plug-in private functionsfunctionsetimagebuttonsate () {}//common functions for plug-insvarMethods ={_pagerfields:NULL, INI:function(Options) {}, Destory:function(options) {return$( This). each (function () { var$ This= $( This); $ This. Removedata (' HGPager2 '); }); } }; //Defining Plugins$.fn. HGPager2 =function () { varmethod = Arguments[0]; if(Methods[method]) {method=Methods[method]; arguments= Array.prototype.slice.call (arguments, 1); } Else if(typeof(method) = = ' object ' | | !method) {Method=Methods.ini;} Else{$.error (' method ' + method + ' does not exist on Jquery.pluginname '); return  This; } returnMethod.apply ( This, arguments); }; }) (jQuery);

This structure is in accordance with the "in-depth understanding of jquery plug-in development" in the text of the model (this article personally feel good, the first to learn to write plugin friends suggest first read this article). The definition of the entire plug-in, and its private variable functions are all wrapped in $ (function () {}); In this way, to protect the security of the plug-in private variables, from another point of view can also avoid the duplication of variable names caused by the trouble. If you put the private variable in $.fn. HGPager2 = function () {} There is a drawback, if the plug-in has some functions to get the plug-in's parameter information (such as the current page number, the current size, etc.) can not get the exact parameter information. Because the parameter information that was constructed before the plug-in according to the scope theory of JS is different from the scope in which the function was later called. The above pattern ensures that the construction plug-in is the same as the scope entered when the plug-in function is called.
　

The following list of the various parts of the plugin

This is the private variable of the plugin, which is stored with a Pagerfields class.

var Pagerfields =//pagecount:0,//recordcount:0,//  currentpage:0,//null//};

This is a plug-in private function, to set the state of the paging button (the picture of the button is not uploaded, if the code is copied and pasted directly to run without pictures)

functionsetimagebuttonsate () {if(Pagerfields.currentpage <= 1) $("#HG_pagerPre"). CSS ("backgroundposition", " -3px-3px");//Grey PreElse $("#HG_pagerPre"). CSS ("backgroundposition", " -3px-19px");//Black Preif(Pagerfields.currentpage = =pagerfields.pagecount) $ ("#HG_pagerNext"). CSS ("backgroundposition", " -20px-3px");//Grey NextElse $("#HG_pagerNext"). CSS ("backgroundposition", " -20px-19px");//Black Next}

This is the function that constructs the plug- in

Ini:function(options) {_pagerfields=Pagerfields;return  This. each (function () { var$ This= $( This); $ This. Text (""); $out _div= $ ("<div id= ' hg_pager_outter_div ' style= ' margin-bottom:-10px ' ></div>"); $ This. Append ($out _div); $out _div.append ("<div><span id= ' hg_pagerpre ' style= ' background-position:-3px-19px ' ></span></div>"); $out _div.append ("<div style= ' float:left; ' ><input id= ' hg_pagenum ' type= ' text ' value= ' 0 ' readonly= ' readonly '/></div> '); $out _div.append ("<div><span id= ' hg_pagernext ' style= ' background-position:-20px-19px ' ></span></div>"); $out _div.append (Page); $out _div.append ("Total <span id= ' hg_pagecount ' >0</span> page"); $out _div.append ("  "); $out _div.append ("per page <select id= ' hg_pagersize ' ></select> Records"); $out _div.append ("  "); $out _div.append ("A total of <span id= ' Hg_recordcount ' >0</span> Records"); $out _div.append ("  "); $ This. Append ("<br/>"); $ This. Find ("#HG_pagerPre"). CSS ("backgroundposition", " -3px-3px"); $ This. Find ("#HG_pagerNext"). CSS ("backgroundposition", " -20px-3px"); if(options.pagesizes) { for(vari = 0; i < options.pageSizes.length; i++) { $("#HG_pagerSize"). Append ("<option>" + options.pagesizes[i] + "</option>"); } _pagerfields.pagesize= Options.pagesizes[0]; } Else { varDefault_page_size = [10, 30, 50];  for(vari = 0; i < default_page_size.length; i++) { $("#HG_pagerSize"). Append ("<option>" + default_page_size[i] + "</option>"); } _pagerfields.pagesize= Default_page_size[0]; } if(Options.selrecord! = undefined &&!Options.selrecord) {$ ("#selRecord_div"). CSS ("display", ' none ')); } if(Options.pagerfuncton) {_pagerfields.pagerfunction=Options.pagerfuncton;} if(options.recordcount) {_pagerfields.recordcount=Options.recordcount; $ ("#HG_recordCount"). Text (_pagerfields.recordcount); _pagerfields.pagecount= _pagerfields.recordcount% _pagerfields.pagesize = = 0? _pagerfields.recordcount/_pagerfields.pagesize:math.ceil (_pagerfields.recordcount/_pagerfields.pagesize); $("#HG_pageCount"). Text (_pagerfields.pagecount); _pagerfields.currentpage= 1; $("#HG_pageNum"). Val (_pagerfields.currentpage); Setimagebuttonsate (); _pagerfields.pagerfunction (_pagerfields.pagesize, _pagerfields.currentpage); } //setting Element//bingding Event$ ("#HG_pagerPre"). Click (function () { if(_pagerfields.currentpage <= 1)return; Else_pagerfields.currentpage--; Setimagebuttonsate (); $ ("#HG_pageNum"). Val (_pagerfields.currentpage); _pagerfields.pagerfunction (_pagerfields.pagesize, _pagerfields.currentpage); }); $("#HG_pagerNext"). Click (function () { if(_pagerfields.currentpage = = _pagerfields.pagecount)return; Else_pagerfields.currentpage++; Setimagebuttonsate (); $ ("#HG_pageNum"). Val (_pagerfields.currentpage); _pagerfields.pagerfunction (_pagerfields.pagesize, _pagerfields.currentpage); }); $("#HG_pagerSize"). Change (function() {_pagerfields.pagesize= $ This. Find ("option:selected"). Text () * 1; _pagerfields.pagecount= _pagerfields.recordcount% _pagerfields.pagesize = = 0? _pagerfields.recordcount/_pagerfields.pagesize:math.ceil (_pagerfields.recordcount/_pagerfields.pagesize); $("#HG_pageCount"). Text (_pagerfields.pagecount); _pagerfields.currentpage= 1; $("#HG_pageNum"). Val (1); Setimagebuttonsate (); _pagerfields.pagerfunction (_pagerfields.pagesize, _pagerfields.currentpage); }); }); }

The following is the common function of plug-ins

//Gets the current page numberGetcurrentpageindex:function(options) {return_pagerfields.currentpage;},//get the total number of recordsGetRecordCount:function(options) {return_pagerfields.recordcount;},//get the current number of pagesGetcurrentpagecount:function(options) {return_pagerfields.pagecount;},//get the size of a pageGetcurrentpagesize:function(options) {return_pagerfields.pagesize;}

Use example :  

$ (function  () {$ ("#testPager"). HGPager2 ({pagesizes: [ten],123function  (size, index) {alert ("size:" + si Ze + "index:" +function  Test_click () {alert ($ ("#testPager"). HGPager2 ("Getcurrentpageindex") + "" "+ $ (" #testPager "). HGPager2 ("GetRecordCount") + "" "+ $ (" #testPager "). HGPager2 ("Getcurrentpagecount") + "" "+ $ (" #testPager "). HGPager2 ("Getcurrentpagesize")); }

Because of my understanding of the JS scope is not thorough enough, this plug-in mode is not known whether the most suitable, the above content if there is said wrong, please criticize correct.