wip javascript
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
|
||||
<title>DataTables example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
td { white-space: nowrap; }
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="media/js/Scroller.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"fnInitComplete": function () {
|
||||
this.oScroller.fnScrollToRow( 1000 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container" style="width:980px">
|
||||
<div class="full_width big">
|
||||
Scroller API example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows a trivial use of the Scroller API to scroll the table to row 1000 once the table has been loaded. Any number could be used here, and a small animated effect is used to provide visual feedback to the user (this can be disabled by passed false as a second parameter to fnScrollToRow).</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP</th>
|
||||
<th width="33%">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"fnInitComplete": function () {
|
||||
this.oScroller.fnScrollToRow( 1000 );
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<div class="demo_links">
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation of Scroller</a></li>
|
||||
<li><a href="state_saving.html">State saving</a></li>
|
||||
<li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
||||
<li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
||||
<li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
|
||||
<title>DataTables example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
td { white-space: nowrap; }
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="media/js/Scroller.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container" style="width:980px">
|
||||
<div class="full_width big">
|
||||
Scroller basic initialisation example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Scroller is a plug-in for DataTables which enhances the "infinite scrolling" feature that DataTables has built-in to make the scrolling feel more natural. The scrolling box shown on the page is the full height of the drawn table, but a virtual rendering technique is used to only render the part of the table that is actually viewable in the scrolling viewport in order to increase the speed of drawing.</p>
|
||||
<p>Note that Scroller assumes that all rows are of the same height (in order to preform the required calculations. You can use 'td { white-space: nowrap; }' in your CSS to ensure that text in rows does not wrap.</p>
|
||||
<p>This example shows how Scroller for DataTables can be initialised by simply including the character 'S' in sDom (note that the 'S' must come after the 't' in sDom). Deferred rendering an and Ajax data source are also used in this example.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP</th>
|
||||
<th width="33%">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<div class="demo_links">
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation of Scroller</a></li>
|
||||
<li><a href="state_saving.html">State saving</a></li>
|
||||
<li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
||||
<li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
||||
<li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
|
||||
<title>DataTables example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
td { white-space: nowrap; }
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="media/js/Scroller.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
var aaData = [];
|
||||
for ( var i=0 ; i<50000 ; i++ ) {
|
||||
aaData.push( [ i, i, i, i, i ] );
|
||||
}
|
||||
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"aaData": aaData,
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container" style="width:980px">
|
||||
<div class="full_width big">
|
||||
Scroller example - 50'000 rows
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example is completely artificial in that the data generated is created on the client-side by just looping around a Javascript array and then passing that to DataTables. However, it does show quite nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite nicely. Typically data such as this would be Ajax sourced and server-side processing should be considered. Please be aware that the performance of this page will depend on your browser - for example IE6 will crawl!</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
<th>Column 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready(function() {
|
||||
var aaData = [];
|
||||
for ( var i=1 ; i<50000 ; i++ ) {
|
||||
aaData.push( [ i, i, i, i, i ] );
|
||||
}
|
||||
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"aaData": aaData,
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<div class="demo_links">
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation of Scroller</a></li>
|
||||
<li><a href="state_saving.html">State saving</a></li>
|
||||
<li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
||||
<li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
||||
<li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
+174
@@ -0,0 +1,174 @@
|
||||
<?php
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Easy set variables
|
||||
*/
|
||||
|
||||
/* Array of database columns which should be read and sent back to DataTables. Use a space where
|
||||
* you want to insert a non-database field (for example a counter or static image)
|
||||
*/
|
||||
$aColumns = array( 'id', 'firstname', 'surname', 'zip', 'country' );
|
||||
|
||||
/* Indexed column (used for fast and accurate table cardinality) */
|
||||
$sIndexColumn = "id";
|
||||
|
||||
/* DB table to use */
|
||||
$sTable = "massive";
|
||||
|
||||
/* Database connection information */
|
||||
$gaSql['user'] = "";
|
||||
$gaSql['password'] = "";
|
||||
$gaSql['db'] = "";
|
||||
$gaSql['server'] = "localhost";
|
||||
|
||||
/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
|
||||
include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
|
||||
* no need to edit below this line
|
||||
*/
|
||||
|
||||
/*
|
||||
* MySQL connection
|
||||
*/
|
||||
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
|
||||
die( 'Could not open connection to server' );
|
||||
|
||||
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
|
||||
die( 'Could not select database '. $gaSql['db'] );
|
||||
|
||||
|
||||
/*
|
||||
* Paging
|
||||
*/
|
||||
$sLimit = "";
|
||||
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
|
||||
{
|
||||
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
|
||||
mysql_real_escape_string( $_GET['iDisplayLength'] );
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Ordering
|
||||
*/
|
||||
$sOrder = "";
|
||||
if ( isset( $_GET['iSortCol_0'] ) )
|
||||
{
|
||||
$sOrder = "ORDER BY ";
|
||||
for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
|
||||
{
|
||||
if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
|
||||
{
|
||||
$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
|
||||
".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
|
||||
}
|
||||
}
|
||||
|
||||
$sOrder = substr_replace( $sOrder, "", -2 );
|
||||
if ( $sOrder == "ORDER BY" )
|
||||
{
|
||||
$sOrder = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Filtering
|
||||
* NOTE this does not match the built-in DataTables filtering which does it
|
||||
* word by word on any field. It's possible to do here, but concerned about efficiency
|
||||
* on very large tables, and MySQL's regex functionality is very limited
|
||||
*/
|
||||
$sWhere = "";
|
||||
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
|
||||
{
|
||||
$sWhere = "WHERE (";
|
||||
for ( $i=0 ; $i<count($aColumns) ; $i++ )
|
||||
{
|
||||
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
|
||||
}
|
||||
$sWhere = substr_replace( $sWhere, "", -3 );
|
||||
$sWhere .= ')';
|
||||
}
|
||||
|
||||
/* Individual column filtering */
|
||||
for ( $i=0 ; $i<count($aColumns) ; $i++ )
|
||||
{
|
||||
if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
|
||||
{
|
||||
if ( $sWhere == "" )
|
||||
{
|
||||
$sWhere = "WHERE ";
|
||||
}
|
||||
else
|
||||
{
|
||||
$sWhere .= " AND ";
|
||||
}
|
||||
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* SQL queries
|
||||
* Get data to display
|
||||
*/
|
||||
$sQuery = "
|
||||
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
|
||||
FROM $sTable
|
||||
$sWhere
|
||||
$sOrder
|
||||
$sLimit
|
||||
";
|
||||
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
|
||||
|
||||
/* Data set length after filtering */
|
||||
$sQuery = "
|
||||
SELECT FOUND_ROWS()
|
||||
";
|
||||
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
|
||||
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
|
||||
$iFilteredTotal = $aResultFilterTotal[0];
|
||||
|
||||
/* Total data set length */
|
||||
$sQuery = "
|
||||
SELECT COUNT(".$sIndexColumn.")
|
||||
FROM $sTable
|
||||
";
|
||||
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
|
||||
$aResultTotal = mysql_fetch_array($rResultTotal);
|
||||
$iTotal = $aResultTotal[0];
|
||||
|
||||
|
||||
/*
|
||||
* Output
|
||||
*/
|
||||
$output = array(
|
||||
"sEcho" => intval($_GET['sEcho']),
|
||||
"iTotalRecords" => $iTotal,
|
||||
"iTotalDisplayRecords" => $iFilteredTotal,
|
||||
"aaData" => array()
|
||||
);
|
||||
|
||||
while ( $aRow = mysql_fetch_array( $rResult ) )
|
||||
{
|
||||
$row = array();
|
||||
for ( $i=0 ; $i<count($aColumns) ; $i++ )
|
||||
{
|
||||
if ( $aColumns[$i] == "version" )
|
||||
{
|
||||
/* Special output formatting for 'version' column */
|
||||
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
|
||||
}
|
||||
else if ( $aColumns[$i] != ' ' )
|
||||
{
|
||||
/* General output */
|
||||
$row[] = $aRow[ $aColumns[$i] ];
|
||||
}
|
||||
}
|
||||
$output['aaData'][] = $row;
|
||||
}
|
||||
|
||||
echo json_encode( $output );
|
||||
?>
|
||||
+384
@@ -0,0 +1,384 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Class: Scroller - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
<h1 class="page-title">Class: Scroller</h1>
|
||||
|
||||
<div class="page-info">
|
||||
Scroller v1.0.0 documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="fw_nav">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#top">Overview</a></li>
|
||||
<li><a href="#summary">Summary</a><div><a href="#summary_namespaces">Namespaces</a> | <a href="#summary_methods">Methods</a></div></li><li><a href="#details">Details</a><div><a href="#details_methods">Methods</a></div></li></ul>
|
||||
<div style="margin-top: 10px;">
|
||||
<input type="hidden" name="show_private" value="0">
|
||||
<span id="private_label">Hiding</span> private elements
|
||||
(<a id="private_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="show_extended" value="1">
|
||||
<span id="extended_label">Showing</span> extended elements
|
||||
(<a id="extended_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<a name="overview"></a>
|
||||
<div class="doc_overview">
|
||||
<div class="nav_blocker"></div>
|
||||
<dl><dt id="<anonymous>~Scroller" class=" even"><a name="Scroller_details"></a><span class="type-attr"></span><span class="type-name"><a>new Scroller</a></span><span class="type-sig"><span class="type-brace">(</span> oDT:<span class="type-param">object</span>, [oOpts:<span class="type-param">object</span>] <span class="type-brace">)</span></span></span></dt><dd class=" even"><p class="description">Scroller is a virtual rendering plug-in for DataTables which allows large
|
||||
datasets to be drawn on screen every quickly. What the virtual rendering means
|
||||
is that only the visible portion of the table (and a bit to either side to make
|
||||
the scrolling smooth) is drawn, while the scrolling container gives the
|
||||
visual impression that the whole table is visible. This is done by making use
|
||||
of the pagination abilities of DataTables and moving the table around in the
|
||||
scrolling container DataTables adds to the page. The scrolling container is
|
||||
forced to the height it would be for the full table display using an extra
|
||||
element. <br><br>Note that rows in the table MUST all be the same hight. Information in a cell
|
||||
which expands on to multiple lines will cause some odd behaviour in the scrolling.<br><br>Scroller is initialised by simply including the letter 'S' in the sDom for the
|
||||
table you want to have this feature enabled on. Note that the 'S' must come
|
||||
AFTER the 't' parameter in sDom.<br><br>Key features include:
|
||||
<ul class="limit_length">
|
||||
<li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
|
||||
<li>Full compatibility with deferred rendering in DataTables 1.8 for maximum speed</li>
|
||||
<li>Correct visual scrolling implementation, similar to "infinite scrolling" in DataTable core</li>
|
||||
<li>Integration with state saving in DataTables (scrolling position is saved)</li>
|
||||
<li>Easy to use</li>
|
||||
</ul></p><h3>Constructor</h3><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="20"></th>
|
||||
<th width="12%" class="bottom_border name">Name</th>
|
||||
<th width="10%" class="bottom_border">Type</th>
|
||||
<th width="10%" class="bottom_border">Attributes</th>
|
||||
<th width="10%" class="bottom_border">Default</th>
|
||||
<th class="last bottom_border">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oDT</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last">DataTables settings object</td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oOpts</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default">{}</td><td class="description last">Configuration object for FixedColumns. Options are defined by Scroller.oDefaults</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Example:</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> $(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/dataset/large.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
} );
|
||||
} );</pre>
|
||||
</div>
|
||||
</dl><h3 class="subsection-title">Requires</h3>
|
||||
<ul>
|
||||
<li>jQuery 1.4+</li><li>DataTables 1.8.0+</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="doc_summary">
|
||||
<a name="summary"></a>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
|
||||
<dl>
|
||||
<dt class="even"><span class="type-name"><a href="_anonymous__Scroller_dom.html">dom</a></span></dt><dd class="even">DOM elements used by the class instance</dd><dt class="odd"><span class="type-name"><a href="_anonymous__Scroller.oDefaults.html">oDefaults</a></span></dt><dd class="odd">Scroller default settings for initialisation</dd><dt class="even"><span class="type-name"><a href="_anonymous__Scroller_s.html">s</a></span></dt><dd class="even">Settings object which contains customisable information for the Scroller instance</dd>
|
||||
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods</h3>
|
||||
|
||||
<dl>
|
||||
<dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#fnPixelsToRow_details">fnPixelsToRow</a></span><span class="type-sig"><span class="type-brace">(</span> iPixels:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">int</span></span></dt><dd class=" even">Calculate the row number that will be found at the given pixel position (y-scroll)</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#fnRowToPixels_details">fnRowToPixels</a></span><span class="type-sig"><span class="type-brace">(</span> iRow:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">int</span></span></dt><dd class=" odd">Calculate the pixel position from the top of the scrolling container for a given row</dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#fnScrollToRow_details">fnScrollToRow</a></span><span class="type-sig"><span class="type-brace">(</span> iRow:<span class="type-param">int</span>, [bAnimate:<span class="type-param">bool</span>] <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class=" even">Calculate the row number that will be found at the given pixel position (y-scroll)</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnCalcRowHeight_details">_fnCalcRowHeight</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Automatic calculation of table row height. This is just a little tricky here as using
|
||||
initialisation DataTables has tale the table out of the document, so we need to create
|
||||
a new table and insert it into the document, calculate the row height and then whip the
|
||||
table out.</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnConstruct_details">_fnConstruct</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Initialisation for Scroller</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnDrawCallback_details">_fnDrawCallback</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Draw callback function which is fired when the DataTable is redrawn. The main function of
|
||||
this method is to position the drawn table correctly the scrolling container for the rows
|
||||
that is displays as a result of the scrolling position.</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnInfo_details">_fnInfo</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Update any information elements that are controlled by the DataTable based on the scrolling
|
||||
viewport and what rows are visible in it. This function basically acts in the same way as
|
||||
_fnUpdateInfo in DataTables, and effectively replaces that function.</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnScroll_details">_fnScroll</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Scrolling function - fired whenever the scrolling position is changed. This method needs
|
||||
to use the stored values to see if the table should be redrawn as we are moving towards
|
||||
the end of the information that is currently drawn or not. If needed, then it will redraw
|
||||
the table based on the new position.</dd>
|
||||
</dl></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="doc_details">
|
||||
<a name="details"></a>
|
||||
<h2>Details</h2>
|
||||
<div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods</h3>
|
||||
<dl>
|
||||
<dt id="<anonymous>~Scroller#fnPixelsToRow" class=" even"><a name="fnPixelsToRow_details"></a><span class="type-attr"></span><span class="type-name"><a>fnPixelsToRow</a></span><span class="type-sig"><span class="type-brace">(</span> iPixels:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">int</span></span></span></dt><dd class=" even"><p class="description">Calculate the row number that will be found at the given pixel position (y-scroll)</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="20"></th>
|
||||
<th width="12%" class="bottom_border name">Name</th>
|
||||
<th width="10%" class="bottom_border">Type</th>
|
||||
<th width="10%" class="bottom_border">Attributes</th>
|
||||
<th width="10%" class="bottom_border">Default</th>
|
||||
<th class="last bottom_border">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iPixels</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last">Offset from top to caluclate the row number of</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Returns:</h5><p class="returns">Row index</p><h5>Example:</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> $(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/dataset/large.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"fnInitComplete": function () {
|
||||
// Find what row number is at 500px
|
||||
alert( this.oScroller.fnPixelsToRow( 500 ) );
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
</div>
|
||||
<dt id="<anonymous>~Scroller#fnRowToPixels" class=" odd"><a name="fnRowToPixels_details"></a><span class="type-attr"></span><span class="type-name"><a>fnRowToPixels</a></span><span class="type-sig"><span class="type-brace">(</span> iRow:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">int</span></span></span></dt><dd class=" odd"><p class="description">Calculate the pixel position from the top of the scrolling container for a given row</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="20"></th>
|
||||
<th width="12%" class="bottom_border name">Name</th>
|
||||
<th width="10%" class="bottom_border">Type</th>
|
||||
<th width="10%" class="bottom_border">Attributes</th>
|
||||
<th width="10%" class="bottom_border">Default</th>
|
||||
<th class="last bottom_border">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last">Row number to calculate the position of</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Returns:</h5><p class="returns">Pixels</p><h5>Example:</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> $(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/dataset/large.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"fnInitComplete": function () {
|
||||
// Find where row 25 is
|
||||
alert( this.oScroller.fnRowToPixels( 25 ) );
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
</div>
|
||||
<dt id="<anonymous>~Scroller#fnScrollToRow" class=" even"><a name="fnScrollToRow_details"></a><span class="type-attr"></span><span class="type-name"><a>fnScrollToRow</a></span><span class="type-sig"><span class="type-brace">(</span> iRow:<span class="type-param">int</span>, [bAnimate:<span class="type-param">bool</span>] <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class=" even"><p class="description">Calculate the row number that will be found at the given pixel position (y-scroll)</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Parameters:</h5>
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="20"></th>
|
||||
<th width="12%" class="bottom_border name">Name</th>
|
||||
<th width="10%" class="bottom_border">Type</th>
|
||||
<th width="10%" class="bottom_border">Attributes</th>
|
||||
<th width="10%" class="bottom_border">Default</th>
|
||||
<th class="last bottom_border">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last">Row index to scroll to</td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">bAnimate</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last">Animate the transision or not</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Example:</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> $(document).ready(function() {
|
||||
$('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/dataset/large.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"fnInitComplete": function () {
|
||||
// Immediately scroll to row 1000
|
||||
this.oScroller.fnScrollToRow( 1000 );
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
</div>
|
||||
<dt id="<anonymous>~Scroller#_fnCalcRowHeight" class="private odd"><a name="_fnCalcRowHeight_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnCalcRowHeight</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Automatic calculation of table row height. This is just a little tricky here as using
|
||||
initialisation DataTables has tale the table out of the document, so we need to create
|
||||
a new table and insert it into the document, calculate the row height and then whip the
|
||||
table out.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><dt id="<anonymous>~Scroller#_fnConstruct" class="private even"><a name="_fnConstruct_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnConstruct</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Initialisation for Scroller</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><dt id="<anonymous>~Scroller#_fnDrawCallback" class="private odd"><a name="_fnDrawCallback_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnDrawCallback</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Draw callback function which is fired when the DataTable is redrawn. The main function of
|
||||
this method is to position the drawn table correctly the scrolling container for the rows
|
||||
that is displays as a result of the scrolling position.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><dt id="<anonymous>~Scroller#_fnInfo" class="private even"><a name="_fnInfo_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnInfo</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Update any information elements that are controlled by the DataTable based on the scrolling
|
||||
viewport and what rows are visible in it. This function basically acts in the same way as
|
||||
_fnUpdateInfo in DataTables, and effectively replaces that function.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><dt id="<anonymous>~Scroller#_fnScroll" class="private odd"><a name="_fnScroll_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnScroll</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Scrolling function - fired whenever the scrolling position is changed. This method needs
|
||||
to use the stored values to see if the table should be redrawn as we are moving towards
|
||||
the end of the information that is currently drawn or not. If needed, then it will redraw
|
||||
the table based on the new position.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</dd></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+189
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Namespace: oDefaults - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
<h1 class="page-title">Namespace: oDefaults</h1>
|
||||
<h2 class="ancestors">Ancestry: <span class="ancestors"><a href="_anonymous__Scroller.html">Scroller</a></span> » oDefaults</h2>
|
||||
<div class="page-info">
|
||||
Scroller v1.0.0 documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="fw_nav">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#top">Overview</a></li>
|
||||
<li><a href="#summary">Summary</a><div><a href="#summary_properties">Properties</a></div></li><li><a href="#details">Details</a><div><a href="#details_properties">Properties</a></div></li></ul>
|
||||
<div style="margin-top: 10px;">
|
||||
<input type="hidden" name="show_private" value="0">
|
||||
<span id="private_label">Hiding</span> private elements
|
||||
(<a id="private_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="show_extended" value="1">
|
||||
<span id="extended_label">Showing</span> extended elements
|
||||
(<a id="extended_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<a name="overview"></a>
|
||||
<div class="doc_overview">
|
||||
<div class="nav_blocker"></div>
|
||||
<p class="description">Scroller default settings for initialisation</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="doc_summary">
|
||||
<a name="summary"></a>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties</h3>
|
||||
|
||||
<dl>
|
||||
<dt class=" even"><span class="type-attr"><static> </span><span class="type-name"><a href="#rowHeight_details">rowHeight</a></span><span class="type-sig"> :<span class="type-signature">int|string</span></span></dt><dd class=" even">Scroller will attempt to automatically calculate the height of rows for it's internal
|
||||
calculations. However the height that is used can be overridden using this parameter.</dd><dt class=" odd"><span class="type-attr"><static> </span><span class="type-name"><a href="#serverWait_details">serverWait</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd">When using server-side processing, Scroller will wait a small amount of time to allow
|
||||
the scrolling to finish before requesting more data from the server. This prevents
|
||||
you from DoSing your own server! The wait time can be configured by this parameter.</dd><dt class=" even"><span class="type-attr"><static> </span><span class="type-name"><a href="#trace_details">trace</a></span><span class="type-sig"> :<span class="type-signature">bool</span></span></dt><dd class=" even">Indicate if Scroller show show trace information on the console or not. This can be
|
||||
useful when debugging Scroller or if just curious as to what it is doing, but should
|
||||
be turned off for production.</dd>
|
||||
</dl></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="doc_details">
|
||||
<a name="details"></a>
|
||||
<h2>Details</h2>
|
||||
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties</h3>
|
||||
<dl>
|
||||
<dt class=" even"><a name="rowHeight_details"></a><span class="type-attr"><static> </span><span class="type-name"><a href="#rowHeight_details">rowHeight</a></span><span class="type-sig"> :<span class="type-signature">int|string</span></span></dt><dd class=" even"><p class="description">Scroller will attempt to automatically calculate the height of rows for it's internal
|
||||
calculations. However the height that is used can be overridden using this parameter.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Example</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
"oScroller": {
|
||||
"rowHeight": 30
|
||||
}
|
||||
} );</pre>
|
||||
</div>
|
||||
</dd><dt class=" odd"><a name="serverWait_details"></a><span class="type-attr"><static> </span><span class="type-name"><a href="#serverWait_details">serverWait</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd"><p class="description">When using server-side processing, Scroller will wait a small amount of time to allow
|
||||
the scrolling to finish before requesting more data from the server. This prevents
|
||||
you from DoSing your own server! The wait time can be configured by this parameter.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Example</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
"oScroller": {
|
||||
"serverWait": 100
|
||||
}
|
||||
} );</pre>
|
||||
</div>
|
||||
</dd><dt class=" even"><a name="trace_details"></a><span class="type-attr"><static> </span><span class="type-name"><a href="#trace_details">trace</a></span><span class="type-sig"> :<span class="type-signature">bool</span></span></dt><dd class=" even"><p class="description">Indicate if Scroller show show trace information on the console or not. This can be
|
||||
useful when debugging Scroller or if just curious as to what it is doing, but should
|
||||
be turned off for production.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h5>Example</h5>
|
||||
<div class="example-code">
|
||||
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true
|
||||
"oScroller": {
|
||||
"trace": true
|
||||
}
|
||||
} );</pre>
|
||||
</div>
|
||||
</dd>
|
||||
</dl></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Namespace: dom - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
<h1 class="page-title">Namespace: dom</h1>
|
||||
<h2 class="ancestors">Ancestry: <span class="ancestors"><a href="_anonymous__Scroller.html">Scroller</a></span> » dom</h2>
|
||||
<div class="page-info">
|
||||
Scroller v1.0.0 documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="fw_nav">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#top">Overview</a></li>
|
||||
<li><a href="#summary">Summary</a><div></div></li><li><a href="#details">Details</a><div></div></li></ul>
|
||||
<div style="margin-top: 10px;">
|
||||
<input type="hidden" name="show_private" value="0">
|
||||
<span id="private_label">Hiding</span> private elements
|
||||
(<a id="private_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="show_extended" value="1">
|
||||
<span id="extended_label">Showing</span> extended elements
|
||||
(<a id="extended_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<a name="overview"></a>
|
||||
<div class="doc_overview">
|
||||
<div class="nav_blocker"></div>
|
||||
<p class="description">DOM elements used by the class instance</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="doc_summary">
|
||||
<a name="summary"></a>
|
||||
<h2>Summary</h2>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="doc_details">
|
||||
<a name="details"></a>
|
||||
<h2>Details</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Namespace: s - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
<h1 class="page-title">Namespace: s</h1>
|
||||
<h2 class="ancestors">Ancestry: <span class="ancestors"><a href="_anonymous__Scroller.html">Scroller</a></span> » s</h2>
|
||||
<div class="page-info">
|
||||
Scroller v1.0.0 documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="fw_nav">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#top">Overview</a></li>
|
||||
<li><a href="#summary">Summary</a><div></div></li><li><a href="#details">Details</a><div></div></li></ul>
|
||||
<div style="margin-top: 10px;">
|
||||
<input type="hidden" name="show_private" value="0">
|
||||
<span id="private_label">Hiding</span> private elements
|
||||
(<a id="private_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="show_extended" value="1">
|
||||
<span id="extended_label">Showing</span> extended elements
|
||||
(<a id="extended_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<a name="overview"></a>
|
||||
<div class="doc_overview">
|
||||
<div class="nav_blocker"></div>
|
||||
<p class="description">Settings object which contains customisable information for the Scroller instance</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl><h3 class="subsection-title">Extends</h3>
|
||||
<ul>
|
||||
<li>Scroller.DEFAULTS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="doc_summary">
|
||||
<a name="summary"></a>
|
||||
<h2>Summary</h2>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="doc_details">
|
||||
<a name="details"></a>
|
||||
<h2>Details</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Global - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
<h1 class="page-title">Global</h1>
|
||||
|
||||
<div class="page-info">
|
||||
Scroller v1.0.0 documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="fw_nav">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#top">Overview</a></li>
|
||||
<li><a href="#summary">Summary</a><div><a href="#summary_properties">Properties</a></div></li><li><a href="#details">Details</a><div><a href="#details_properties">Properties</a></div></li></ul>
|
||||
<div style="margin-top: 10px;">
|
||||
<input type="hidden" name="show_private" value="0">
|
||||
<span id="private_label">Hiding</span> private elements
|
||||
(<a id="private_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="show_extended" value="1">
|
||||
<span id="extended_label">Showing</span> extended elements
|
||||
(<a id="extended_toggle" href="">toggle</a>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<a name="overview"></a>
|
||||
<div class="doc_overview">
|
||||
<div class="nav_blocker"></div>
|
||||
<dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="doc_summary">
|
||||
<a name="summary"></a>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties</h3>
|
||||
|
||||
<dl>
|
||||
<dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#drawTO_details">drawTO</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even">setTimeout reference for the redraw, used when server-side processing is enabled in the
|
||||
DataTables in order to prevent DoSing the server</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#dt_details">dt</a></span><span class="type-sig"> :<span class="type-signature">object</span></span></dt><dd class=" odd">DataTables settings object</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#redrawBottom_details">redrawBottom</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class="private even">Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
when scrolling down the way. Note that this is actually caluated as the offset from
|
||||
the top.</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#redrawTop_details">redrawTop</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class="private odd">Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
when scrolling up the way.</dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#rowHeight_details">rowHeight</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even">Height of rows in the table</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#stateTO_details">stateTO</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd">setTimeout reference for state saving, used when state saving is enabled in the DataTable
|
||||
and when the user scrolls the viewport in order to stop the cookie set taking too much
|
||||
CPU!</dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#tableBottom_details">tableBottom</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even">Pixel location of the bottom of the drawn table in the viewport</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#tableTop_details">tableTop</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd">Pixel location of the top of the drawn table in the viewport</dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#viewportHeight_details">viewportHeight</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even">Pixel height of the viewport</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#viewportRows_details">viewportRows</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd">Number of rows calculated as visible in the visible viewport</dd>
|
||||
</dl></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="doc_details">
|
||||
<a name="details"></a>
|
||||
<h2>Details</h2>
|
||||
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties</h3>
|
||||
<dl>
|
||||
<dt class=" even"><a name="drawTO_details"></a><span class="type-attr"></span><span class="type-name"><a href="#drawTO_details">drawTO</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even"><p class="description">setTimeout reference for the redraw, used when server-side processing is enabled in the
|
||||
DataTables in order to prevent DoSing the server</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" odd"><a name="dt_details"></a><span class="type-attr"></span><span class="type-name"><a href="#dt_details">dt</a></span><span class="type-sig"> :<span class="type-signature">object</span></span></dt><dd class=" odd"><p class="description">DataTables settings object</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class="private even"><a name="redrawBottom_details"></a><span class="type-attr"><private> </span><span class="type-name"><a href="#redrawBottom_details">redrawBottom</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class="private even"><p class="description">Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
when scrolling down the way. Note that this is actually caluated as the offset from
|
||||
the top.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class="private odd"><a name="redrawTop_details"></a><span class="type-attr"><private> </span><span class="type-name"><a href="#redrawTop_details">redrawTop</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class="private odd"><p class="description">Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
when scrolling up the way.</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" even"><a name="rowHeight_details"></a><span class="type-attr"></span><span class="type-name"><a href="#rowHeight_details">rowHeight</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even"><p class="description">Height of rows in the table</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" odd"><a name="stateTO_details"></a><span class="type-attr"></span><span class="type-name"><a href="#stateTO_details">stateTO</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd"><p class="description">setTimeout reference for state saving, used when state saving is enabled in the DataTable
|
||||
and when the user scrolls the viewport in order to stop the cookie set taking too much
|
||||
CPU!</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" even"><a name="tableBottom_details"></a><span class="type-attr"></span><span class="type-name"><a href="#tableBottom_details">tableBottom</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even"><p class="description">Pixel location of the bottom of the drawn table in the viewport</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" odd"><a name="tableTop_details"></a><span class="type-attr"></span><span class="type-name"><a href="#tableTop_details">tableTop</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd"><p class="description">Pixel location of the top of the drawn table in the viewport</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" even"><a name="viewportHeight_details"></a><span class="type-attr"></span><span class="type-name"><a href="#viewportHeight_details">viewportHeight</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" even"><p class="description">Pixel height of the viewport</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd><dt class=" odd"><a name="viewportRows_details"></a><span class="type-attr"></span><span class="type-name"><a href="#viewportRows_details">viewportRows</a></span><span class="type-sig"> :<span class="type-signature">int</span></span></dt><dd class=" odd"><p class="description">Number of rows calculated as visible in the visible viewport</p><dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl></dd>
|
||||
</dl></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Table of Contents - documentation</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
@import "media/css/doc.css";
|
||||
@import "media/css/shCore.css";
|
||||
@import "media/css/shThemeDataTables.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="media/js/shCore.js"></script>
|
||||
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
|
||||
<script type="text/javascript" src="media/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="media/js/doc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fw_container">
|
||||
<a name="top"></a>
|
||||
<div class="fw_header">
|
||||
</div>
|
||||
|
||||
<div class="fw_content">
|
||||
<h3 class="subsection-title">Table of Contents</h3>
|
||||
<dl>
|
||||
<dt><a href="_anonymous__Scroller.html">Scroller</a></dt><dd>Scroller is a virtual rendering plug-in for DataTables which allows large
|
||||
datasets to be drawn on screen every quickly. What the virtual rendering means
|
||||
is that only the visible portion of the table (and a bit to either side to make
|
||||
the scrolling smooth) is drawn, while the scrolling container gives the
|
||||
visual impression that the whole table is visible. This is done by making use
|
||||
of the pagination abilities of DataTables and moving the table around in the
|
||||
scrolling container DataTables adds to the page. The scrolling container is
|
||||
forced to the height it would be for the full table display using an extra
|
||||
element. <br><br>Note that rows in the table MUST all be the same hight. Information in a cell
|
||||
which expands on to multiple lines will cause some odd behaviour in the scrolling.<br><br>Scroller is initialised by simply including the letter 'S' in the sDom for the
|
||||
table you want to have this feature enabled on. Note that the 'S' must come
|
||||
AFTER the 't' parameter in sDom.<br><br>Key features include:
|
||||
<ul class="limit_length">
|
||||
<li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
|
||||
<li>Full compatibility with deferred rendering in DataTables 1.8 for maximum speed</li>
|
||||
<li>Correct visual scrolling implementation, similar to "infinite scrolling" in DataTable core</li>
|
||||
<li>Integration with state saving in DataTables (scrolling position is saved)</li>
|
||||
<li>Easy to use</li>
|
||||
</ul></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fw_footer">
|
||||
Scroller: Copyright 2011 Allan Jardine, all rights reserved<br>
|
||||
|
||||
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
||||
10th Sep 2011 - 10:47
|
||||
with the <a href="http://datatables.net/">DataTables</a> template.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+316
@@ -0,0 +1,316 @@
|
||||
/*
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 0.12.0
|
||||
*/
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
|
||||
table{border-collapse:collapse;border-spacing:0;}
|
||||
fieldset,img{border:0;}
|
||||
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
|
||||
ol,ul {list-style:none;}
|
||||
caption,th {text-align:left;}
|
||||
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
|
||||
q:before,q:after{content:'';}
|
||||
abbr,acronym {border:0;}
|
||||
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font: 14px/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
div.fw_container {
|
||||
width: 980px;
|
||||
padding-top: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.fw_header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.fw_content {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
div.fw_footer {
|
||||
padding-top: 4em;
|
||||
font-size: 75%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.type-param {
|
||||
|
||||
}
|
||||
|
||||
.type-attr {
|
||||
float: right;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.type-sig {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.type-param {
|
||||
color: #FF9999;
|
||||
}
|
||||
|
||||
.type-return {
|
||||
color: #FF8080;
|
||||
}
|
||||
|
||||
.type-brace {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.example-code td.code {
|
||||
border-top: 1px solid #4E6CA3 !important;
|
||||
}
|
||||
|
||||
.type-augmented {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
dt, dd {
|
||||
padding: 0.4em 10px;
|
||||
}
|
||||
|
||||
dt {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
dd {
|
||||
position: relative;
|
||||
padding-top: 0 !important;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
dt.even, dd.even {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
dt.odd, dd.odd {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
div.doc_overview dd, div.doc_overview dt {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.doc_details dt, .doc_details dd {
|
||||
padding: 1em 10px;
|
||||
}
|
||||
|
||||
.right_border div {
|
||||
width: 20px;
|
||||
padding: 2px 0.5em 2px 1em;
|
||||
text-align: right;
|
||||
}
|
||||
.right_border {
|
||||
border-right: 3px solid #4E6CA3;
|
||||
}
|
||||
.bottom_border {
|
||||
border-bottom: 1px solid #4E6CA3;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #4E6CA3;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
div.fw_content ul {
|
||||
list-style-image: url('../images/arrow.jpg');
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-top: 2em;
|
||||
border-bottom: 3px solid #829ac6;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
margin-top: 1em;
|
||||
border-bottom: 1px solid #A4B5D5;
|
||||
padding-left: 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
h2.ancestors {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
div.doc_summary, div.doc_details {
|
||||
margin-top: 2em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.doc_group {
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid #A4B5D5;
|
||||
border-left: 1px solid #A4B5D5;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
div.extended {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
table.params {
|
||||
margin-left: 30px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
tr.odd {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
tr.even {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
th.name,
|
||||
td.name {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
td.number {
|
||||
background-color: white;
|
||||
color: #5C5C5C;
|
||||
}
|
||||
|
||||
dd.odd td.number {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
p.returns {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
div.page-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.private {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
div.fw_nav {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 30px;
|
||||
width: 250px;
|
||||
border: 1px solid #A4B5D5;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
z-index: 1001;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.fw_nav h2 {
|
||||
margin: -10px 0 10px -10px;
|
||||
width: 250px;
|
||||
padding: 5px 10px;
|
||||
background-color: #A4B5D5;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
div.fw_nav ul>li>div {
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
|
||||
div.nav_blocker {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.css_clear {
|
||||
clear: both;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.css_right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.css_center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.css_spacing {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.css_small {
|
||||
font-size: 75%;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
|
||||
.css_vsmall {
|
||||
font-size: 65%;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
.syntaxhighlighter a,
|
||||
.syntaxhighlighter div,
|
||||
.syntaxhighlighter code,
|
||||
.syntaxhighlighter table,
|
||||
.syntaxhighlighter table td,
|
||||
.syntaxhighlighter table tr,
|
||||
.syntaxhighlighter table tbody,
|
||||
.syntaxhighlighter table thead,
|
||||
.syntaxhighlighter table caption,
|
||||
.syntaxhighlighter textarea {
|
||||
-moz-border-radius: 0 0 0 0 !important;
|
||||
-webkit-border-radius: 0 0 0 0 !important;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
font-size: 1em !important;
|
||||
min-height: inherit !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.source {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.syntaxhighlighter .bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter .italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
.syntaxhighlighter .line {
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container {
|
||||
position: relative !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 2px 0.5em 2px 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .line {
|
||||
padding: 2px 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
|
||||
padding-left: 0em !important;
|
||||
}
|
||||
.syntaxhighlighter.show {
|
||||
display: block !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed table {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar span.title {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a.expandSource {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar {
|
||||
line-height: 8px !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.alt2 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted .number,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
|
||||
background: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .number {
|
||||
color: #bbbbbb !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .content {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
|
||||
color: #008200 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .preprocessor {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .variable {
|
||||
color: #aa7700 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .value {
|
||||
color: #009900 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .functions {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .constants {
|
||||
color: #0066cc !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .script {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
|
||||
color: red !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
|
||||
color: black !important;
|
||||
}
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
.syntaxhighlighter {
|
||||
background-color: white !important;
|
||||
font-size: 14px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.syntaxhighlighter .line.alt1 {
|
||||
background-color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .line.alt2 {
|
||||
background-color: #F8F8F8 !important;
|
||||
}
|
||||
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
|
||||
background-color: #e0e0e0 !important;
|
||||
}
|
||||
.syntaxhighlighter .line.highlighted.number {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter table caption {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter {
|
||||
}
|
||||
.syntaxhighlighter .gutter div {
|
||||
color: #5C5C5C !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter .gutter .line.alt2 {
|
||||
background-color: white !important;
|
||||
}
|
||||
.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter .gutter .line.alt2 {
|
||||
background-color: #F2F2F2 !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter .line {
|
||||
border-right: 3px solid #4E6CA3 !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter .line.highlighted {
|
||||
background-color: #4E6CA3 !important;
|
||||
color: white !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .content {
|
||||
border: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar {
|
||||
color: blue !important;
|
||||
background: white !important;
|
||||
border: 1px solid #4E6CA3 !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar a:hover {
|
||||
color: red !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar {
|
||||
color: white !important;
|
||||
background: #4E6CA3 !important;
|
||||
border: none !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a {
|
||||
color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a:hover {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
|
||||
color: #008200 !important;
|
||||
}
|
||||
.syntaxhighlighter .string, .syntaxhighlighter .string a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter .keyword {
|
||||
color: #006699 !important;
|
||||
}
|
||||
.syntaxhighlighter .preprocessor {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter .variable {
|
||||
color: #aa7700 !important;
|
||||
}
|
||||
.syntaxhighlighter .value {
|
||||
color: #009900 !important;
|
||||
}
|
||||
.syntaxhighlighter .functions {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter .constants {
|
||||
color: #0066cc !important;
|
||||
}
|
||||
.syntaxhighlighter .script {
|
||||
font-weight: bold !important;
|
||||
color: #006699 !important;
|
||||
background-color: none !important;
|
||||
}
|
||||
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter .keyword {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
+121
@@ -0,0 +1,121 @@
|
||||
|
||||
(function() {
|
||||
|
||||
var showingNav = true;
|
||||
|
||||
$(document).ready( function () {
|
||||
var jqNav = $('div.fw_nav');
|
||||
jqNav.css('right', ($(window).width() - $('div.fw_container').width()) /2);
|
||||
|
||||
var n = $('div.nav_blocker')[0];
|
||||
n.style.height = $(jqNav).outerHeight()+"px";
|
||||
n.style.width = $(jqNav).outerWidth()+"px";
|
||||
|
||||
SyntaxHighlighter.highlight();
|
||||
|
||||
$('#private_toggle').click( function () {
|
||||
if ( $('input[name=show_private]').val() == 0 ) {
|
||||
$('input[name=show_private]').val( 1 );
|
||||
$('#private_label').html('Showing');
|
||||
$('.private').css('display', 'block');
|
||||
} else {
|
||||
$('input[name=show_private]').val( 0 );
|
||||
$('#private_label').html('Hiding');
|
||||
$('.private').css('display', 'none');
|
||||
}
|
||||
fnWriteCookie();
|
||||
return false;
|
||||
} );
|
||||
|
||||
$('#extended_toggle').click( function () {
|
||||
if ( $('input[name=show_extended]').val() == 0 ) {
|
||||
$('input[name=show_extended]').val( 1 );
|
||||
$('#extended_label').html('Showing');
|
||||
$('.augmented').css('display', 'block');
|
||||
} else {
|
||||
$('input[name=show_extended]').val( 0 );
|
||||
$('#extended_label').html('Hiding');
|
||||
$('.augmented').css('display', 'none');
|
||||
}
|
||||
fnWriteCookie();
|
||||
return false;
|
||||
} );
|
||||
|
||||
var savedHeight = $(jqNav).height();
|
||||
$('div.fw_nav h2').click( function () {
|
||||
if ( showingNav ) {
|
||||
$('div.fw_nav').animate( {
|
||||
"height": 10,
|
||||
"opacity": 0.3
|
||||
} );
|
||||
showingNav = false;
|
||||
} else {
|
||||
$('div.fw_nav').animate( {
|
||||
"height": savedHeight,
|
||||
"opacity": 1
|
||||
} );
|
||||
showingNav = true;
|
||||
}
|
||||
fnWriteCookie();
|
||||
} );
|
||||
|
||||
var cookie = fnReadCookie( 'SpryMedia_JSDoc' );
|
||||
if ( cookie != null ) {
|
||||
var a = cookie.split('-');
|
||||
if ( a[0] == 1 ) {
|
||||
$('#private_toggle').click();
|
||||
}
|
||||
if ( a[1] == 0 ) {
|
||||
$('#extended_toggle').click();
|
||||
}
|
||||
if ( a[2] == 'false' ) {
|
||||
$('div.fw_nav').css('height', 10).css('opacity', 0.3);
|
||||
showingNav = false;
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
function fnWriteCookie()
|
||||
{
|
||||
var sVal =
|
||||
$('input[name=show_private]').val()+'-'+
|
||||
$('input[name=show_extended]').val()+'-'+
|
||||
showingNav;
|
||||
|
||||
fnCreateCookie( 'SpryMedia_JSDoc', sVal );
|
||||
}
|
||||
|
||||
|
||||
function fnCreateCookie( sName, sValue )
|
||||
{
|
||||
var iDays = 365;
|
||||
var date = new Date();
|
||||
date.setTime( date.getTime()+(iDays*24*60*60*1000) );
|
||||
var sExpires = "; expires="+date.toGMTString();
|
||||
|
||||
document.cookie = sName+"="+sValue+sExpires+"; path=/";
|
||||
}
|
||||
|
||||
|
||||
function fnReadCookie( sName )
|
||||
{
|
||||
var sNameEQ = sName + "=";
|
||||
var sCookieContents = document.cookie.split(';');
|
||||
|
||||
for( var i=0 ; i<sCookieContents.length ; i++ ) {
|
||||
var c = sCookieContents[i];
|
||||
|
||||
while (c.charAt(0)==' ') {
|
||||
c = c.substring(1,c.length);
|
||||
}
|
||||
|
||||
if (c.indexOf(sNameEQ) == 0) {
|
||||
return c.substring(sNameEQ.length,c.length);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
})();
|
||||
Vendored
+8316
File diff suppressed because it is too large
Load Diff
JavaScriptApps/resources/libs/DataTables-1.8.2/extras/Scroller/media/docs/media/js/shBrushJScript.js
Vendored
+52
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
;(function()
|
||||
{
|
||||
// CommonJS
|
||||
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
|
||||
|
||||
function Brush()
|
||||
{
|
||||
var keywords = 'break case catch continue ' +
|
||||
'default delete do else false ' +
|
||||
'for function if in instanceof ' +
|
||||
'new null return super switch ' +
|
||||
'this throw true try typeof var while with'
|
||||
;
|
||||
|
||||
var r = SyntaxHighlighter.regexLib;
|
||||
|
||||
this.regexList = [
|
||||
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
|
||||
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
|
||||
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
|
||||
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
|
||||
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.forHtmlScript(r.scriptScriptTags);
|
||||
};
|
||||
|
||||
Brush.prototype = new SyntaxHighlighter.Highlighter();
|
||||
Brush.aliases = ['js', 'jscript', 'javascript'];
|
||||
|
||||
SyntaxHighlighter.brushes.JScript = Brush;
|
||||
|
||||
// CommonJS
|
||||
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
|
||||
})();
|
||||
Vendored
+17
File diff suppressed because one or more lines are too long
+20
@@ -0,0 +1,20 @@
|
||||
Copyright (c) 2003, 2004 Jim Weirich
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,725 @@
|
||||
/**
|
||||
* @summary Scroller
|
||||
* @description Virtual rendering for DataTables
|
||||
* @file Scroller.js
|
||||
* @version 1.0.0
|
||||
* @author Allan Jardine (www.sprymedia.co.uk)
|
||||
* @license GPL v2 or BSD 3 point style
|
||||
* @contact www.sprymedia.co.uk/contact
|
||||
*
|
||||
* @copyright Copyright 2011 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* This source file is free software, under either the GPL v2 license or a
|
||||
* BSD style license, available at:
|
||||
* http://datatables.net/license_gpl2
|
||||
* http://datatables.net/license_bsd
|
||||
*/
|
||||
|
||||
(function($, window, document) {
|
||||
|
||||
|
||||
/**
|
||||
* Scroller is a virtual rendering plug-in for DataTables which allows large
|
||||
* datasets to be drawn on screen every quickly. What the virtual rendering means
|
||||
* is that only the visible portion of the table (and a bit to either side to make
|
||||
* the scrolling smooth) is drawn, while the scrolling container gives the
|
||||
* visual impression that the whole table is visible. This is done by making use
|
||||
* of the pagination abilities of DataTables and moving the table around in the
|
||||
* scrolling container DataTables adds to the page. The scrolling container is
|
||||
* forced to the height it would be for the full table display using an extra
|
||||
* element.
|
||||
*
|
||||
* Note that rows in the table MUST all be the same hight. Information in a cell
|
||||
* which expands on to multiple lines will cause some odd behaviour in the scrolling.
|
||||
*
|
||||
* Scroller is initialised by simply including the letter 'S' in the sDom for the
|
||||
* table you want to have this feature enabled on. Note that the 'S' must come
|
||||
* AFTER the 't' parameter in sDom.
|
||||
*
|
||||
* Key features include:
|
||||
* <ul class="limit_length">
|
||||
* <li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
|
||||
* <li>Full compatibility with deferred rendering in DataTables 1.8 for maximum speed</li>
|
||||
* <li>Correct visual scrolling implementation, similar to "infinite scrolling" in DataTable core</li>
|
||||
* <li>Integration with state saving in DataTables (scrolling position is saved)</li>
|
||||
* <li>Easy to use</li>
|
||||
* </ul>
|
||||
*
|
||||
* @class
|
||||
* @constructor
|
||||
* @param {object} oDT DataTables settings object
|
||||
* @param {object} [oOpts={}] Configuration object for FixedColumns. Options are defined by {@link Scroller.oDefaults}
|
||||
*
|
||||
* @requires jQuery 1.4+
|
||||
* @requires DataTables 1.8.0+
|
||||
*
|
||||
* @example
|
||||
* $(document).ready(function() {
|
||||
* $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sAjaxSource": "media/dataset/large.txt",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true
|
||||
* } );
|
||||
* } );
|
||||
*/
|
||||
var Scroller = function ( oDTSettings, oOpts ) {
|
||||
/* Sanity check - you just know it will happen */
|
||||
if ( ! this instanceof Scroller )
|
||||
{
|
||||
alert( "Scroller warning: Scroller must be initialised with the 'new' keyword." );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( typeof oOpts == 'undefined' )
|
||||
{
|
||||
oOpts = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Settings object which contains customisable information for the Scroller instance
|
||||
* @namespace
|
||||
* @extends Scroller.DEFAULTS
|
||||
*/
|
||||
this.s = $.extend( {
|
||||
/**
|
||||
* DataTables settings object
|
||||
* @type object
|
||||
* @default Passed in as first parameter to constructor
|
||||
*/
|
||||
"dt": oDTSettings,
|
||||
|
||||
/**
|
||||
* Pixel location of the top of the drawn table in the viewport
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"tableTop": 0,
|
||||
|
||||
/**
|
||||
* Pixel location of the bottom of the drawn table in the viewport
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"tableBottom": 0,
|
||||
|
||||
/**
|
||||
* Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
* when scrolling up the way.
|
||||
* @type int
|
||||
* @default 0
|
||||
* @private
|
||||
*/
|
||||
"redrawTop": 0,
|
||||
|
||||
/**
|
||||
* Pixel location of the boundary for when the next data set should be loaded and drawn
|
||||
* when scrolling down the way. Note that this is actually caluated as the offset from
|
||||
* the top.
|
||||
* @type int
|
||||
* @default 0
|
||||
* @private
|
||||
*/
|
||||
"redrawBottom": 0,
|
||||
|
||||
/**
|
||||
* Height of rows in the table
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"rowHeight": null,
|
||||
|
||||
/**
|
||||
* Pixel height of the viewport
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"viewportHeight": 0,
|
||||
|
||||
/**
|
||||
* Number of rows calculated as visible in the visible viewport
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"viewportRows": 0,
|
||||
|
||||
/**
|
||||
* setTimeout reference for state saving, used when state saving is enabled in the DataTable
|
||||
* and when the user scrolls the viewport in order to stop the cookie set taking too much
|
||||
* CPU!
|
||||
* @type int
|
||||
* @default 0
|
||||
*/
|
||||
"stateTO": null,
|
||||
|
||||
/**
|
||||
* setTimeout reference for the redraw, used when server-side processing is enabled in the
|
||||
* DataTables in order to prevent DoSing the server
|
||||
* @type int
|
||||
* @default null
|
||||
*/
|
||||
"drawTO": null
|
||||
}, Scroller.oDefaults, oOpts );
|
||||
|
||||
/**
|
||||
* DOM elements used by the class instance
|
||||
* @namespace
|
||||
*
|
||||
*/
|
||||
this.dom = {
|
||||
"force": document.createElement('div'),
|
||||
"scroller": null,
|
||||
"table": null
|
||||
};
|
||||
|
||||
/* Attach the instance to the DataTables instance so it can be accessed */
|
||||
this.s.dt.oInstance.oScroller = this;
|
||||
|
||||
/* Let's do it */
|
||||
this._fnConstruct();
|
||||
};
|
||||
|
||||
|
||||
|
||||
Scroller.prototype = {
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Public methods
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
/**
|
||||
* Calculate the pixel position from the top of the scrolling container for a given row
|
||||
* @param {int} iRow Row number to calculate the position of
|
||||
* @returns {int} Pixels
|
||||
* @example
|
||||
* $(document).ready(function() {
|
||||
* $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sAjaxSource": "media/dataset/large.txt",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true,
|
||||
* "fnInitComplete": function () {
|
||||
* // Find where row 25 is
|
||||
* alert( this.oScroller.fnRowToPixels( 25 ) );
|
||||
* }
|
||||
* } );
|
||||
* } );
|
||||
*/
|
||||
"fnRowToPixels": function ( iRow )
|
||||
{
|
||||
return iRow * this.s.rowHeight;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Calculate the row number that will be found at the given pixel position (y-scroll)
|
||||
* @param {int} iPixels Offset from top to caluclate the row number of
|
||||
* @returns {int} Row index
|
||||
* @example
|
||||
* $(document).ready(function() {
|
||||
* $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sAjaxSource": "media/dataset/large.txt",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true,
|
||||
* "fnInitComplete": function () {
|
||||
* // Find what row number is at 500px
|
||||
* alert( this.oScroller.fnPixelsToRow( 500 ) );
|
||||
* }
|
||||
* } );
|
||||
* } );
|
||||
*/
|
||||
"fnPixelsToRow": function ( iPixels )
|
||||
{
|
||||
return parseInt( iPixels / this.s.rowHeight, 10 );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Calculate the row number that will be found at the given pixel position (y-scroll)
|
||||
* @param {int} iRow Row index to scroll to
|
||||
* @param {bool} [bAnimate=true] Animate the transision or not
|
||||
* @returns {void}
|
||||
* @example
|
||||
* $(document).ready(function() {
|
||||
* $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sAjaxSource": "media/dataset/large.txt",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true,
|
||||
* "fnInitComplete": function () {
|
||||
* // Immediately scroll to row 1000
|
||||
* this.oScroller.fnScrollToRow( 1000 );
|
||||
* }
|
||||
* } );
|
||||
* } );
|
||||
*/
|
||||
"fnScrollToRow": function ( iRow, bAnimate )
|
||||
{
|
||||
var px = this.fnRowToPixels( iRow );
|
||||
if ( typeof bAnimate == 'undefined' || bAnimate )
|
||||
{
|
||||
$(this.dom.scroller).animate( {
|
||||
"scrollTop": px
|
||||
} );
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this.dom.scroller).scrollTop( px );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Private methods (they are of course public in JS, but recommended as private)
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
/**
|
||||
* Initialisation for Scroller
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
"_fnConstruct": function ()
|
||||
{
|
||||
var that = this;
|
||||
|
||||
/* Insert a div element that we can use to force the DT scrolling container to
|
||||
* the height that would be required if the whole table was being displayed
|
||||
*/
|
||||
this.dom.force.style.position = "absolute";
|
||||
this.dom.force.style.top = "0px";
|
||||
this.dom.force.style.left = "0px";
|
||||
this.dom.force.style.width = "1px";
|
||||
//this.dom.force.style.backgroundColor = "blue";
|
||||
|
||||
this.dom.scroller = $('div.dataTables_scrollBody', this.s.dt.nTableWrapper)[0];
|
||||
this.dom.scroller.appendChild( this.dom.force );
|
||||
this.dom.scroller.style.position = "relative";
|
||||
|
||||
this.dom.table = $('>table', this.dom.scroller)[0];
|
||||
this.dom.table.style.position = "absolute";
|
||||
this.dom.table.style.top = "0px";
|
||||
this.dom.table.style.left = "0px";
|
||||
|
||||
/* Calcuate and store information about how many rows are displayed in the scrolling
|
||||
* viewport
|
||||
*/
|
||||
if ( this.s.rowHeight == 'auto' )
|
||||
{
|
||||
this._fnCalcRowHeight();
|
||||
}
|
||||
|
||||
this.s.viewportHeight = $(this.dom.scroller).height();
|
||||
this.s.viewportRows = parseInt( this.s.viewportHeight/this.s.rowHeight, 10 )+1;
|
||||
this.s.dt._iDisplayLength = this.s.viewportRows * 3;
|
||||
|
||||
/* Scrolling callback to see if a page change is needed */
|
||||
$(this.dom.scroller).scroll( function () {
|
||||
that._fnScroll.call( that );
|
||||
} );
|
||||
|
||||
/* Update the scroller when the DataTable is redrawn */
|
||||
this.s.dt.aoDrawCallback.push( {
|
||||
"fn": function () {
|
||||
that._fnDrawCallback.call( that );
|
||||
},
|
||||
"sName": "Scroller"
|
||||
} );
|
||||
|
||||
|
||||
/* Add a state saving parameter to the DT state saving so we can restore the exact
|
||||
* position of the scrolling
|
||||
*/
|
||||
this.s.dt.aoStateSave.push( {
|
||||
"fn": function (oS, sVal) {
|
||||
return sVal+',"iScroller":'+that.dom.scroller.scrollTop;
|
||||
},
|
||||
"sName": "Scroller_State"
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Scrolling function - fired whenever the scrolling position is changed. This method needs
|
||||
* to use the stored values to see if the table should be redrawn as we are moving towards
|
||||
* the end of the information that is currently drawn or not. If needed, then it will redraw
|
||||
* the table based on the new position.
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
"_fnScroll": function ()
|
||||
{
|
||||
var
|
||||
that = this,
|
||||
iScrollTop = this.dom.scroller.scrollTop,
|
||||
iTopRow;
|
||||
|
||||
if ( this.s.trace )
|
||||
{
|
||||
console.log(
|
||||
'Scroll: '+iScrollTop+'px - boundaries: '+this.s.redrawTop+' / '+this.s.redrawBottom+'. '+
|
||||
' Showing rows '+this.fnPixelsToRow(iScrollTop)+
|
||||
' to '+this.fnPixelsToRow(iScrollTop+$(this.dom.scroller).height())+
|
||||
' in the viewport, with rows '+this.s.dt._iDisplayStart+
|
||||
' to '+(this.s.dt._iDisplayEnd)+' rendered by the DataTable');
|
||||
}
|
||||
|
||||
/* Update the table's information display for what is now in the viewport */
|
||||
this._fnInfo();
|
||||
|
||||
/* We dont' want to state save on every scroll event - that's heavy handed, so
|
||||
* use a timeout to update the state saving only when the scrolling has finished
|
||||
*/
|
||||
clearTimeout( this.s.stateTO );
|
||||
this.s.stateTO = setTimeout( function () {
|
||||
that.s.dt.oApi._fnSaveState( that.s.dt );
|
||||
}, 250 );
|
||||
|
||||
/* Check if the scroll point is outside the trigger boundary which would required
|
||||
* a DataTables redraw
|
||||
*/
|
||||
if ( iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom )
|
||||
{
|
||||
iTopRow = parseInt( iScrollTop / this.s.rowHeight, 10 ) - this.s.viewportRows;
|
||||
if ( iTopRow < 0 )
|
||||
{
|
||||
/* At the start of the table */
|
||||
iTopRow = 0;
|
||||
}
|
||||
else if ( iTopRow + this.s.dt._iDisplayLength > this.s.dt.fnRecordsDisplay() )
|
||||
{
|
||||
/* At the end of the table */
|
||||
iTopRow = this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength;
|
||||
}
|
||||
else if ( iTopRow % 2 !== 0 )
|
||||
{
|
||||
/* For the row-striping classes (odd/even) we want only to start on evens
|
||||
* otherwise the stripes will change between draws and look rubbish
|
||||
*/
|
||||
iTopRow++;
|
||||
}
|
||||
|
||||
if ( iTopRow != this.s.dt._iDisplayStart )
|
||||
{
|
||||
/* Cache the new table position for quick lookups */
|
||||
this.s.tableTop = $(this.s.dt.nTable).offset().top;
|
||||
this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop;
|
||||
|
||||
/* Do the DataTables redraw based on the calculated start point - note that when
|
||||
* using server-side processing we introduce a small delay to not DoS the server...
|
||||
*/
|
||||
if ( this.s.dt.oFeatures.bServerSide ) {
|
||||
clearTimeout( this.s.drawTO );
|
||||
this.s.drawTO = setTimeout( function () {
|
||||
that.s.dt._iDisplayStart = iTopRow;
|
||||
that.s.dt.oApi._fnCalculateEnd( that.s.dt );
|
||||
that.s.dt.oApi._fnDraw( that.s.dt );
|
||||
}, this.s.serverWait );
|
||||
}
|
||||
else
|
||||
{
|
||||
this.s.dt._iDisplayStart = iTopRow;
|
||||
this.s.dt.oApi._fnCalculateEnd( this.s.dt );
|
||||
this.s.dt.oApi._fnDraw( this.s.dt );
|
||||
}
|
||||
|
||||
if ( this.s.trace )
|
||||
{
|
||||
console.log( 'Scroll forcing redraw - top DT render row: '+ iTopRow );
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Draw callback function which is fired when the DataTable is redrawn. The main function of
|
||||
* this method is to position the drawn table correctly the scrolling container for the rows
|
||||
* that is displays as a result of the scrolling position.
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
"_fnDrawCallback": function ()
|
||||
{
|
||||
var
|
||||
that = this,
|
||||
iScrollTop = this.dom.scroller.scrollTop;
|
||||
|
||||
/* Set the height of the scrolling forcer to be suitable for the number of rows
|
||||
* in this draw
|
||||
*/
|
||||
this.dom.force.style.height = (this.s.rowHeight * this.s.dt.fnRecordsDisplay())+"px";
|
||||
|
||||
/* Calculate the position that the top of the table should be at */
|
||||
var iTableTop = (this.s.rowHeight*this.s.dt._iDisplayStart);
|
||||
if ( this.s.dt._iDisplayStart === 0 )
|
||||
{
|
||||
iTableTop = 0;
|
||||
}
|
||||
else if ( this.s.dt._iDisplayStart === this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength )
|
||||
{
|
||||
iTableTop = this.s.rowHeight * this.s.dt._iDisplayStart;
|
||||
}
|
||||
|
||||
this.dom.table.style.top = iTableTop+"px";
|
||||
|
||||
/* Cache some information for the scroller */
|
||||
this.s.tableTop = iTableTop;
|
||||
this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop;
|
||||
|
||||
this.s.redrawTop = iScrollTop - (this.s.viewportHeight/2);
|
||||
this.s.redrawBottom = this.s.tableBottom - (1.5 * this.s.viewportHeight);
|
||||
|
||||
if ( this.s.trace )
|
||||
{
|
||||
console.log(
|
||||
"Table redraw. Table top: "+iTableTop+"px. Table bottom: "+
|
||||
this.s.tableBottom+". Scroll boundary top: "+
|
||||
this.s.redrawTop+". Scroll boundary bottom: "+
|
||||
this.s.redrawBottom);
|
||||
}
|
||||
|
||||
/* Because of the order of the DT callbacks, the info update will
|
||||
* take precidence over the one we want here. So a 'thread' break is
|
||||
* needed
|
||||
*/
|
||||
setTimeout( function () {
|
||||
that._fnInfo.call( that );
|
||||
}, 0 );
|
||||
|
||||
/* Restore the scrolling position that was saved by DataTable's state saving
|
||||
* Note that this is done on the second draw when data is Ajax sourced, and the
|
||||
* first draw when DOM soured
|
||||
*/
|
||||
if ( this.s.dt.oFeatures.bStateSave && this.s.dt.oLoadedState !== null &&
|
||||
typeof this.s.dt.oLoadedState.iScroller != 'undefined' )
|
||||
{
|
||||
if ( (this.s.dt.sAjaxSource !== null && this.s.dt.iDraw == 2) ||
|
||||
(this.s.dt.sAjaxSource === null && this.s.dt.iDraw == 1) )
|
||||
{
|
||||
setTimeout( function () {
|
||||
$(that.dom.scroller).scrollTop( that.s.dt.oLoadedState.iScroller );
|
||||
that.s.redrawTop = that.s.dt.oLoadedState.iScroller - (that.s.viewportHeight/2);
|
||||
}, 0 );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Automatic calculation of table row height. This is just a little tricky here as using
|
||||
* initialisation DataTables has tale the table out of the document, so we need to create
|
||||
* a new table and insert it into the document, calculate the row height and then whip the
|
||||
* table out.
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
"_fnCalcRowHeight": function ()
|
||||
{
|
||||
var
|
||||
nTable = this.s.dt.nTable.cloneNode( false ),
|
||||
nBody = document.createElement( 'tbody' ),
|
||||
nTr = document.createElement('tr'),
|
||||
nTd = document.createElement('td');
|
||||
|
||||
nTd.innerHTML = " ";
|
||||
nTr.appendChild( nTd );
|
||||
nBody.appendChild( nTr );
|
||||
nTable.appendChild( nBody );
|
||||
document.body.appendChild( nTable );
|
||||
this.s.rowHeight = $(nTr).height();
|
||||
document.body.removeChild( nTable );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Update any information elements that are controlled by the DataTable based on the scrolling
|
||||
* viewport and what rows are visible in it. This function basically acts in the same way as
|
||||
* _fnUpdateInfo in DataTables, and effectively replaces that function.
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
"_fnInfo": function ()
|
||||
{
|
||||
var
|
||||
dt = this.s.dt,
|
||||
iScrollTop = this.dom.scroller.scrollTop,
|
||||
iStart = this.fnPixelsToRow(iScrollTop)+1,
|
||||
iEnd = this.fnPixelsToRow(iScrollTop+$(this.dom.scroller).height()),
|
||||
iMax = dt.fnRecordsTotal(),
|
||||
iTotal = dt.fnRecordsDisplay(),
|
||||
sStart = dt.fnFormatNumber( iStart ),
|
||||
sEnd = dt.fnFormatNumber( iEnd ),
|
||||
sMax = dt.fnFormatNumber( iMax ),
|
||||
sTotal = dt.fnFormatNumber( iTotal ),
|
||||
sOut;
|
||||
|
||||
if ( dt.fnRecordsDisplay() === 0 &&
|
||||
dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
|
||||
{
|
||||
/* Empty record set */
|
||||
sOut = dt.oLanguage.sInfoEmpty+ dt.oLanguage.sInfoPostFix;
|
||||
}
|
||||
else if ( dt.fnRecordsDisplay() === 0 )
|
||||
{
|
||||
/* Rmpty record set after filtering */
|
||||
sOut = dt.oLanguage.sInfoEmpty +' '+
|
||||
dt.oLanguage.sInfoFiltered.replace('_MAX_', sMax)+
|
||||
dt.oLanguage.sInfoPostFix;
|
||||
}
|
||||
else if ( dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
|
||||
{
|
||||
/* Normal record set */
|
||||
sOut = dt.oLanguage.sInfo.
|
||||
replace('_START_', sStart).
|
||||
replace('_END_', sEnd).
|
||||
replace('_TOTAL_', sTotal)+
|
||||
dt.oLanguage.sInfoPostFix;
|
||||
}
|
||||
else
|
||||
{
|
||||
/* Record set after filtering */
|
||||
sOut = dt.oLanguage.sInfo.
|
||||
replace('_START_', sStart).
|
||||
replace('_END_', sEnd).
|
||||
replace('_TOTAL_', sTotal) +' '+
|
||||
dt.oLanguage.sInfoFiltered.replace('_MAX_',
|
||||
dt.fnFormatNumber(dt.fnRecordsTotal()))+
|
||||
dt.oLanguage.sInfoPostFix;
|
||||
}
|
||||
|
||||
var n = dt.aanFeatures.i;
|
||||
for ( var i=0, iLen=n.length ; i<iLen ; i++ )
|
||||
{
|
||||
$(n[i]).html( sOut );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Statics
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
|
||||
/**
|
||||
* Scroller default settings for initialisation
|
||||
* @namespace
|
||||
* @static
|
||||
*/
|
||||
Scroller.oDefaults = {
|
||||
/**
|
||||
* Indicate if Scroller show show trace information on the console or not. This can be
|
||||
* useful when debugging Scroller or if just curious as to what it is doing, but should
|
||||
* be turned off for production.
|
||||
* @type bool
|
||||
* @default false
|
||||
* @static
|
||||
* @example
|
||||
* var oTable = $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true
|
||||
* "oScroller": {
|
||||
* "trace": true
|
||||
* }
|
||||
* } );
|
||||
*/
|
||||
"trace": false,
|
||||
|
||||
/**
|
||||
* Scroller will attempt to automatically calculate the height of rows for it's internal
|
||||
* calculations. However the height that is used can be overridden using this parameter.
|
||||
* @type int|string
|
||||
* @default auto
|
||||
* @static
|
||||
* @example
|
||||
* var oTable = $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true
|
||||
* "oScroller": {
|
||||
* "rowHeight": 30
|
||||
* }
|
||||
* } );
|
||||
*/
|
||||
"rowHeight": "auto",
|
||||
|
||||
/**
|
||||
* When using server-side processing, Scroller will wait a small amount of time to allow
|
||||
* the scrolling to finish before requesting more data from the server. This prevents
|
||||
* you from DoSing your own server! The wait time can be configured by this parameter.
|
||||
* @type int
|
||||
* @default 200
|
||||
* @static
|
||||
* @example
|
||||
* var oTable = $('#example').dataTable( {
|
||||
* "sScrollY": "200px",
|
||||
* "sDom": "frtiS",
|
||||
* "bDeferRender": true
|
||||
* "oScroller": {
|
||||
* "serverWait": 100
|
||||
* }
|
||||
* } );
|
||||
*/
|
||||
"serverWait": 200
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Constants
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
|
||||
/**
|
||||
* Name of this class
|
||||
* @constant CLASS
|
||||
* @type String
|
||||
* @default Scroller
|
||||
*/
|
||||
Scroller.prototype.CLASS = "Scroller";
|
||||
|
||||
|
||||
/**
|
||||
* Scroller version
|
||||
* @constant Scroller.VERSION
|
||||
* @type String
|
||||
* @default See code
|
||||
* @static
|
||||
*/
|
||||
Scroller.VERSION = "1.0.0";
|
||||
Scroller.prototype.CLASS = Scroller.VERSION;
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Initialisation
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
/*
|
||||
* Register a new feature with DataTables
|
||||
*/
|
||||
if ( typeof $.fn.dataTable == "function" &&
|
||||
typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
|
||||
$.fn.dataTableExt.fnVersionCheck('1.8.0') )
|
||||
{
|
||||
$.fn.dataTableExt.aoFeatures.push( {
|
||||
"fnInit": function( oDTSettings ) {
|
||||
var init = (typeof oDTSettings.oInit.oScroller == 'undefined') ?
|
||||
{} : oDTSettings.oInit.oScroller;
|
||||
var oScroller = new Scroller( oDTSettings, init );
|
||||
return oScroller.dom.wrapper;
|
||||
},
|
||||
"cFeature": "S",
|
||||
"sFeature": "Scroller"
|
||||
} );
|
||||
}
|
||||
else
|
||||
{
|
||||
alert( "Warning: Scroller requires DataTables 1.8.0 or greater - www.datatables.net/download");
|
||||
}
|
||||
|
||||
|
||||
})(jQuery, window, document);
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
* File: Scroller.min.js
|
||||
* Version: 1.0.0
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
*
|
||||
* Copyright 2011 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* This source file is free software, under either the GPL v2 license or a
|
||||
* BSD (3 point) style license, as supplied with this software.
|
||||
*
|
||||
* This source file is distributed in the hope that it will be useful, but
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
||||
*/
|
||||
/*
|
||||
GPL v2 or BSD 3 point style
|
||||
*/
|
||||
(function(d,i,g){var e=function(a,c){if(!this instanceof e)alert("Scroller warning: Scroller must be initialised with the 'new' keyword.");else{if(typeof c=="undefined")c={};this.s=d.extend({dt:a,tableTop:0,tableBottom:0,redrawTop:0,redrawBottom:0,rowHeight:null,viewportHeight:0,viewportRows:0,stateTO:null,drawTO:null},e.oDefaults,c);this.dom={force:g.createElement("div"),scroller:null,table:null};this.s.dt.oInstance.oScroller=this;this._fnConstruct()}};e.prototype={fnRowToPixels:function(a){return a*
|
||||
this.s.rowHeight},fnPixelsToRow:function(a){return parseInt(a/this.s.rowHeight,10)},fnScrollToRow:function(a,c){a=this.fnRowToPixels(a);typeof c=="undefined"||c?d(this.dom.scroller).animate({scrollTop:a}):d(this.dom.scroller).scrollTop(a)},_fnConstruct:function(){var a=this;this.dom.force.style.position="absolute";this.dom.force.style.top="0px";this.dom.force.style.left="0px";this.dom.force.style.width="1px";this.dom.scroller=d("div.dataTables_scrollBody",this.s.dt.nTableWrapper)[0];this.dom.scroller.appendChild(this.dom.force);
|
||||
this.dom.scroller.style.position="relative";this.dom.table=d(">table",this.dom.scroller)[0];this.dom.table.style.position="absolute";this.dom.table.style.top="0px";this.dom.table.style.left="0px";this.s.rowHeight=="auto"&&this._fnCalcRowHeight();this.s.viewportHeight=d(this.dom.scroller).height();this.s.viewportRows=parseInt(this.s.viewportHeight/this.s.rowHeight,10)+1;this.s.dt._iDisplayLength=this.s.viewportRows*3;d(this.dom.scroller).scroll(function(){a._fnScroll.call(a)});this.s.dt.aoDrawCallback.push({fn:function(){a._fnDrawCallback.call(a)},
|
||||
sName:"Scroller"});this.s.dt.aoStateSave.push({fn:function(c,b){return b+',"iScroller":'+a.dom.scroller.scrollTop},sName:"Scroller_State"})},_fnScroll:function(){var a=this,c=this.dom.scroller.scrollTop,b;this.s.trace&&console.log("Scroll: "+c+"px - boundaries: "+this.s.redrawTop+" / "+this.s.redrawBottom+". Showing rows "+this.fnPixelsToRow(c)+" to "+this.fnPixelsToRow(c+d(this.dom.scroller).height())+" in the viewport, with rows "+this.s.dt._iDisplayStart+" to "+this.s.dt._iDisplayEnd+" rendered by the DataTable");
|
||||
this._fnInfo();clearTimeout(this.s.stateTO);this.s.stateTO=setTimeout(function(){a.s.dt.oApi._fnSaveState(a.s.dt)},250);if(c<this.s.redrawTop||c>this.s.redrawBottom){b=parseInt(c/this.s.rowHeight,10)-this.s.viewportRows;if(b<0)b=0;else if(b+this.s.dt._iDisplayLength>this.s.dt.fnRecordsDisplay())b=this.s.dt.fnRecordsDisplay()-this.s.dt._iDisplayLength;else b%2!==0&&b++;if(b!=this.s.dt._iDisplayStart){this.s.tableTop=d(this.s.dt.nTable).offset().top;this.s.tableBottom=d(this.s.dt.nTable).height()+this.s.tableTop;
|
||||
if(this.s.dt.oFeatures.bServerSide){clearTimeout(this.s.drawTO);this.s.drawTO=setTimeout(function(){a.s.dt._iDisplayStart=b;a.s.dt.oApi._fnCalculateEnd(a.s.dt);a.s.dt.oApi._fnDraw(a.s.dt)},this.s.serverWait)}else{this.s.dt._iDisplayStart=b;this.s.dt.oApi._fnCalculateEnd(this.s.dt);this.s.dt.oApi._fnDraw(this.s.dt)}this.s.trace&&console.log("Scroll forcing redraw - top DT render row: "+b)}}},_fnDrawCallback:function(){var a=this,c=this.dom.scroller.scrollTop;this.dom.force.style.height=this.s.rowHeight*
|
||||
this.s.dt.fnRecordsDisplay()+"px";var b=this.s.rowHeight*this.s.dt._iDisplayStart;if(this.s.dt._iDisplayStart===0)b=0;else if(this.s.dt._iDisplayStart===this.s.dt.fnRecordsDisplay()-this.s.dt._iDisplayLength)b=this.s.rowHeight*this.s.dt._iDisplayStart;this.dom.table.style.top=b+"px";this.s.tableTop=b;this.s.tableBottom=d(this.s.dt.nTable).height()+this.s.tableTop;this.s.redrawTop=c-this.s.viewportHeight/2;this.s.redrawBottom=this.s.tableBottom-1.5*this.s.viewportHeight;this.s.trace&&console.log("Table redraw. Table top: "+
|
||||
b+"px. Table bottom: "+this.s.tableBottom+". Scroll boundary top: "+this.s.redrawTop+". Scroll boundary bottom: "+this.s.redrawBottom);setTimeout(function(){a._fnInfo.call(a)},0);if(this.s.dt.oFeatures.bStateSave&&this.s.dt.oLoadedState!==null&&typeof this.s.dt.oLoadedState.iScroller!="undefined")if(this.s.dt.sAjaxSource!==null&&this.s.dt.iDraw==2||this.s.dt.sAjaxSource===null&&this.s.dt.iDraw==1)setTimeout(function(){d(a.dom.scroller).scrollTop(a.s.dt.oLoadedState.iScroller);a.s.redrawTop=a.s.dt.oLoadedState.iScroller-
|
||||
a.s.viewportHeight/2},0)},_fnCalcRowHeight:function(){var a=this.s.dt.nTable.cloneNode(false),c=g.createElement("tbody"),b=g.createElement("tr"),f=g.createElement("td");f.innerHTML=" ";b.appendChild(f);c.appendChild(b);a.appendChild(c);g.body.appendChild(a);this.s.rowHeight=d(b).height();g.body.removeChild(a)},_fnInfo:function(){var a=this.s.dt,c=this.dom.scroller.scrollTop,b=this.fnPixelsToRow(c)+1,f=this.fnPixelsToRow(c+d(this.dom.scroller).height()),h=a.fnRecordsTotal();c=a.fnRecordsDisplay();
|
||||
b=a.fnFormatNumber(b);f=a.fnFormatNumber(f);h=a.fnFormatNumber(h);c=a.fnFormatNumber(c);c=a.fnRecordsDisplay()===0&&a.fnRecordsDisplay()==a.fnRecordsTotal()?a.oLanguage.sInfoEmpty+a.oLanguage.sInfoPostFix:a.fnRecordsDisplay()===0?a.oLanguage.sInfoEmpty+" "+a.oLanguage.sInfoFiltered.replace("_MAX_",h)+a.oLanguage.sInfoPostFix:a.fnRecordsDisplay()==a.fnRecordsTotal()?a.oLanguage.sInfo.replace("_START_",b).replace("_END_",f).replace("_TOTAL_",c)+a.oLanguage.sInfoPostFix:a.oLanguage.sInfo.replace("_START_",
|
||||
b).replace("_END_",f).replace("_TOTAL_",c)+" "+a.oLanguage.sInfoFiltered.replace("_MAX_",a.fnFormatNumber(a.fnRecordsTotal()))+a.oLanguage.sInfoPostFix;a=a.aanFeatures.i;b=0;for(h=a.length;b<h;b++)d(a[b]).html(c)}};e.oDefaults={trace:false,rowHeight:"auto",serverWait:200};e.prototype.CLASS="Scroller";e.VERSION="1.0.0";e.prototype.CLASS=e.VERSION;typeof d.fn.dataTable=="function"&&typeof d.fn.dataTableExt.fnVersionCheck=="function"&&d.fn.dataTableExt.fnVersionCheck("1.8.0")?d.fn.dataTableExt.aoFeatures.push({fnInit:function(a){return(new e(a,
|
||||
typeof a.oInit.oScroller=="undefined"?{}:a.oInit.oScroller)).dom.wrapper},cFeature:"S",sFeature:"Scroller"}):alert("Warning: Scroller requires DataTables 1.8.0 or greater - www.datatables.net/download")})(jQuery,window,document);
|
||||
BIN
Binary file not shown.
+77
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
|
||||
<title>DataTables example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
td { white-space: nowrap; }
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="media/js/Scroller.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/server_processing.php",
|
||||
"bServerSide": true,
|
||||
"sDom": "frtiS"
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container" style="width:980px">
|
||||
<div class="full_width big">
|
||||
Scroller example - server-side processing
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>When using server-side processing, Scroller will wait a small amount of time to allow the scrolling to finish before requesting more data from the server (200mS by default). This prevents you from DoSing your own server! This example shows Scroller in action with a database of 10'000 records, although of course server-side processing can scale much larger if you require.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP</th>
|
||||
<th width="33%">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/server_processing.php",
|
||||
"bServerSide": true,
|
||||
"sDom": "frtiS"
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<div class="demo_links">
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation of Scroller</a></li>
|
||||
<li><a href="state_saving.html">State saving</a></li>
|
||||
<li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
||||
<li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
||||
<li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
|
||||
|
||||
<title>DataTables example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
td { white-space: nowrap; }
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="media/js/Scroller.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"bStateSave": true
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container" style="width:980px">
|
||||
<div class="full_width big">
|
||||
Scroller with state saving
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Scroller will automatically integrate with DataTables in order to save the scrolling position of the table, if state saving is enabled in the DataTable (bStateSave). This example shows that in practice - to demonstrate, scroll the table and then reload the page.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP</th>
|
||||
<th width="33%">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready(function() {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": "200px",
|
||||
"sAjaxSource": "media/data/2500.txt",
|
||||
"sDom": "frtiS",
|
||||
"bDeferRender": true,
|
||||
"bStateSave": true
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<div class="demo_links">
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation of Scroller</a></li>
|
||||
<li><a href="state_saving.html">State saving</a></li>
|
||||
<li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
||||
<li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
||||
<li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user