Home/ Questions/Q 6798181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:41:57+00:00

I decided to write my own markup for a table that has a static

  • 0

I decided to write my own markup for a table that has a static header and scrollable tbody (using Jquery), so i decided to write my own markup using divs.

Here are the 2 problems :

  • given any query to select x rows, it prints a resultset on two rows, so a counting error might have occured

  • this markup is very slow when we’re talking about huge ammounts of data, lots of DOM elements, when using some static markup, it’s ok, but when I’m supposed to fetch it from a DB, it’s lagging a lot

I was wondering if you guys might have an idea, days of searching have failed me

The code is below :

<?php include("connect.inc.php"); ?>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script>

        $(document).ready(function()
        {
        $(".thead").scroll(function () { 
                $(".tbody").scrollLeft($(".thead").scrollLeft());
            });
        $(".tbody").scroll(function () { 
                $(".thead").scrollLeft($(".tbody").scrollLeft());
            });
        });

    </script>

</head>

<body>

<?php

    /* $syntax = ANY USUAL MYSQL SELECT QUERY, EVEN A JOIN */

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query)+1;
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type="text/css">

*   {

    font-size:12px;
    font-family:verdana;

}

/* defines table wrap, max width and height */

.tbl_wrap   {

    width:800px;
    height:400px;

}

/* inner wrapper */

.tbl    {

    width:100%;
    height:100%;

}

.thead {

    height:35px;
    overflow:hidden;

}

.tbody {

    height:400px;
    overflow:auto;

}

/* defines table row and table header settings */

.th,.tr {

    width:<?=$tr_w."px"?>;
    display:block;
    clear:both;
    height:35px;

}

/* optional settings for th */

.th {

    background-color: rgb(220,220,220);
    font-weight: bold;
    border-bottom:1px solid black;

}

/* cell element styling */

.td {

    float:left; 
    display:inline;
    width:<?=$td_w."px"?>;
    height:35px;
    overflow:auto;
    border: 1px solid rgb(250,250,250);

}

</style>    

<div class='tbl_wrap'>

    <div class='tbl'>

        <div class='thead'>

            <div class='th'>

            <?php

                for($i=0; $i<mysql_num_fields($query);$i++) 
                echo "<div class='td'>".mysql_field_name($query,$i)."</div>";

            ?>

            </div>

        </div>

        <div class='tbody'>

        <?php
        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<div class='tr'>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<div class='td'>".$res[mysql_field_name($query,$i)]."</div>\n";
            echo "</div>\n";    
        }
        ?>

        </div>

    </div>

</div>

</body>

</html>

<?php include("close.inc.php");

Thank you and kudos for the guy who can provide an explanation for this mess.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I actually ended up doing this

        <script>

    $(function () {
        $(".edt").click(function (event) {
            $(this).editable('ajax_save.php?table=date_vpn',{
                id      : 'id',
                name        : $(this).attr('col'),
                submit      : 'Save',
                cancel      : 'Cancel',
                tooltip     : ''
            });
        });
    });     


    $(document).ready(function(){
        $(".tblh_wrap").scroll(function () { 
                $(".tblb_wrap").scrollLeft($(".tblh_wrap").scrollLeft());
        });
        $(".tblb_wrap").scroll(function () { 
                $(".tblh_wrap").scrollLeft($(".tblb_wrap").scrollLeft());
        });
    });

    </script>

</head>

<body>

<?php

    $syntax = 'your usual mysql query';

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query);
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type='text/css'>

    table   {

        width           :100%;
        table-layout    :fixed;

    }

    tr      {

        width           :<?=$tr_w."px"?>

    }

    td      {

        width           :<?=$td_w."px"?>;
        overflow        :hidden;
        white-space     :nowrap;

    }

    .tblh_wrap  {

        width           :1000px;
        overflow        :hidden;

    }

    .tblb_wrap  {

        height          :500px;
        width           :1000px;
        overflow        :auto;

    }       

</style>

<div class='tblh_wrap'>

<table>

        <tr>
        <?php

            for($i=0; $i<mysql_num_fields($query);$i++) 
            echo "<td>".mysql_field_name($query,$i)."</td>";

        ?>
        </tr>

</table>

</div>

<div class='tblb_wrap'>

<table>

        <?php

        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<tr>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<td class='edt' id='' col=''>".$res[mysql_field_name($query,$i)]."</td>\n";
            echo "</tr>\n"; 
        }

        ?>

</table>

</div>

    My solution works because it is a table with fixed header, scrollable horizontally and tbody content that synchronizes with header horizontally and has vertical scrolling features, done with jquery, regular html and php

    • 0