07.JavaScript, jQuery, ExtJS.../jQuery2014. 3. 18. 15:39

jQuery Scrollable Table Plugin

반응형

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.

Show Me The Money (Demo)

citystate codeziplatitudelongitudecounty
HoltsvilleNY0050140.8152-73.0455Suffolk
HoltsvilleNY0054440.8152-73.0455Suffolk
AdjuntasPR0060118.1788-66.7516Adjuntas
AguadaPR0060218.381389-67.188611Aguada
AguadillaPR0060318.4554-67.1308Aguadilla
AguadillaPR0060418.4812-67.1467Aguadilla
AguadillaPR0060518.429444-67.154444Aguadilla
MaricaoPR0060618.182778-66.980278Maricao
AnascoPR0061018.284722-67.14Anasco
AngelesPR0061118.286944-66.799722Utuado
AreciboPR0061218.4389-66.6924Arecibo
AreciboPR0061318.1399-66.6344Arecibo
AreciboPR0061418.1399-66.6344Arecibo
BajaderoPR0061618.428611-66.683611Arecibo
BarcelonetaPR0061718.4525-66.538889Barceloneta
10215--9

Table Scroll Plugin Overview

The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.

Using the plugin is pretty straight forward, when you download the plugin you can view the demo file to get up to speed and begin working with it immediately.

The HTML TABLE markup is also pretty basic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<table id="thetable" cellspacing="0">
<thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
</thead>
<tfoot>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
</tfoot>
<tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
</tbody>
</table>

Styling the table should go pretty smoothly, but be warned, the plugin does some width/height calculations which require the styles to be in place prior to doing the calculations.

Here is the demo CSS which should get you started:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.tablescroll {
    font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
.tablescroll td,
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot {
    border:1px solid #ccc;
}
 
.tablescroll td {
    padding:3px 5px;
    border-bottom:0;
    border-right:0;
}
 
.tablescroll_wrapper {
    background-color:#fff;
    border-left:0;
}
 
.tablescroll_head,
.tablescroll_foot {
    background-color:#eee;
    border-left:0;
    border-top:0;
    font-size:11px;
    font-weight:bold;
}
 
.tablescroll_head {
    margin-bottom:3px;
}
 
.tablescroll_foot {
    margin-top:3px;
}
 
.tablescroll tbody tr.first td {
    border-top:0;
}

The plugin is basic and only has a few options:

1
2
3
4
5
6
7
$.fn.tableScroll.defaults =
{
    flush: true, // makes the last thead and tbody column flush with the scrollbar
    width: null, // width of the table (head, body and foot), null defaults to the tables natural width
    height: 100, // height of the scrollable area
    containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
};

Like most jQuery plugins, implementation is a snap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery(document).ready(function($)
{
    $('#thetable').tableScroll({height:200});
 
    // other examples
 
    // sets the table to have a scrollable area of 200px
    $('#thetable').tableScroll({height:200});
 
    // sets a hard width limit for the table, setting this too small
    // may not always work
    $('#thetable').tableScroll({width:400});
 
    // by default the plugin will wrap everything in a div with this
    // css class, if it finds that you have manually wrapped the
    // table with a custom element using this same css class it
    // will forgo creating a container DIV element
    $('#thetable').tableScroll({containerClass:'myCustomClass'});
});

Like many projects, we developers build out of necessity. I couldn’t quite find what I needed, so i wrote my own! This plugin accomplished all of what I needed, and I thought it useful enough that I would share. If you have any feature requests and/or bug reports please let me know. And the plugin name is pretty generic too (if you have a better one, feel free to drop me a line).

I’ve tested the plugin on Windows with Chrome, FF 3.6, IE 6, IE 8, Safari 4. If anyone is on a Mac, please let me know what your results are?

Download

jQuery TableScroll plugin, this project is on github

Posted by 1010

티스토리툴바