Monday, August 19, 2013

I decided to make a scrolling table on page.
I think the solution is simple to use, so as not to use a lot of options.
And the code of script is too small (~5Kb)
Tested on:
Firefox 7.0.1+
Chrome 7.0.517.44+
Opera 9.8+
Safari 5.1.7+

MSIE 8+


How it working:

Create div element with styling size on page and loading by JQuery a formated table from other page/script

How to use:

Simple, add this code to your page in head section (of course, include this code after JQuery library):
<script src="tablescroll.js"></script>

and create the div element on body section:
<div id="anyname" style="width:800px; height:400px"></div>


And use this function:

fixedHeader( id_div, url, data, hoverClass )

where:

id_div - id of div element (ex: "anyname")
url - page/script that return one formated table for scrolling
data - send any parameters to url (ex: {data_ini: '08/05/2013', data_fin: '08/10/2013', group: 1})
hoverClass - class name to highlight the selected row (ex: 'ui-state-highlight')

Example of use:

fixedHeader( 'anyname', 'getTable.asp',{data_ini: '08/05/2013', data_fin: '08/10/2013', group: 1},'ui-state-highlight' )

Note:

- Use JQueryUI www.jqueryui.com for theme of table (recomended)
   For visual effect You can assign the ui-class to <TR> element of <THEAD> or <TBODY>
   This action do in the script then build the table

- For sizing the table use style of div:
   <div id="table" styte="width:1000px; height:500px">
   or  <div id="table" styte="width:95%; height:95%">

- The width of first fixed column will be setting from table:

   <th width="200px">First Column</th>

- The table must be created using
ID<THEAD>, <TH>, <TBODY> elements.
   
- Can add multiple rows to <THEAD> element, using ROWSPAN and COLSPAN atributes, but the last row will be without this atributes. 

- Use "WIDTH" parameter for sizing the columns in
<THEAD> section:
   <th width="60px"></th>

You can view the demo or download the code.

No comments:

Post a Comment