HTML-Grid-Paging in jQuery

Question

Ich habe 50 Datensätze im Raster. Ich möchte 25 Datensätze beim Laden der Seite anzeigen. Wenn ich eine Schaltfläche „Weiter“ klicken, ich mehr Datensätze will gezeigt, wie 25-50 von 100 werden (zum Beispiel der Google Mail-< und > Tasten)

Danke, Santosh

Answer 1

Die einfachste Weg wäre, jquery TableSorter http://tablesorter.com/docs/ zu verwenden.

Answer 2

Sie können jquery Grid-Plugin in Ihrer grundlegenden HTML-Tabelle implementieren. besuchen Sie hier: http://datatables.net

Answer 3

If your meaning is a Database Grid This is a Base and Good way to Make a jquery/PHP Pagination: 

    **For Example we have a Database Like This :** 


     CREATE TABLE messages 
     (
     msg_id INT PRIMARY KEY AUTO_INCREMENT, 
     message TEXT 
     ); 



    also we make a js file named jquery_pagination.js : 


     $(document).ready(function() 
     { 
     //Display Loading Image 
     function Display_Load() 
     { 
     $("#loading").fadeIn(900,0); 
     $("#loading").html("<img src="bigLoader.gif" />"); 
     } 
     //Hide Loading Image 
     function Hide_Load() 
     { 
     $("#loading").fadeOut('slow'); 
     }; 
     //Default Starting Page Results 
     $("#pagination li:first") 
     .css({'color' : '#FF0084'}).css({'border' : 'none'}); 
     Display_Load(); 
     $("#content").load("pagination_data.php?page=1", Hide_Load()); 
     //Pagination Click 
     $("#pagination li").click(function(){ 
     Display_Load(); 
     //CSS Styles 
     $("#pagination li") 
     .css({'border' : 'solid #dddddd 1px'}) 
     .css({'color' : '#0063DC'}); 
     $(this) 
     .css({'color' : '#FF0084'}) 
     .css({'border' : 'none'}); 
     //Loading Data 
     var pageNum = this.id; 
     $("#content").load("pagination_data.php?page=" + pageNum, Hide_Load()); 
     }); 
     }); 


    This is our Config.php file: 
    ....you have to change the detail 



     <?php 
     $mysql_hostname = "localhost"; 
     $mysql_user = "username"; 
     $mysql_password = "password"; 
     $mysql_database = "database"; 
     $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) 
     or die("Opps some thing went wrong"); 
     mysql_select_db($mysql_database, $bd) 
     or die("Opps some thing went wrong"); 
     ?> 



pagination.php : 


     <?php 
     include('config.php'); 
     $per_page = 9; 

     //Calculating no of pages 
     $sql = "select * from messages"; 
     $result = mysql_query($sql); 
     $count = mysql_num_rows($result); 
     $pages = ceil($count/$per_page) 
     ?> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
     libs/jquery/1.3.0/jquery.min.js"></script> 
     <script type="text/javascript" src="jquery_pagination.js"></script> 

     <div id="loading" ></div> 
     <div id="content" ></div> 
     <ul id="pagination"> 
     <?php 
     //Pagination Numbers 
     for($i=1; $i<=$pages; $i++) 
     { 
     echo '<li id="'.$i.'">'.$i.'</li>'; 
     } 
     ?> 
     </ul> 


    pagination_data.php : 


     <?php 
     include('config.php'); 
     $per_page = 9; 
     if($_GET) 
     { 
     $page=$_GET['page']; 
     } 

     $start = ($page-1)*$per_page; 
     $sql = "select * from messages order by msg_id limit $start,$per_page"; 
     $result = mysql_query($sql); 
     ?> 
     <table width="800px"> 
     <?php 
     while($row = mysql_fetch_array($result)) 
     { 
     $msg_id=$row['msg_id']; 
     $message=$row['message']; 
     ?> 
     <tr> 
     <td><?php echo $msg_id; ?></td> 
     <td><?php echo $message; ?></td> 
     </tr> 
     <?php 
     } 
     ?> 
     </table> 



    Also we can use a ** Css Code ** for Page Numbers : 

    <style> 

     #loading 
     { 
     width: 100%; 
     position: absolute; 
     } 
     li 
     { 
     list-style: none; 
     float: left; 
     margin-right: 16px; 
     padding:5px; 
     border:solid 1px #dddddd; 
     color:#0063DC; 
     } 
     li:hover 
     { 
     color:#FF0084; 
     cursor: pointer; 
     } 

    </style>