javascript - jquery pagination handling visible and non visible pages -

-

i using jquery pagination. pulling 100s of records database , jquery pagination on front end.

all other functionality working fine except visible pages. want show 10 or less pages @ time other pages should show on click of next or previous.

please @ image there 15 records coming database , showing 1 record on per page working fine, 15 pages showing same time.

image: https://www.dropbox.com/s/8od2z5wzoj8l4u6/pager.png?dl=0

here code

function previous(){   new_page = parseint($('#current_page').val()) - 1;  //if there item before current active link run function   if($('.active_page').prev('.page_link').length==true){  go_to_page(new_page);  }   }  function next(){ new_page = parseint($('#current_page').val()) + 1; //if there item after current active link run function if($('.active_page').next('.page_link').length==true){ go_to_page(new_page);  }  } function go_to_page(page_num){  //get number of items shown per page   var show_per_page = parseint($('#show_per_page').val());    //get element number start slice   start_from = page_num * show_per_page;    //get element number end slice    end_on = start_from + show_per_page;    //hide children elements of ayah_image div, specific items , show them $('#ayah_image').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');     /*get page link has longdesc attribute of current page      , add active_page class   , remove class active page link*/   $('.page_link[longdesc=' + page_num +']').addclass('active_page').siblings('.active_page').removeclass('active_page'); //update current page input field  $('#current_page').val(page_num);  }                                 $( document ).ready(function() {                         var show_per_page = 1;                          //getting amount of elements inside ayah_image div                         var number_of_items = $('#ayah_image').children().size();                         //calculate number of pages going have                         var number_of_pages = math.ceil(number_of_items/show_per_page);                          //set value of our hidden input fields                         $('#current_page').val(0);                         $('#show_per_page').val(show_per_page);                          //now when got need navigation let's make '                          /*                          going have in navigation?                             - link previous page                             - links specific pages                             - link next page                         */                         var navigation_html = '<a class="previous_link" href="javascript:previous();">prev</a>';                         var current_link = 0;                         while(number_of_pages > current_link){                             navigation_html += '<a class="page_link" style="height:20px; width:30px;" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';                             current_link++;                          }                          navigation_html += '<a class="next_link" href="javascript:next();">next</a>';                          $('#page_navigation').html(navigation_html);                          //add active_page class first page link                         $('#page_navigation .page_link:first').addclass('active_page');                          $('#ayah_image').children().css('display', 'none');                          //and show first n (show_per_page) elements                         $('#ayah_image').children().slice(0, show_per_page).css('display', 'block');                         });

sounds need couple things:

  1. update pagination links whenever click nav link.
  2. only show set number of page links around selected page.

so move page link generating logic function like:

function generatepagelinks(curpage) {     var max_page_links = 10;     var navigation_html = '<a class="previous_link" href="javascript:previous();">prev</a>';     var current_link = curpage - (max_page_links / 2);     while(current_link < (max_page_links / 2) && number_of_pages > current_link){         navigation_html += '<a class="page_link" style="height:20px; width:30px;" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';         current_link++;     }      navigation_html += '<a class="next_link" href="javascript:next();">next</a>';      return navigation_html; }

and call link go_to_page (and initial call in doc.ready).

untested, sounds reasonable in head ;).


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more