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>
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.
<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.- Use "WIDTH" parameter for sizing the columns in <THEAD> section:
<th width="60px"></th>