SUPER_USER SUPER_USER - 23 days ago 7
jQuery Question

Scrolling in table

I try this grid please check link link reference.

Now I successfully display this but there is no scroll.
Check image :

image

I use table for display data like this:

<table id="tabledata" cellspacing="0" style="width: 100%; border-collapse: collapse;">

</table>


and i add these two classes like this in jquery

$("#tabledata tr:first").addClass('GridviewScrollHeader');
$("#tabledata tr").addClass('GridviewScrollItem');


i also add this

<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
$('#tabledata').gridviewScroll({
width: 660,
height: 200
});
}




So how I add:

GridviewScrollPager

Answer

This is how you do it :

<table cellspacing="0" cellpadding="0" border="0" width="300">
<tr>
    <td>
        <table cellspacing="0" cellpadding="1" border="1" width="300">
            <tr style="color:white;background-color:grey">
                <th>Name</th>
                <th>Class</th>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        <div style="width:320px; height:100px; overflow:auto;">
            <table cellspacing="0" cellpadding="1" border="1" width="300">
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

enter image description here