(6) تعدد الصفحات بـ الجيكويري..(احترافي..)

السلام عليكم ورحمة الله...

عودة من جديد مع درس جديد من دروس الجافا سكربت 

نبدأ بسم الله...

كل منا يحلم بتقديم الخدمة السهلة لزواره و ان يجعلهم يرتاحوا لموقعه ويعاودوا الزيارة له العديد والعديد من المرات .. لذا اليوم سوف اعلمكم كيف ننشأ تعدد صفحات بالجيكويري لا ينتقل من صفحة لصفحة بل يظهر البيانات في نفس الصفحة !! ..
 
اولاً : تحميل الجيكويري :

مكتبة الجيكويري.. 

ثانياً : نبدأ .. أولاً نضع هذه الأكواد في رأس الصفحة : 

 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 var show_per_page = 5;
 var number_of_items = $('#content').children().size();
 var number_of_pages = Math.ceil(number_of_items/show_per_page);
 $('#current_page').val(0);
 $('#show_per_page').val(show_per_page);
 var navigation_html = '<a class="previous_link" href="javascript:previous();">السابق</a>';
 var current_link = 0;
 while(number_of_pages > current_link){
  navigation_html += '<a class="page_link" 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();">التالي</a>';
 
 $('#page_navigation').html(navigation_html);
 
 $('#page_navigation .page_link:first').addClass('active_page');
 $('#content').children().css('display', 'none');
 
 $('#content').children().slice(0, show_per_page).css('display', 'block');
 
});
function previous(){
 
 new_page = parseInt($('#current_page').val()) - 1;
 if($('.active_page').prev('.page_link').length==true){
  go_to_page(new_page);
 }
 
}
function next(){
 new_page = parseInt($('#current_page').val()) + 1;
 if($('.active_page').next('.page_link').length==true){
  go_to_page(new_page);
 }
 
}
function go_to_page(page_num){
 var show_per_page = parseInt($('#show_per_page').val());
 start_from = page_num * show_per_page;
 
 end_on = start_from + show_per_page;
 
 $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
 
 $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
 
 $('#current_page').val(page_num);
}
 
</script>
<style>
#page_navigation a{
 font-family : tahoma;
 padding:3px;
 border:1px solid gray;
 margin:2px;
 color:black;
 text-decoration:none
}
.active_page{
 background:darkblue;
 color:white !important;
}
</style>

ثالثاً: نضع هذه الأكواد في جسم الصفحة :

<input type='hidden' id='current_page' />
 <input type='hidden' id='show_per_page' />
 <div id='content'>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
  <p>روابط في بي</p>
 </div>
 <div id='page_navigation'></div>

رابعاً : جرب !
طبعاً بإمكاننا إحضار نتائج من قاعدة البيانات مكان الكلام نضع امر الإحضار ..
الصورة :

تحميل السكربت من هنآ...

آرق التحايآ....