mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-06-15 04:26:05 +00:00
Initial commit for AdminLTE2.
This commit is contained in:
Ivan Filippov
@ -0,0 +1,43 @@
|
||||
# Scroller
|
||||
|
||||
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.
|
||||
|
||||
Key features include:
|
||||
|
||||
* Speed! The aim of Scroller for DataTables is to make rendering large data sets fast
|
||||
* Full compatibility with DataTables' deferred rendering for maximum speed
|
||||
* Integration with state saving in DataTables (scrolling position is saved)
|
||||
* Support for scrolling with millions of rows
|
||||
* Easy to use
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
To use Scroller, first download DataTables ( http://datatables.net/download ) and place the unzipped Scroller package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
|
||||
|
||||
|
||||
# Basic usage
|
||||
|
||||
Scroller is initialised by simply including the letter `dt-string S` in the `dt-init dom` for the table you want to have this feature enabled on. Note that the `dt-string S` must come after the `dt-string t` parameter in `dom`. For example:
|
||||
|
||||
```js
|
||||
$(document).ready( function () {
|
||||
$('#example').DataTable( {
|
||||
dom: 'lfrtipS'
|
||||
} );
|
||||
} );
|
||||
```
|
||||
|
||||
Note that rows in the table must all be the same height. Information in a cell which expands on to multiple lines will cause some odd behaviour in the scrolling. Additionally, the table's `cellspacing` parameter must be set to 0, again to ensure the information display is correct.
|
||||
|
||||
|
||||
# Documentation / support
|
||||
|
||||
* Documentation: http://datatables.net/extensions/scroller/
|
||||
* DataTables support forums: http://datatables.net/forums
|
||||
|
||||
|
||||
# GitHub
|
||||
|
||||
If you fancy getting involved with the development of Scroller and help make it better, please refer to its GitHub repo: https://github.com/DataTables/Scroller
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
|
||||
/*
|
||||
* Namespace: DTS (DataTables Scroller)
|
||||
*/
|
||||
|
||||
div.DTS tbody th,
|
||||
div.DTS tbody td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.DTS tbody tr.even {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.DTS div.DTS_Loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
margin-top: -20px;
|
||||
margin-left: -100px;
|
||||
z-index: 1;
|
||||
|
||||
border: 1px solid #999;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
div.DTS div.dataTables_scrollHead,
|
||||
div.DTS div.dataTables_scrollFoot {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.DTS div.dataTables_scrollBody {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
div.DTS div.dataTables_scroll {
|
||||
background: url('../images/loading-background.png') repeat 0 0;
|
||||
}
|
||||
|
||||
1
app/static/adminlte2/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css
vendored
Normal file
1
app/static/adminlte2/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
div.DTS tbody th,div.DTS tbody td{white-space:nowrap}div.DTS tbody tr.even{background-color:white}div.DTS div.DTS_Loading{position:absolute;top:50%;left:50%;width:200px;height:20px;margin-top:-20px;margin-left:-100px;z-index:1;border:1px solid #999;padding:20px 0;text-align:center;background-color:white;background-color:rgba(255,255,255,0.5)}div.DTS div.dataTables_scrollHead,div.DTS div.dataTables_scrollFoot{background-color:white}div.DTS div.dataTables_scrollBody{z-index:2}div.DTS div.dataTables_scroll{background:url("../images/loading-background.png") repeat 0 0}
|
||||
@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>Scroller example - API</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</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="../js/dataTables.scroller.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
initComplete: function () {
|
||||
var api = this.api();
|
||||
api.scroller().scrollToRow( 1000 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>API</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows a trivial use of the API methods that Scroller adds to the DataTables API to
|
||||
scroll to a row once the table's data has been loaded. In this case
|
||||
<code>scroller().scrollToRow()</code> is used to jump to row 1000.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP / Post code</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this
|
||||
example:</p><code class="multiline brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
initComplete: function () {
|
||||
var api = this.api();
|
||||
api.scroller().scrollToRow( 1000 );
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
||||
example:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
||||
DataTables:</p>
|
||||
</div>
|
||||
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
||||
below:</p><code class="multiline brush: js;"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
||||
table:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=
|
||||
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
||||
<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
||||
will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
||||
DataTables documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./state_saving.html">State saving</a></li>
|
||||
<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
|
||||
<li><a href="./server-side_processing.html">Server-side processing (5,000,000
|
||||
rows)</a></li>
|
||||
<li class="active"><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,58 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* server-side processing can be implemented, and probably shouldn't be used as
|
||||
* the basis for a large complex system. It is suitable for simple use cases as
|
||||
* for learning.
|
||||
*
|
||||
* See http://datatables.net/usage/server-side for full details on the server-
|
||||
* side processing requirements of DataTables.
|
||||
*
|
||||
* @license MIT - http://datatables.net/license_mit
|
||||
*/
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Easy set variables
|
||||
*/
|
||||
|
||||
// DB table to use
|
||||
$table = 'massive';
|
||||
|
||||
// Table's primary key
|
||||
$primaryKey = 'id';
|
||||
|
||||
// Array of database columns which should be read and sent back to DataTables.
|
||||
// The `db` parameter represents the column name in the database, while the `dt`
|
||||
// parameter represents the DataTables column identifier. In this case simple
|
||||
// indexes
|
||||
$columns = array(
|
||||
array( 'db' => 'id', 'dt' => 0 ),
|
||||
array( 'db' => 'firstname', 'dt' => 1 ),
|
||||
array( 'db' => 'surname', 'dt' => 2 ),
|
||||
array( 'db' => 'zip', 'dt' => 3 ),
|
||||
array( 'db' => 'country', 'dt' => 4 )
|
||||
);
|
||||
|
||||
// SQL server connection information
|
||||
$sql_details = array(
|
||||
'user' => '',
|
||||
'pass' => '',
|
||||
'db' => '',
|
||||
'host' => ''
|
||||
);
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* If you just want to use the basic configuration for DataTables with PHP
|
||||
* server-side, there is no need to edit below this line.
|
||||
*/
|
||||
|
||||
require( '../../../../examples/server_side/scripts/ssp.class.php' );
|
||||
|
||||
echo json_encode(
|
||||
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
|
||||
);
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
|
||||
<title>Scroller examples - Scroller examples</title>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>Scroller examples</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>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.</p>
|
||||
|
||||
<p>Scroller is initialised by simply including the letter <code>S</code> in the <a href=
|
||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"DataTables initialisation option">dom<span>DT</span></code></a> for the table you want to have this
|
||||
feature enabled on. Note that the <code>S</code> must come after the <code>t</code> parameter in
|
||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"DataTables initialisation option">dom<span>DT</span></code></a>.</p>
|
||||
|
||||
<p>Key features include:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
|
||||
<li>Full compatibility with DataTables' deferred rendering for maximum speed</li>
|
||||
<li>Integration with state saving in DataTables (scrolling position is saved)</li>
|
||||
<li>Easy to use</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./state_saving.html">State saving</a></li>
|
||||
<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
|
||||
<li><a href="./server-side_processing.html">Server-side processing (5,000,000
|
||||
rows)</a></li>
|
||||
<li><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>Scroller example - Client-side data source (50,000 rows)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</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="../js/dataTables.scroller.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var data = [];
|
||||
for ( var i=0 ; i<50000 ; i++ ) {
|
||||
data.push( [ i, i, i, i, i ] );
|
||||
}
|
||||
|
||||
var oTable = $('#example').dataTable( {
|
||||
data: data,
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>Client-side data source (50,000 rows)</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<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.</p>
|
||||
|
||||
<p>Please be aware that the performance of this page will depend on your browser as the array of data
|
||||
is generated - for example IE6 will crawl!</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP / Post code</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this
|
||||
example:</p><code class="multiline brush: js;">$(document).ready(function() {
|
||||
var data = [];
|
||||
for ( var i=0 ; i<50000 ; i++ ) {
|
||||
data.push( [ i, i, i, i, i ] );
|
||||
}
|
||||
|
||||
var oTable = $('#example').dataTable( {
|
||||
data: data,
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
||||
example:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
||||
DataTables:</p>
|
||||
</div>
|
||||
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
||||
below:</p><code class="multiline brush: js;"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
||||
table:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=
|
||||
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
||||
<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
||||
will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
||||
DataTables documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./state_saving.html">State saving</a></li>
|
||||
<li class="active"><a href="./large_js_source.html">Client-side data source (50,000
|
||||
rows)</a></li>
|
||||
<li><a href="./server-side_processing.html">Server-side processing (5,000,000
|
||||
rows)</a></li>
|
||||
<li><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>Scroller example - Server-side processing (5,000,000 rows)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</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="../js/dataTables.scroller.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
serverSide: true,
|
||||
ordering: false,
|
||||
searching: false,
|
||||
ajax: function ( data, callback, settings ) {
|
||||
var out = [];
|
||||
|
||||
for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
|
||||
out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
|
||||
}
|
||||
|
||||
setTimeout( function () {
|
||||
callback( {
|
||||
draw: data.draw,
|
||||
data: out,
|
||||
recordsTotal: 5000000,
|
||||
recordsFiltered: 5000000
|
||||
} );
|
||||
}, 50 );
|
||||
},
|
||||
dom: "rtiS",
|
||||
scrollY: 200,
|
||||
scroller: {
|
||||
loadingIndicator: true
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>Server-side processing (5,000,000 rows)</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>DataTables' server-side processing mode is a feature that naturally fits in with Scroller perfectly.
|
||||
Server-side processing can be used to show large data sets, with the server being used to do the data
|
||||
processing, and Scroller optimising the display of the data in a scrolling viewport.</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!</p>
|
||||
|
||||
<p>This example shows Scroller using server-side processing mode and 5 million rows.
|
||||
<strong>Important</strong> This particular example uses <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> as a function to 'fake' the data to
|
||||
show Scroller's ability to show large data sets. It does not have a real database behind it! You would
|
||||
normally not use <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||
"DataTables initialisation option">ajax<span>DT</span></code></a> as a function to generate data, but
|
||||
rather as a url for where to fetch the real data!</p>
|
||||
|
||||
<p>In this example we also enable the <code>loadingIndicator</code> option of Scroller to show the end
|
||||
user what is happening when they scroll passed the currently loaded data.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP / Post code</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this
|
||||
example:</p><code class="multiline brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
serverSide: true,
|
||||
ordering: false,
|
||||
searching: false,
|
||||
ajax: function ( data, callback, settings ) {
|
||||
var out = [];
|
||||
|
||||
for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
|
||||
out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
|
||||
}
|
||||
|
||||
setTimeout( function () {
|
||||
callback( {
|
||||
draw: data.draw,
|
||||
data: out,
|
||||
recordsTotal: 5000000,
|
||||
recordsFiltered: 5000000
|
||||
} );
|
||||
}, 50 );
|
||||
},
|
||||
dom: "rtiS",
|
||||
scrollY: 200,
|
||||
scroller: {
|
||||
loadingIndicator: true
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
||||
example:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
||||
DataTables:</p>
|
||||
</div>
|
||||
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
||||
below:</p><code class="multiline brush: js;"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
||||
table:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=
|
||||
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
||||
<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
||||
will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
||||
DataTables documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./state_saving.html">State saving</a></li>
|
||||
<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
|
||||
<li class="active"><a href="./server-side_processing.html">Server-side processing
|
||||
(5,000,000 rows)</a></li>
|
||||
<li><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>Scroller example - Basic initialisation</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</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="../js/dataTables.scroller.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>Basic initialisation</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Scroller is a plug-in for DataTables which enhances DataTables' built-in scrolling features to allow
|
||||
large amounts of data to be rendered on page very quickly. This is done by Scroller through the use of
|
||||
a virtual rendering technique that will render only the part of the table that is actually required for
|
||||
the current view.</p>
|
||||
|
||||
<p>Note that Scroller assumes that all rows are of the same height (in order to preform the required
|
||||
calculations. You can use <code>td { white-space: nowrap; }</code> 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
|
||||
<code>S</code> in sDom (note that the <code>S</code> must come after the <code>t</code> in sDom).
|
||||
Deferred rendering an and Ajax data source are also used in this example.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP / Post code</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this
|
||||
example:</p><code class="multiline brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
||||
example:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
||||
DataTables:</p>
|
||||
</div>
|
||||
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
||||
below:</p><code class="multiline brush: js;"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
||||
table:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=
|
||||
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
||||
<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
||||
will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
||||
DataTables documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active"><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./state_saving.html">State saving</a></li>
|
||||
<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
|
||||
<li><a href="./server-side_processing.html">Server-side processing (5,000,000
|
||||
rows)</a></li>
|
||||
<li><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>Scroller example - State saving</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.scroller.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</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="../js/dataTables.scroller.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
stateSave: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Scroller example <span>State saving</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<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 (<a href=
|
||||
"//datatables.net/reference/option/stateSave"><code class="option" title=
|
||||
"DataTables initialisation option">stateSave<span>DT</span></code></a>). This example shows that in
|
||||
practice - to demonstrate, scroll the table and then reload the page.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>ZIP / Post code</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this
|
||||
example:</p><code class="multiline brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
ajax: "data/2500.txt",
|
||||
deferRender: true,
|
||||
dom: "frtiS",
|
||||
scrollY: 200,
|
||||
scrollCollapse: true,
|
||||
stateSave: true
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
||||
example:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.scroller.js">../js/dataTables.scroller.js</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
||||
DataTables:</p>
|
||||
</div>
|
||||
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
||||
below:</p><code class="multiline brush: js;"></code>
|
||||
</div>
|
||||
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
||||
table:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=
|
||||
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
|
||||
<li><a href="../css/dataTables.scroller.css">../css/dataTables.scroller.css</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
||||
will update automatically as any additional data is loaded.</p>
|
||||
</div>
|
||||
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
||||
DataTables documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li class="active"><a href="./state_saving.html">State saving</a></li>
|
||||
<li><a href="./large_js_source.html">Client-side data source (50,000 rows)</a></li>
|
||||
<li><a href="./server-side_processing.html">Server-side processing (5,000,000
|
||||
rows)</a></li>
|
||||
<li><a href="./api_scrolling.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
||||
information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
||||
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
|
||||
DataTables.</p>
|
||||
|
||||
<p class="copyright">DataTables designed and created by <a href=
|
||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1013 B |
File diff suppressed because it is too large
Load Diff
25
app/static/adminlte2/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js
vendored
Normal file
25
app/static/adminlte2/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
/*!
|
||||
Scroller 1.2.2
|
||||
©2011-2014 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(m,n,k){var l=function(e){var g=function(a,b){!this instanceof g?alert("Scroller warning: Scroller must be initialised with the 'new' keyword."):("undefined"==typeof b&&(b={}),this.s={dt:a,tableTop:0,tableBottom:0,redrawTop:0,redrawBottom:0,autoHeight:!0,viewportRows:0,stateTO:null,drawTO:null,heights:{jump:null,page:null,virtual:null,scroll:null,row:null,viewport:null},topRowFloat:0,scrollDrawDiff:null,loaderVisible:!1},this.s=e.extend(this.s,g.oDefaults,b),this.s.heights.row=this.s.rowHeight,
|
||||
this.dom={force:n.createElement("div"),scroller:null,table:null,loader:null},this.s.dt.oScroller=this,this._fnConstruct())};g.prototype={fnRowToPixels:function(a,b,c){a=c?this._domain("virtualToPhysical",a*this.s.heights.row):this.s.baseScrollTop+(a-this.s.baseRowTop)*this.s.heights.row;return b||b===k?parseInt(a,10):a},fnPixelsToRow:function(a,b,c){var d=a-this.s.baseScrollTop,a=c?this._domain("physicalToVirtual",a)/this.s.heights.row:d/this.s.heights.row+this.s.baseRowTop;return b||b===k?parseInt(a,
|
||||
10):a},fnScrollToRow:function(a,b){var c=this,d=!1,f=this.fnRowToPixels(a),h=a-(this.s.displayBuffer-1)/2*this.s.viewportRows;0>h&&(h=0);if((f>this.s.redrawBottom||f<this.s.redrawTop)&&this.s.dt._iDisplayStart!==h)d=!0,f=this.fnRowToPixels(a,!1,!0);"undefined"==typeof b||b?(this.s.ani=d,e(this.dom.scroller).animate({scrollTop:f},function(){setTimeout(function(){c.s.ani=!1},25)})):e(this.dom.scroller).scrollTop(f)},fnMeasure:function(a){this.s.autoHeight&&this._fnCalcRowHeight();var b=this.s.heights;
|
||||
b.viewport=e(this.dom.scroller).height();this.s.viewportRows=parseInt(b.viewport/b.row,10)+1;this.s.dt._iDisplayLength=this.s.viewportRows*this.s.displayBuffer;(a===k||a)&&this.s.dt.oInstance.fnDraw()},_fnConstruct:function(){var a=this;if(this.s.dt.oFeatures.bPaginate){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=e("div."+this.s.dt.oClasses.sScrollBody,this.s.dt.nTableWrapper)[0];this.dom.scroller.appendChild(this.dom.force);
|
||||
this.dom.scroller.style.position="relative";this.dom.table=e(">table",this.dom.scroller)[0];this.dom.table.style.position="absolute";this.dom.table.style.top="0px";this.dom.table.style.left="0px";e(this.s.dt.nTableWrapper).addClass("DTS");this.s.loadingIndicator&&(this.dom.loader=e('<div class="DTS_Loading">'+this.s.dt.oLanguage.sLoadingRecords+"</div>").css("display","none"),e(this.dom.scroller.parentNode).css("position","relative").append(this.dom.loader));this.s.heights.row&&"auto"!=this.s.heights.row&&
|
||||
(this.s.autoHeight=!1);this.fnMeasure(!1);this.s.ingnoreScroll=!0;this.s.stateSaveThrottle=this.s.dt.oApi._fnThrottle(function(){a.s.dt.oApi._fnSaveState(a.s.dt)},500);e(this.dom.scroller).on("scroll.DTS",function(){a._fnScroll.call(a)});e(this.dom.scroller).on("touchstart.DTS",function(){a._fnScroll.call(a)});this.s.dt.aoDrawCallback.push({fn:function(){a.s.dt.bInitialised&&a._fnDrawCallback.call(a)},sName:"Scroller"});e(m).on("resize.DTS",function(){a.fnMeasure(false);a._fnInfo()});var b=!0;this.s.dt.oApi._fnCallbackReg(this.s.dt,
|
||||
"aoStateSaveParams",function(c,d){if(b&&a.s.dt.oLoadedState){d.iScroller=a.s.dt.oLoadedState.iScroller;d.iScrollerTopRow=a.s.dt.oLoadedState.iScrollerTopRow;b=false}else{d.iScroller=a.dom.scroller.scrollTop;d.iScrollerTopRow=a.s.topRowFloat}},"Scroller_State");this.s.dt.oLoadedState&&(this.s.topRowFloat=this.s.dt.oLoadedState.iScrollerTopRow||0);this.s.dt.aoDestroyCallback.push({sName:"Scroller",fn:function(){e(m).off("resize.DTS");e(a.dom.scroller).off("touchstart.DTS scroll.DTS");e(a.s.dt.nTableWrapper).removeClass("DTS");
|
||||
e("div.DTS_Loading",a.dom.scroller.parentNode).remove();a.dom.table.style.position="";a.dom.table.style.top="";a.dom.table.style.left=""}})}else this.s.dt.oApi._fnLog(this.s.dt,0,"Pagination must be enabled for Scroller")},_fnScroll:function(){var a=this,b=this.s.heights,c=this.dom.scroller.scrollTop,d;if(!this.s.skip&&!this.s.ingnoreScroll)if(this.s.dt.bFiltered||this.s.dt.bSorted)this.s.lastScrollTop=0;else{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){var f=Math.ceil((this.s.displayBuffer-1)/2*this.s.viewportRows);Math.abs(c-this.s.lastScrollTop)>b.viewport||this.s.ani?(d=parseInt(this._domain("physicalToVirtual",c)/b.row,10)-f,this.s.topRowFloat=this._domain("physicalToVirtual",c)/b.row):(d=this.fnPixelsToRow(c)-f,this.s.topRowFloat=this.fnPixelsToRow(c,!1));0>=d?d=0:d+this.s.dt._iDisplayLength>this.s.dt.fnRecordsDisplay()?(d=this.s.dt.fnRecordsDisplay()-this.s.dt._iDisplayLength,0>d&&(d=0)):
|
||||
0!==d%2&&d++;if(d!=this.s.dt._iDisplayStart&&(this.s.tableTop=e(this.s.dt.nTable).offset().top,this.s.tableBottom=e(this.s.dt.nTable).height()+this.s.tableTop,b=function(){if(a.s.scrollDrawReq===null)a.s.scrollDrawReq=c;a.s.dt._iDisplayStart=d;a.s.dt.oApi._fnCalculateEnd&&a.s.dt.oApi._fnCalculateEnd(a.s.dt);a.s.dt.oApi._fnDraw(a.s.dt)},this.s.dt.oFeatures.bServerSide?(clearTimeout(this.s.drawTO),this.s.drawTO=setTimeout(b,this.s.serverWait)):b(),this.dom.loader&&!this.s.loaderVisible))this.dom.loader.css("display",
|
||||
"block"),this.s.loaderVisible=!0}this.s.lastScrollTop=c;this.s.stateSaveThrottle()}},_domain:function(a,b){var c=this.s.heights,d;if(c.virtual===c.scroll){d=(c.virtual-c.viewport)/(c.scroll-c.viewport);if("virtualToPhysical"===a)return b/d;if("physicalToVirtual"===a)return b*d}var e=(c.scroll-c.viewport)/2,h=(c.virtual-c.viewport)/2;d=h/(e*e);if("virtualToPhysical"===a){if(b<h)return Math.pow(b/d,0.5);b=2*h-b;return 0>b?c.scroll:2*e-Math.pow(b/d,0.5)}if("physicalToVirtual"===a){if(b<e)return b*b*
|
||||
d;b=2*e-b;return 0>b?c.virtual:2*h-b*b*d}},_fnDrawCallback:function(){var a=this,b=this.s.heights,c=this.dom.scroller.scrollTop,d=e(this.s.dt.nTable).height(),f=this.s.dt._iDisplayStart,h=this.s.dt._iDisplayLength,g=this.s.dt.fnRecordsDisplay();this.s.skip=!0;this._fnScrollForce();c=0===f?this.s.topRowFloat*b.row:f+h>=g?b.scroll-(g-this.s.topRowFloat)*b.row:this._domain("virtualToPhysical",this.s.topRowFloat*b.row);this.dom.scroller.scrollTop=c;this.s.baseScrollTop=c;this.s.baseRowTop=this.s.topRowFloat;
|
||||
var j=c-(this.s.topRowFloat-f)*b.row;0===f?j=0:f+h>=g&&(j=b.scroll-d);this.dom.table.style.top=j+"px";this.s.tableTop=j;this.s.tableBottom=d+this.s.tableTop;d=(c-this.s.tableTop)*this.s.boundaryScale;this.s.redrawTop=c-d;this.s.redrawBottom=c+d;this.s.skip=!1;this.s.dt.oFeatures.bStateSave&&null!==this.s.dt.oLoadedState&&"undefined"!=typeof this.s.dt.oLoadedState.iScroller?((c=(this.s.dt.sAjaxSource||a.s.dt.ajax)&&!this.s.dt.oFeatures.bServerSide?!0:!1)&&2==this.s.dt.iDraw||!c&&1==this.s.dt.iDraw)&&
|
||||
setTimeout(function(){e(a.dom.scroller).scrollTop(a.s.dt.oLoadedState.iScroller);a.s.redrawTop=a.s.dt.oLoadedState.iScroller-b.viewport/2;setTimeout(function(){a.s.ingnoreScroll=!1},0)},0):a.s.ingnoreScroll=!1;setTimeout(function(){a._fnInfo.call(a)},0);this.dom.loader&&this.s.loaderVisible&&(this.dom.loader.css("display","none"),this.s.loaderVisible=!1)},_fnScrollForce:function(){var a=this.s.heights;a.virtual=a.row*this.s.dt.fnRecordsDisplay();a.scroll=a.virtual;1E6<a.scroll&&(a.scroll=1E6);this.dom.force.style.height=
|
||||
a.scroll+"px"},_fnCalcRowHeight:function(){var a=this.s.dt,b=a.nTable,c=b.cloneNode(!1),d=e("<tbody/>").appendTo(c),f=e('<div class="'+a.oClasses.sWrapper+' DTS"><div class="'+a.oClasses.sScrollWrapper+'"><div class="'+a.oClasses.sScrollBody+'"></div></div></div>');for(e("tbody tr:lt(4)",b).clone().appendTo(d);3>e("tr",d).length;)d.append("<tr><td> </td></tr>");e("div."+a.oClasses.sScrollBody,f).append(c);a._bInitComplete?a=b.parentNode:(this.s.dt.nHolding||(this.s.dt.nHolding=e("<div></div>").insertBefore(this.s.dt.nTable)),
|
||||
a=this.s.dt.nHolding);f.appendTo(a);this.s.heights.row=e("tr",d).eq(1).outerHeight();f.remove()},_fnInfo:function(){if(this.s.dt.oFeatures.bInfo){var a=this.s.dt,b=a.oLanguage,c=this.dom.scroller.scrollTop,d=Math.floor(this.fnPixelsToRow(c,!1,this.s.ani)+1),f=a.fnRecordsTotal(),h=a.fnRecordsDisplay(),c=Math.ceil(this.fnPixelsToRow(c+this.s.heights.viewport,!1,this.s.ani)),c=h<c?h:c,g=a.fnFormatNumber(d),j=a.fnFormatNumber(c),i=a.fnFormatNumber(f),k=a.fnFormatNumber(h),g=0===a.fnRecordsDisplay()&&
|
||||
a.fnRecordsDisplay()==a.fnRecordsTotal()?b.sInfoEmpty+b.sInfoPostFix:0===a.fnRecordsDisplay()?b.sInfoEmpty+" "+b.sInfoFiltered.replace("_MAX_",i)+b.sInfoPostFix:a.fnRecordsDisplay()==a.fnRecordsTotal()?b.sInfo.replace("_START_",g).replace("_END_",j).replace("_MAX_",i).replace("_TOTAL_",k)+b.sInfoPostFix:b.sInfo.replace("_START_",g).replace("_END_",j).replace("_MAX_",i).replace("_TOTAL_",k)+" "+b.sInfoFiltered.replace("_MAX_",a.fnFormatNumber(a.fnRecordsTotal()))+b.sInfoPostFix;(b=b.fnInfoCallback)&&
|
||||
(g=b.call(a.oInstance,a,d,c,f,h,g));a=a.aanFeatures.i;if("undefined"!=typeof a){d=0;for(f=a.length;d<f;d++)e(a[d]).html(g)}}}};g.defaults={trace:!1,rowHeight:"auto",serverWait:200,displayBuffer:9,boundaryScale:0.5,loadingIndicator:!1};g.oDefaults=g.defaults;g.version="1.2.2";"function"==typeof e.fn.dataTable&&"function"==typeof e.fn.dataTableExt.fnVersionCheck&&e.fn.dataTableExt.fnVersionCheck("1.9.0")?e.fn.dataTableExt.aoFeatures.push({fnInit:function(a){var b=a.oInit;return(new g(a,b.scroller||
|
||||
b.oScroller||{})).dom.wrapper},cFeature:"S",sFeature:"Scroller"}):alert("Warning: Scroller requires DataTables 1.9.0 or greater - www.datatables.net/download");e.fn.dataTable.Scroller=g;e.fn.DataTable.Scroller=g;if(e.fn.dataTable.Api){var i=e.fn.dataTable.Api;i.register("scroller()",function(){return this});i.register("scroller().rowToPixels()",function(a,b,c){var d=this.context;if(d.length&&d[0].oScroller)return d[0].oScroller.fnRowToPixels(a,b,c)});i.register("scroller().pixelsToRow()",function(a,
|
||||
b,c){var d=this.context;if(d.length&&d[0].oScroller)return d[0].oScroller.fnPixelsToRow(a,b,c)});i.register("scroller().scrollToRow()",function(a,b){this.iterator("table",function(c){c.oScroller&&c.oScroller.fnScrollToRow(a,b)});return this});i.register("scroller().measure()",function(a){this.iterator("table",function(b){b.oScroller&&b.oScroller.fnMeasure(a)});return this})}return g};"function"===typeof define&&define.amd?define(["jquery","datatables"],l):"object"===typeof exports?l(require("jquery"),
|
||||
require("datatables")):jQuery&&!jQuery.fn.dataTable.Scroller&&l(jQuery,jQuery.fn.dataTable)})(window,document);
|
||||
Reference in New Issue
Block a user