2015-12-13 09:34:12 +00:00
<!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 > TableTools example - Ajax loaded data< / title >
< link rel = "stylesheet" type = "text/css" href = "../../../media/css/jquery.dataTables.css" >
< link rel = "stylesheet" type = "text/css" href = "../css/dataTables.tableTools.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.tableTools.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( {
dom: 'T< "clear">lfrtip',
"ajax": "../../../../examples/ajax/data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
deferRender: true
} );
} );
< / script >
< / head >
< body class = "dt-example" >
< div class = "container" >
< section >
< h1 > TableTools example < span > Ajax loaded data< / span > < / h1 >
< div class = "info" >
2016-04-22 00:37:33 +00:00
< p > This TableTools example shows DataTables using its ability to < a href = "//datatables.net/manual/data#Objects" > Ajax load object based data< / a > and operate in
exactly the same manner as when the data is read directly from the document.< / p >
2015-12-13 09:34:12 +00:00
< / div >
< table id = "example" class = "display" cellspacing = "0" width = "100%" >
< thead >
< tr >
< th > Name< / th >
< th > Position< / th >
< th > Office< / th >
< th > Extn.< / th >
< th > Start date< / th >
< th > Salary< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th > Name< / th >
< th > Position< / th >
< th > Office< / th >
< th > Extn.< / th >
< th > Start date< / th >
< th > Salary< / th >
< / tr >
< / tfoot >
< / 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" >
2016-04-22 00:37:33 +00:00
< p > The Javascript shown below is used to initialise the table shown in this example:< / p > < code class = "multiline language-js" > $(document).ready(function() {
2015-12-13 09:34:12 +00:00
$('#example').DataTable( {
dom: 'T< " clear" > lfrtip',
" ajax" : " ../../../../examples/ajax/data/objects.txt" ,
" columns" : [
{ " data" : " name" },
{ " data" : " position" },
{ " data" : " office" },
{ " data" : " extn" },
{ " data" : " start_date" },
{ " data" : " salary" }
],
deferRender: true
} );
} );< / code >
2016-04-22 00:37:33 +00:00
< p > In addition to the above code, the following Javascript library files are loaded for use in this example:< / p >
2015-12-13 09:34:12 +00:00
< ul >
< li > < a href = "../../../media/js/jquery.js" > ../../../media/js/jquery.js< / a > < / li >
2016-04-22 00:37:33 +00:00
< li > < a href = "../../../media/js/jquery.dataTables.js" > ../../../media/js/jquery.dataTables.js< / a > < / li >
2015-12-13 09:34:12 +00:00
< li > < a href = "../js/dataTables.tableTools.js" > ../js/dataTables.tableTools.js< / a > < / li >
< / ul >
< / div >
< div class = "table" >
2016-04-22 00:37:33 +00:00
< p > The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:< / p >
2015-12-13 09:34:12 +00:00
< / div >
< div class = "css" >
< div >
2016-04-22 00:37:33 +00:00
< 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 language-css" > < / code >
2015-12-13 09:34:12 +00:00
< / div >
2016-04-22 00:37:33 +00:00
< p > The following CSS library files are loaded for use in this example to provide the styling of the table:< / p >
2015-12-13 09:34:12 +00:00
< ul >
2016-04-22 00:37:33 +00:00
< li > < a href = "../../../media/css/jquery.dataTables.css" > ../../../media/css/jquery.dataTables.css< / a > < / li >
2015-12-13 09:34:12 +00:00
< li > < a href = "../css/dataTables.tableTools.css" > ../css/dataTables.tableTools.css< / a > < / li >
< / ul >
< / div >
< div class = "ajax" >
2016-04-22 00:37:33 +00:00
< 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 >
2015-12-13 09:34:12 +00:00
< / div >
< div class = "php" >
2016-04-22 00:37:33 +00:00
< 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 >
2015-12-13 09:34:12 +00:00
< / 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 = "./swf_path.html" > Setting the SWF path< / a > < / li >
< li > < a href = "./new_init.html" > Initialisation with `new`< / a > < / li >
< li > < a href = "./defaults.html" > Defaults< / a > < / li >
< li > < a href = "./select_single.html" > Row selection - single row select< / a > < / li >
< li > < a href = "./select_multi.html" > Row selection - multi-row select< / a > < / li >
< li > < a href = "./select_os.html" > Row selection - operating system style< / a > < / li >
< li > < a href = "./select_column.html" > Row selection - row selector on specific cells< / a > < / li >
< li > < a href = "./multiple_tables.html" > Multiple tables< / a > < / li >
< li > < a href = "./multi_instance.html" > Multiple toolbars< / a > < / li >
< li > < a href = "./collection.html" > Button collections< / a > < / li >
2016-04-22 00:37:33 +00:00
< li > < a href = "./plug-in.html" > Plug-in button types< / a > < / li >
2015-12-13 09:34:12 +00:00
< li > < a href = "./button_text.html" > Custom button text< / a > < / li >
< li > < a href = "./alter_buttons.html" > Button arrangement< / a > < / li >
< li class = "active" > < a href = "./ajax.html" > Ajax loaded data< / a > < / li >
< li > < a href = "./pdf_message.html" > PDF message< / a > < / li >
2016-04-22 00:37:33 +00:00
< li > < a href = "./bootstrap.html" > Bootstrap styling< / a > < / li >
2015-12-13 09:34:12 +00:00
< li > < a href = "./jqueryui.html" > jQuery UI styling< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "epilogue" >
2016-04-22 00:37:33 +00:00
< 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-2015< br >
2015-12-13 09:34:12 +00:00
DataTables is licensed under the < a href = "http://www.datatables.net/mit" > MIT license< / a > .< / p >
< / div >
< / div >
< / div >
< / section >
< / body >
< / html >
