JQuery + Ajax implements non-refreshing paging and jqueryajax

JQuery + Ajax implements non-refreshing paging and jqueryajax

1. The front-end uses ajax without refreshing pagesTo generate a paging toolbar. jquery. pagination. js is used here.
Below is the code

/*** This jQuery plugin displays pagination links inside the selected elements. ** @ author Gabriel Birke (birke * at * d-scribe * dot * de) * @ version 1.2 * @ param {int} maxentries Number of entries to paginate * @ param {Object} opts Several options (see README for documentation) * @ return {Object} jQuery Object */jQuery. fn. pagination = function (maxentries, opts) {opts = jQuery. extend ({items_per_pa Ge: 10, num_display_entries: 10, current_page: 0, num_edge_entries: 0, link_to: "#", prev_text: "Prev", next_text: "Next", ellipse_text :"... ", prev_show_always: true, next_show_always: true, callback: function () {return false ;}, opts ||{}); return this. each (function () {/*** calculate the maximum number of display pages */function numPages () {return Math. ceil (maxentries/opts. items_per_page);}/*** start and end points of extreme paging, depending on current_page and num_displ Ay_entries. * @ return {Array (Array)} */function getInterval () {var ne_half = Math. ceil (opts. num_display_entries/2); var np = numPages (); var upper_limit = np-opts.num_display_entries; var start = current_page> ne_half? Math. max (Math. min (current_page-ne_half, upper_limit), 0): 0; var end = current_page> ne_half? Math. min (current_page + ne_half, np): Math. min (opts. num_display_entries, np); return [start, end];}/*** paging link event processing function * @ parameter {int} page_id is the new page number */function pageSelected (page_id, evt) {current_page = page_id; drawLinks (); var continuePropagation = opts. callback (page_id, panel); if (! ContinuePropagation) {if (evt. stopPropagation) {evt. stopPropagation ();} else {evt. cancelBubble = true;} return continuePropagation;}/*** this function inserts the paging link into the container element */function drawLinks () {panel. empty (); var interval = getInterval (); var np = numPages (); // This helper function returns a pageSelected with the correct page_id for processing function calls. Var getClickHandler = function (page_id) {return function (evt) {return pageSelected (page_id, evt );}} // The Helper function is used to generate a single link (if not the current page, a span tag is generated) var appendItem = function (page_id, appendopts) {page_id = page_id <0? 0 :( page_id <np? Page_id: np-1); // normalized page id value appendopts = jQuery. extend ({text: page_id + 1, classes: ""}, appendopts | |{}); if (page_id = current_page) {var lnk = jQuery ("<a href class = 'currentpage'>" + (appendopts. text) + "</a>");} else {var lnk = jQuery ("<a>" + (appendopts. text) + "</a> "). bind ("click", getClickHandler (page_id )). attr ('href ', opts. link_to.replace (/_ id _/, page_id);} if (appendopts. classes) {lnk. addcia Ss (appendopts. classes);} panel. append (lnk);} // generate the description panel. append ("<span> total" + maxentries + "records, current <B>" + (current_page + 1) + "</B>/" + np + "page </span>"); // generate "Previous"-link if (opts. prev_text & (current_page> 0 | opts. prev_show_always) {appendItem (current_page-1, {text: opts. prev_text, classes: "prev"});} // generates the starting point if (interval [0]> 0 & opts. num_edge_entries> 0) {var end = Math. min (opts. Num_edge_entries, interval [0]); for (var I = 0; I <end; I ++) {appendItem (I);} if (opts. num_edge_entries <interval [0] & opts. ellipse_text) {jQuery ("<a href>" + opts. ellipse_text + "</a> "). appendTo (panel) ;}}// generate internal links for (var I = interval [0]; I <interval [1]; I ++) {appendItem (I) ;}// generate the end point if (interval [1] <np & opts. num_edge_entries> 0) {if (np-opts.num_edge_entries> interval [1] & opts. ellipse_tex T) {jQuery ("<a href>" + opts. ellipse_text + "</a> "). appendTo (panel);} var begin = Math. max (np-opts.num_edge_entries, interval [1]); for (var I = begin; I <np; I ++) {appendItem (I );}} // generate "Next"-link if (opts. next_text & (current_page <np-1 | opts. next_show_always) {appendItem (current_page + 1, {text: opts. next_text, classes: "next"}) ;}// extract current_page var current_page = opts from the options. current_page; // create an explicit Number of entries and number of entries displayed per page maxentries = (! Maxentries | maxentries <0 )? 1: maxentries; opts. items_per_page = (! Opts. items_per_page | opts. items_per_page <0 )? 1: opts. items_per_page; // store DOM elements to obtain var panel = jQuery (this) from all internal structures; // obtain the element of the additional function this. selectPage = function (page_id) {pageSelected (page_id);} this. prevPage = function () {if (current_page> 0) {pageSelected (current_page-1); return true ;}else {return false ;}} this. nextPage = function () {if (current_page <numPages ()-1) {pageSelected (current_page + 1); return true ;}else {return false ;}} // After Initialization is complete, draw the link drawLinks (); // callback function // opts. callback (current_page, this );});}

The code is easy to understand. You can modify the code as needed. Here you use your own style.

Style code:

 .pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;} .pages b{ color:#e75f49;} .pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;} .pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}

The display effect is as follows:

 

Original css style:

.pagination a { text-decoration: none;  border: 1px solid #AAE;  color: #15B; } .pagination a, .pagination span {  display: inline-block; padding: 0.1em 0.4em;  margin-right: 5px; margin-bottom: 5px; } .pagination .current { background: #26B; color: #fff; border: 1px solid #AAE; } .pagination .current.prev, .pagination .current.next{  color:#999;  border-color:#999;  background:#fff; }

You can design your own display style

2. Usage

2.1 html display

 <div class="second-ul-ctn">   <ul class="second-ul" id="ulProducts">   </ul>  <div class="pages">   <input type="hidden" id="hideTotalCount" />    <div id="Pagination" class="pagination">    </div>   </div>  </div>

The data to be displayed is put in ulProducts, And the generated Pagination toolbar is placed in Pagination.

2.2 javascript code

$ (Function () {searchMyme (0); pageInit (); $ ("# btnSearch "). on ("click", function () {searchMyme (0); pageInit (); return false ;}) ;}; function searchMyme (page, pageination) {var month = $ ("# btnMonth "). val (); var obj = {Month: month, OpType: "getme", page: (page + 1), rows: 10}; var url = ".. /.. /Controler/FinaceMo/GetStaffIncome_H.ashx "; $. get (url, obj, function (data) {$ ("# tbIncome "). empty (); Var obj = JSON. parse (data); var total = obj. total; $ ("# hideTotalCount "). val (total); var arrHtml = []; $. each (obj. rows, function (I, data) {arrHtml. push ("<tr> <td>" + (I + 1) + "</td>"); arrHtml. push ("<td>" + data. account + "</td>"); arrHtml. push ("<td>" + data. name + "</td>"); arrHtml. push ("<td>" + data. month + "</td>"); arrHtml. push ("<td>" + data. incomeAmount + "</td>"); arrHtml. push ("<td> <a href = 'Mydetail. aspx? Account = "+ data. account + "& Month =" + data. month + "'class = 'a-Blue'> View Details </a> </td> </tr>") ;}; $ ("# tbIncome "). append (arrHtml. join ('') ;};}; function pageInit () {var totalCount =$ (" # hideTotalCount "). val (); $ ("# Pagination "). pagination (parseInt (totalCount), {items_per_page: 10, // current_page: 1, // The default value of the currently selected page is 0, indicating the 1st page num_edge_entries: 2, // number of entries displayed on both sides of the first and last pages. The default value is 0. It seems that the number of entries displayed at the end is num_display_entries: 2. // The number of entries displayed in the continuous paging main part, the default value is 10 link_to: "javascript: void (0)", // The paging link prev_text: "Previous Page", next_text: "Next page", prev_show_always: true, next_show_always: true, callback: searchMyIncome });}

SearchMyme is used to retrieve the paging data and place the total number in a hidden control. The total number of paging controls must be used. ajax calls must be executed synchronously here. Otherwise, the total number of returned pageInit () cannot be obtained () it is the initialization control, so the settings are basically OK.

The above is all the content of this article, hoping to help you learn.