Write plug-ins-javascript page plug-ins

The original company used the report page plug-in is a C # written server plug-in, need to interact with the front and back, and does not support Ajax.

After a period of tossing, I wrote a lightweight jquery paging plugin that supported Ajax. Here is the plugin code

/*plug-in Name: report Paging Keven Call Method: 1. Add <div class= "PageInfo" ></div> 2. JavaScript code $ (". PageInfo") below the HTML report.    Pageinit (); 3. Define function Setresult, assign JSON data to table parameter: URL: Data request address AJAX Data format: JSON format, need to return paging data, Format: "page": {"TotalCount": "7", "PageSize": "20" }*/; (function ($) {    varPageNumber = 1; varPageSize = 1; varMaxPage = 1; varRequesturl; //external interface Functions$.fn.extend ({' Pageinit ':function(OP) {if(OP! =undefined) {                if(Op.url! =undefined) {Requesturl=Op.url; }                if(Op. PageSize! =undefined) {PageSize=op.                PageSize; }            }            if($( This). html () = = "") {                varDivlink = $ (' <div class= ' pagelink fl ' ></div> ');  with(Divlink) {Append (' <a href= ' # "class=" Pagefirst "> Home </a> '); Append (' <a href= ' # "class=" Pagepre > Prev </a> '); Append (' <input type= ' number "class=" PageNumber "value=" 1 "/> '); Append (' <a href= ' # "class=" Pagenext "> Next </a>"); Append (' <a href= ' # "class=" Pagelast "> Last </a> '); Append (' <a href= ' # "class=" Pagegoto "> Jump </a> '); Find (' A '). Before (' <span class= ' split-left ' >[</span> '); Find (' A '). After (' <span class= "split-right" >]</span> "); }                $( This). Append (Divlink); $( This). Append (' <div class= "page" style= "float:right;margin-right:5px;" > <label class= "pagenumber Red" <label/> page <span class= "split" >|</span> total <label class= " MaxPage Red "<label/> page <span class=" split ">|</span> total <label class=" TotalCount Red "></label > Records </div> ');            } initevent (); Search (1);//query at first load        }    }); $.extend ({' Getpagenumber ':function () {            returnpagenumber; },        ' Setpagenumber ':function(pagenumber) {pagenumber=pagenumber;        Search ();    }    }); //get background JSON data from Ajax    functionSearch () {if(Requesturl = =undefined) {            return; }        varVData = ' pagenumber= ' + pagenumber + "&" + $ (' #form1 '). Serialize (); if(PageSize > 1) {VData+ = "&pagesize=" +PageSize; } $.ajax ({type:' POST ', DataType:"Text", ContentType:"Application/json; Charset=utf-8 ", Url:requesturl, Data:vdata, success:function(result, status, XHR) {result= eval ("(" + result + ")"); //Page Information$ (' input '. PageNumber '). Val ($.                Getpagenumber ()); PageSize=result.                Page.pagesize; TotalCount=result.                Page.totalcount; MaxPage= Math.ceil (TotalCount/PageSize); $(‘. TotalCount '). Text (totalcount); $(‘. MaxPage '). Text (MaxPage); $(' Label. PageNumber '). Text (pagenumber); //Table InformationSetresult (Result); }, Error:function(Err, A, B) {}});    }; //Initializing Events    functioninitevent () {//Click on "Home"$ ('. Pagefirst '). On (' click ',function() {pagenumber= 1;        Search ();        }); //Click "Previous Page"$ ('. Pagepre '). On (' click ',function () {            if(PageNumber > 1) {pagenumber-= 1;            Search ();        }        }); //Click "Next Page"$ ('. Pagenext '). On (' click ',function () {            if(PageNumber <MaxPage) {pagenumber+ = 1;            Search ();        }        }); //click "Last"$ ('. Pagelast '). On (' click ',function() {pagenumber=MaxPage;        Search ();        }); //Click "Jump"$ ('. Pagegoto '). On (' click ',function () {            varp = $ (' input '. PageNumber '). Val (); if(!isnan (p) && p!= "") {pagenumber=parseint (P);            Search ();    }        }); };}) (jQuery);

View Code

You first need to write a div below the report

<div class= "PageInfo" ></div>

CSS to use:

. PageInfo{Margin-top:3px;}. PageInfo. PageNumber{width:80px;vertical-align:Middle; }. Split-left{Margin-left:5px;}. Split-right{Margin-right:5px;}. Split{margin:10px;}. PageInfo a{text-decoration:None;font-size:12px;margin:2px;}. Hidden{Display:None;}. FL{float: Left;Display:inline;}. Fr{float: Right;Display:inline;}

View Code

And then call it in the JS code.

$ (function () {

$ (". PageInfo"). Pageinit ({url: '.. /bll/getreportdata.ashx '});

});

On

Write plug-ins-javascript page plug-ins