Browse files

Fix: Examples had error in the initialisation - missing comma

Updated: Change Scroller.js name to dataTables.scroller.js to be consistent with other DataTables extras
Updated: Attached Scroller to $.fn.dataTable.Scroller - again to be consistent with other DataTables extras
  • Loading branch information...
1 parent b5fff96 commit 901ebca7bfbab8ecc06bf518600b85fb0e4af81d @DataTables committed Jun 21, 2012
View
6 api_scrolling.html
@@ -5,14 +5,14 @@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
- <style type="text/css" title="currentStyle">
+ <style type="text/css">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
- td { white-space: nowrap; }
+ @import "media/css/dataTables.scroller.css";
</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" language="javascript" src="media/js/dataTables.scroller.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
View
4 index.html
@@ -5,14 +5,14 @@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
- <style type="text/css" title="currentStyle">
+ <style type="text/css">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/dataTables.scroller.css";
</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" language="javascript" src="media/js/dataTables.scroller.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
View
6 large_js_source.html
@@ -5,14 +5,14 @@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
- <style type="text/css" title="currentStyle">
+ <style type="text/css">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
- td { white-space: nowrap; }
+ @import "media/css/dataTables.scroller.css";
</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" language="javascript" src="media/js/dataTables.scroller.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var aaData = [];
View
15 media/js/Scroller.js → media/js/dataTables.scroller.js
@@ -726,7 +726,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "trace": true
* }
@@ -744,7 +744,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "rowHeight": 30
* }
@@ -763,7 +763,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "serverWait": 100
* }
@@ -788,7 +788,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "displayBuffer": 10
* }
@@ -810,7 +810,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "boundaryScale": 0.75
* }
@@ -828,7 +828,7 @@ Scroller.oDefaults = {
* var oTable = $('#example').dataTable( {
* "sScrollY": "200px",
* "sDom": "frtiS",
- * "bDeferRender": true
+ * "bDeferRender": true,
* "oScroller": {
* "loadingIndicator": true
* }
@@ -892,4 +892,7 @@ else
}
+// Attach Scroller to DataTables so it can be accessed as an 'extra'
+$.fn.dataTable.Scroller = Scroller;
+
})(jQuery, window, document);
View
18 server-side_processing.html
@@ -5,21 +5,24 @@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
- <style type="text/css" title="currentStyle">
+ <style type="text/css">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
- td { white-space: nowrap; }
+ @import "media/css/dataTables.scroller.css";
</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" language="javascript" src="media/js/dataTables.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"
+ "sDom": "frtiS",
+ "oScroller": {
+ "loadingIndicator": true
+ }
} );
} );
</script>
@@ -31,7 +34,7 @@
</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>
+ <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. In this example we also enable the <i>loadingIndicator</i> option of Scroller to show the end user what is happening when they scroll passed the currently loaded data.</p>
<h1>Live example</h1>
<div id="demo">
@@ -56,7 +59,10 @@
"sScrollY": "200px",
"sAjaxSource": "media/data/server_processing.php",
"bServerSide": true,
- "sDom": "frtiS"
+ "sDom": "frtiS",
+ "oScroller": {
+ "loadingIndicator": true
+ }
} );
} );</pre>
View
6 state_saving.html
@@ -5,14 +5,14 @@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
- <style type="text/css" title="currentStyle">
+ <style type="text/css">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
- td { white-space: nowrap; }
+ @import "media/css/dataTables.scroller.css";
</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" language="javascript" src="media/js/dataTables.scroller.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {

0 comments on commit 901ebca

Please sign in to comment.