Yazılım Örnekleri

Jquery ile basit ve kullanışlı bir sayfalama yapalım.

<script>
$(function(){
    //kac tane veri oldugunu saydıdırdık 13 tane 
    var kactane= $("ul.liste li").size();
    //kacar kacar listenecek 
    var kacar=2;
     
    
    $("ul.liste li:gt(" + (kacar-1)+")").hide();
    
    //sayfa sayisi
    var sayfasayisi=Math.ceil(kactane/kacar).toFixed(2);
    for ( var i = 1 ; i <=sayfasayisi ; i++ ){
        $(".sayfanum").append("<a href='javascript:void(0)'>" + i + "</a>");
        }
    $(".sayfanum a:first").addClass("aktif");
    
    $(".sayfanum a").live("click",function(){
       
       var num = $(this).index() + 1;
       var goster=(num * kacar) ;
       $("ul.liste li").hide();
       
       $(".sayfanum a ").removeClass("aktif ");
            $(this).addClass("aktif");
       
      for ( i = (goster - kacar ); i<=goster-1 ; i++){
         $("ul.liste li:eq(" + i + ")").show();  
          
          }
    
    });
    });

</script>

<style>
ul .liste{padding:20px; width:300px;}

ul.liste li{
    width:300px;
 background:#CCC;
 padding:5px;
 list-style-type:none;
 border:1px solid #999;}
 .sayfanum{
     width:300px;
     margin-top:20px;
     padding:0 20px 20px 20px;}
.sayfanum a {
    width:300px;
    padding:3px 5px 3px 5px;
    width:30px;
    height:30px;
    background:#CCC;
    color:#FFF;
    margin-right:6px;
    text-decoration:none;}
    
    
    .sayfanum a.aktif{
        width:300px;
        background:red;}
        </style>

<ul class="liste">
<li>1. sıra</li>
<li>2. sıra</li>
<li>3. sıra</li>
<li>4. sıra</li>
<li>5. sıra</li>
<li>6. sıra</li>
<li>7. sıra</li>

</ul>
<div class="sayfanum"></div>