Jquery paging, jquery paging plug-in

Jquery paging, jquery paging plug-in
Jquery. page. js Paging

Jquery comes with a paging plug-in jquery. page. js, which can be used to implement the paging function.

Reference jquery. js, jquery. page. js, etc.

<Script type = "text/javascript" src = "js/jquery. min. js"> </script> <! -- Jquery core paging library --> <script src = "js/jquery. page. js"> </script>

Create a div in html to display data and display buttons.

<! -- List start --> <div id = "newshow" class = "noticeminheight"> </div> <! -- End of list --> <! -- Start by page --> <div class = "pageDiv"> </div>

Then the js part is used to implement the function of receiving json data. It is responsible for interacting with the background to obtain json data (simple ajax)

/*** Query the home list by parameters * @ param page */function showExperts (page, dName, dpinyin) {// showMask ("loading data, please wait "); // load the mask. Note that js and css file page = undefined? 1: page; dName = undefined? "": DName; dpinyin = undefined? "": Dpinyin; var date = new Date (); $. ajax ({type: "Get", // The type of the Request Method is get url: "data/JSONData. json ", // request address dataType:" json ", // return data type success: function (result) {// method newsContentshow (result) triggered upon success ); // display the publisher list}, complete: function (msg) {loadDonghua (); displayMask (); // mask end }});}

Process the obtained data and display it to the foreground. Call the newsContentshow (result) function)

/*** Display the Home Information ** @ param result */function newsContentshow (result) {var html = ""; var data = result. items; $ ("# newshow "). empty (); // clear var url = rootpath + singleClickUrl first; // if (data = null | data = "") {html = '<div class = "zanwu"> no expert data! </Div> '$ ("# newshow"). append (html); // empty data return;} if (data! = Null) {$. each (data, function (I, item) {var id = item. id; var name = item. name; // expert name var hospitalName = item. hospitalName; // hospital name hospitalName = null? "": HospitalName; var titleName = item. titleName; // Title: titleName = null? "": TitleName; var imgUrl = item. imgUrl; // imgUrl = null? "": ImgUrl; var decription = item. decription; // decription = null? "": Decription; var noticecontenturl = url + "? Id = "+ id; html + = '<div class = "listimg">' + '<dl>' + '<dt>' + '<a href = "' + noticecontenturl + '">' + '' + ' '+' <p> <strong> '+ name +' </strong> <br> <span> '+ hospitalName +' </ span> <br> <span> '+ titleName +' </span> </p> '+' </a> '+' </dt> '+' <dl> '+' <dd> '+ decription +' </dd> <dl> </dl> '+' <div class = "summarys"> ;});} $ ("# newshow "). append (html); // load the data loadPage (result. totalpage, result. currentpage); // page}

The last step is to bind the button event loadPage () method of the page number below. This part uses jquery. page. js, you can look at the source code (this plug-in is mainly used to create the button on the lower side to provide click events for creating page numbers and binding page numbers ).

// Set the paging function loadPage (pageCount, current) {// The createPage method is composed of jquery. page. js provides the button for creating the following $ (". pageDiv "). createPage ({pageCount: pageCount, // total number of pages current: current, // turndown: 'true' on the current page, // whether to display the jump box, true, false if not, remember to add quotation marks... backFn: function (p) {showExperts (p); // querying by PAGE }});}

Basically, the paging function can be implemented using the above methods. Some methods in the demo are used in project initialization or query, some are used in data loading, and some are used for compatibility, can be ignored. (Note that the json package in the demo is a local json package, and the actual project json package is sent in the background)

Download demo