Sayfalama

by Murat Kezli

HTML

<table class="kezli">
<thead>
<tr>
<td class="sol">footsfsdfsdf1</td>
<td>foot2</td>
<td>foot3</td>
<td>foot4</td>
</tr>
</thead>
<tbody id="kezli">
<tr>
<td class="sol">cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
</tr>
<tr>
<td>cell2_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
</tr>
<tr>
<td>cell3_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
</tr>
<tr>
<td>cell4_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
  <tr>
<td>cell5_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
  <tr>
<td>cell6_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
  <tr>
<td>cell7_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
  <tr>
<td>cell8_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
</tbody>
</table>
<div id="sayfalama">

</div>

CSS

table.kezli {
  font-family: "Verdana", cursive, sans-serif;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.kezli td, table.kezli th {
  border: 1px solid #ffffff;
  padding: 8px 2px;
}
table.kezli tbody td {
  font-size: small;
  color: #000000;
}
table.kezli tr:nth-child(even) {
  background: #e2e2e2;
}
table.kezli thead {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  background: #fbba00;
  
}
table.kezli thead td {
  font-size: 14px;
  color:#000000;
}

.sol{ text-align:left;margin-left:6px;}
#sayfalama { margin-top:10px; margin-left: -10px;}
#sayfalama .sayfalar {  width:30px !important; height:30px; font-size:16px; line-height:30px; text-align:center; border:1px solid #cccccc; margin-left:10px; cursor:pointer; float:left;}
#sayfalama .sayfalar:hover{ background-color:#fbba00;}
.aktif{background-color:#fbba00;}

JavaScript

var toplamtr = $("#kezli tr").length;
var veriSayisi = 2;
$("#kezli tr:gt(" + (veriSayisi - 1) + ")").hide();
var sayfaSayisi = Math.round(toplamtr / veriSayisi);
for (var i = 1; i <= sayfaSayisi; i++)
{$("#sayfalama").append("<div class='sayfalar' onclick='javascript:void(0)'>" + i +"</div>");}
$("#sayfalama a:first").addClass("aktif");
$(document.body).on("click", "#sayfalama .sayfalar", function(){
    var indis = $(this).index() + 1;
    var gt = veriSayisi * indis;
    $("#sayfalama .sayfalar").removeClass("aktif");
    $(this).addClass("aktif");
    $("#kezli tr").hide();
    for (i = gt - veriSayisi; i < gt; i++)
    { $("#kezli tr:eq(" + i + ")").show(); }
});