jQuery Grid tablesorter – Verileri kolayca sıralama ve sayfalama

Merhaba arkadaşlar,

Elimizdeki verileri tablolara yazmak, bunları istenen başlığa göre sıralamak ve sayfalama yapmak düz mantık ile biraz uğraştırıcıdır. jQuery tablesoter grid uygulaması ile bu işi çok basit bir şekilde yapabiliyoruz.

Kullanımı : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>jQuery Grid Table Sorter Uygulaması Ferhat YEŞİLMEN</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery-1.4.2.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Ftable.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Ftable.pager.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fozel.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>

<body>


<div style="width:960px;margin:0 auto;margin-top:100px;">

<h1>Jquery Tablo Uygulaması</h1>


<table id="veri-formu" class="tablesorter" border="0" cellpadding="0" cellspacing="1">

<thead>

<tr>

<th>Sıra No</th>


<th>Ad soyad</th>


<th>Doğum Yeri</th>


<th>Doğum Tarihi</th>


<th>Web Sitesi</th>

 </tr>

 </thead>


<tbody>

<tr>

<td>1</td>


<td>Ferhat YEŞİLMEN</td>


<td>Mardin</td>


<td>04.03.1987</td>


<td>http://www.ferhatyesilmen.com</td>

 </tr>


<tr>

<td>2</td>


<td>Hakan CAN</td>


<td>İStanbul</td>


<td>04.03.1986</td>


<td>http://www.comcom.com</td>

 </tr>

 </tbody>

 </table>

<!-- Sayfalama Modulu -->

<div id="pager" class="pager">

<form>
 <img src="images/first.png" class="first"/>
 <img src="images/prev.png" class="prev"/>
 <input type="text" class="pagedisplay"/>
 <img src="images/next.png" class="next"/>
 <img src="images/last.png" class="last"/>
 <select class="pagesize">
<option selected="selected" value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
 </select>
 </form>

 </div>

<!-- Sayfalama Modulu -->

</div>

<body>
</html>

tek yapmamız gereken js leri ve stilleri uygun yerlerine atıp <tr></tr> Taglarının bir döngü ile kullanarak göstermek istediğimiz verileri yazmak geri kalanını o hallediyor 🙂

Çalışır Hali için Tıklayın

Çalışmayı İndirmek için :  jQuery Grid tablesorter (228 indirme)

Kullanımı en basit jquery grid uygulaması .

İyi çalışmalar..

Yayıncı Site 

jQuery Grid tablesorter – Verileri kolayca sıralama ve sayfalama” için 2 yorum

  • 15 Aralık 2012 tarihinde, saat 19:07
    Permalink

    Örnegin 10 bin kayıt varsa 10 bin kaydın hepsini bir anda listelmiş olacak bunun yerine ajax ile veri sayfa numarasına göre sorgulama yapsa daha iyi olurdu.

    Yanıtla
  • 8 Ekim 2013 tarihinde, saat 00:09
    Permalink

    Hocam sitenizden çok güzwl sizden ricam tùm çalışmalarinizi bunu gibi dosya olarak vermek bazen hata yapıyoruz acemiyiz php ye yeni başladık

    Yanıtla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir