jquery - jQuery での HTML グリッド ページング

Question

グリッドに 50 のレコードがあります。ページの読み込み時に 25 レコードを表示したい。「次へ」ボタンをクリックすると、100 件中 25 件から 50 件のように、より多くのレコードが表示されるようにしたい (たとえば、Gmail<と>ボタン)

ありがとう、サントッシュ

Answer 1

基本的なHTMLテーブルにjqueryグリッドプラグインを実装できます。こちらにアクセスしてください：http：//datatables.net

Answer 2

最も簡単な方法は、jquery TableSorter http://tablesorter.com/docs/を使用することです。

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>