2013-10-16 13:13:30 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< link rel = "shortcut icon" type = "image/ico" href = "http://www.datatables.net/favicon.ico" >
2014-03-04 09:51:50 +01:00
< meta name = "viewport" content = "initial-scale=1.0, maximum-scale=2.0" >
2013-10-16 13:13:30 +02:00
< title > DataTables example - Alternative pagination< / title >
2013-12-19 15:04:37 +01:00
< link rel = "stylesheet" type = "text/css" href = "../../media/css/jquery.dataTables.css" >
2013-10-16 13:13:30 +02:00
< link rel = "stylesheet" type = "text/css" href = "../resources/syntax/shCore.css" >
< link rel = "stylesheet" type = "text/css" href = "../resources/demo.css" >
< style type = "text/css" class = "init" >
< / style >
2013-12-19 15:04:37 +01:00
< 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 >
2013-10-16 13:13:30 +02:00
< script type = "text/javascript" language = "javascript" src = "../resources/syntax/shCore.js" > < / script >
< script type = "text/javascript" language = "javascript" src = "../resources/demo.js" > < / script >
< script type = "text/javascript" language = "javascript" class = "init" >
$(document).ready(function() {
$('#example').dataTable( {
2013-11-12 20:18:51 +01:00
"pagingType": "full_numbers"
2013-10-16 13:13:30 +02:00
} );
} );
< / script >
< / head >
< body class = "dt-example" >
< div class = "container" >
< section >
2014-03-14 13:32:46 +01:00
< h1 > DataTables example < span > Alternative pagination< / span > < / h1 >
2013-10-16 13:13:30 +02:00
< div class = "info" >
2014-12-11 16:27:11 +01:00
< p > The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are
cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the < a href =
"//datatables.net/reference/option/pagingType">< code class = "option" title = "DataTables initialisation option" > pagingType< span > DT< / span > < / code > < / a > option.< / p >
2013-10-16 13:13:30 +02:00
< p > There are four built-in options for which pagination controls DataTables should show:< / p >
2014-04-25 14:27:28 +02:00
< ul class = "markdown" >
2014-04-01 12:08:10 +02:00
< li > < code class = "string" title = "String" > simple< / code > - 'Previous' and 'Next' buttons only< / li >
2014-12-11 16:27:11 +01:00
< li > < code class = "string" title = "String" > simple_numbers< / code > - 'Previous' and 'Next' buttons, plus page numbers< / li >
< li > < code class = "string" title = "String" > full< / code > - 'First', 'Previous', 'Next' and 'Last' buttons< / li >
< li > < code class = "string" title = "String" > full_numbers< / code > - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers< / li >
2013-10-16 13:13:30 +02:00
< / ul >
2014-12-11 16:27:11 +01:00
< p > The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; < a href =
"//datatables.net/reference/option/language.paginate.first">< code class = "option" title =
"DataTables initialisation option">language.paginate.first< span > DT< / span > < / code > < / a > , < a href =
"//datatables.net/reference/option/language.paginate.previous">< code class = "option" title =
2014-03-14 13:33:02 +01:00
"DataTables initialisation option">language.paginate.previous< span > DT< / span > < / code > < / a > etc.< / p >
2013-10-16 13:13:30 +02:00
2014-12-11 16:27:11 +01:00
< p > Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can
be altered through the use of plug-in pagination renderers.< / p >
2013-10-16 13:13:30 +02:00
2014-12-11 16:27:11 +01:00
< p > The example below shows the < code class = "string" title = "String" > full_numbers< / code > type of pagination.< / p >
2013-10-16 13:13:30 +02:00
< / div >
< table id = "example" class = "display" cellspacing = "0" width = "100%" >
< thead >
< tr >
< th > Name< / th >
< th > Position< / th >
< th > Office< / th >
< th > Age< / th >
< th > Start date< / th >
< th > Salary< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th > Name< / th >
< th > Position< / th >
< th > Office< / th >
< th > Age< / th >
< th > Start date< / th >
< th > Salary< / th >
< / tr >
< / tfoot >
< tbody >
< tr >
< td > Tiger Nixon< / td >
< td > System Architect< / td >
< td > Edinburgh< / td >
< td > 61< / td >
< td > 2011/04/25< / td >
2014-02-10 18:07:22 +01:00
< td > $320,800< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Garrett Winters< / td >
2014-02-10 18:07:22 +01:00
< td > Accountant< / td >
< td > Tokyo< / td >
2013-10-16 13:13:30 +02:00
< td > 63< / td >
< td > 2011/07/25< / td >
2014-02-10 18:07:22 +01:00
< td > $170,750< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Ashton Cox< / td >
2014-02-10 18:07:22 +01:00
< td > Junior Technical Author< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 66< / td >
< td > 2009/01/12< / td >
2014-02-10 18:07:22 +01:00
< td > $86,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Cedric Kelly< / td >
2014-02-10 18:07:22 +01:00
< td > Senior Javascript Developer< / td >
2013-10-16 13:13:30 +02:00
< td > Edinburgh< / td >
< td > 22< / td >
< td > 2012/03/29< / td >
2014-02-10 18:07:22 +01:00
< td > $433,060< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Airi Satou< / td >
< td > Accountant< / td >
< td > Tokyo< / td >
2013-10-16 13:13:30 +02:00
< td > 33< / td >
< td > 2008/11/28< / td >
2014-02-10 18:07:22 +01:00
< td > $162,700< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Brielle Williamson< / td >
< td > Integration Specialist< / td >
< td > New York< / td >
< td > 61< / td >
< td > 2012/12/02< / td >
2014-02-10 18:07:22 +01:00
< td > $372,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Herrod Chandler< / td >
< td > Sales Assistant< / td >
< td > San Francisco< / td >
< td > 59< / td >
< td > 2012/08/06< / td >
2014-02-10 18:07:22 +01:00
< td > $137,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Rhona Davidson< / td >
< td > Integration Specialist< / td >
2014-02-10 18:07:22 +01:00
< td > Tokyo< / td >
2013-10-16 13:13:30 +02:00
< td > 55< / td >
< td > 2010/10/14< / td >
2014-02-10 18:07:22 +01:00
< td > $327,900< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Colleen Hurst< / td >
< td > Javascript Developer< / td >
< td > San Francisco< / td >
< td > 39< / td >
< td > 2009/09/15< / td >
2014-02-10 18:07:22 +01:00
< td > $205,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Sonya Frost< / td >
< td > Software Engineer< / td >
< td > Edinburgh< / td >
< td > 23< / td >
< td > 2008/12/13< / td >
2014-02-10 18:07:22 +01:00
< td > $103,600< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jena Gaines< / td >
2014-02-10 18:07:22 +01:00
< td > Office Manager< / td >
2013-10-16 13:13:30 +02:00
< td > London< / td >
< td > 30< / td >
< td > 2008/12/19< / td >
2014-02-10 18:07:22 +01:00
< td > $90,560< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Quinn Flynn< / td >
2014-02-10 18:07:22 +01:00
< td > Support Lead< / td >
2013-10-16 13:13:30 +02:00
< td > Edinburgh< / td >
< td > 22< / td >
< td > 2013/03/03< / td >
2014-02-10 18:07:22 +01:00
< td > $342,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Charde Marshall< / td >
< td > Regional Director< / td >
< td > San Francisco< / td >
< td > 36< / td >
< td > 2008/10/16< / td >
2014-02-10 18:07:22 +01:00
< td > $470,600< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Haley Kennedy< / td >
< td > Senior Marketing Designer< / td >
< td > London< / td >
< td > 43< / td >
< td > 2012/12/18< / td >
2014-02-10 18:07:22 +01:00
< td > $313,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Tatyana Fitzpatrick< / td >
< td > Regional Director< / td >
< td > London< / td >
< td > 19< / td >
< td > 2010/03/17< / td >
2014-02-10 18:07:22 +01:00
< td > $385,750< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Michael Silva< / td >
2014-02-10 18:07:22 +01:00
< td > Marketing Designer< / td >
2013-10-16 13:13:30 +02:00
< td > London< / td >
< td > 66< / td >
< td > 2012/11/27< / td >
2014-02-10 18:07:22 +01:00
< td > $198,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Paul Byrd< / td >
2014-02-10 18:07:22 +01:00
< td > Chief Financial Officer (CFO)< / td >
2013-10-16 13:13:30 +02:00
< td > New York< / td >
< td > 64< / td >
< td > 2010/06/09< / td >
2014-02-10 18:07:22 +01:00
< td > $725,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Gloria Little< / td >
< td > Systems Administrator< / td >
< td > New York< / td >
< td > 59< / td >
< td > 2009/04/10< / td >
2014-02-10 18:07:22 +01:00
< td > $237,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Bradley Greer< / td >
< td > Software Engineer< / td >
< td > London< / td >
< td > 41< / td >
< td > 2012/10/13< / td >
2014-02-10 18:07:22 +01:00
< td > $132,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Dai Rios< / td >
2014-02-10 18:07:22 +01:00
< td > Personnel Lead< / td >
2013-10-16 13:13:30 +02:00
< td > Edinburgh< / td >
< td > 35< / td >
< td > 2012/09/26< / td >
2014-02-10 18:07:22 +01:00
< td > $217,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jenette Caldwell< / td >
2014-02-10 18:07:22 +01:00
< td > Development Lead< / td >
2013-10-16 13:13:30 +02:00
< td > New York< / td >
< td > 30< / td >
< td > 2011/09/03< / td >
2014-02-10 18:07:22 +01:00
< td > $345,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Yuri Berry< / td >
2014-02-10 18:07:22 +01:00
< td > Chief Marketing Officer (CMO)< / td >
2013-10-16 13:13:30 +02:00
< td > New York< / td >
< td > 40< / td >
< td > 2009/06/25< / td >
2014-02-10 18:07:22 +01:00
< td > $675,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Caesar Vance< / td >
2014-02-10 18:07:22 +01:00
< td > Pre-Sales Support< / td >
2013-10-16 13:13:30 +02:00
< td > New York< / td >
< td > 21< / td >
< td > 2011/12/12< / td >
2014-02-10 18:07:22 +01:00
< td > $106,450< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Doris Wilder< / td >
< td > Sales Assistant< / td >
2014-02-10 18:07:22 +01:00
< td > Sidney< / td >
2013-10-16 13:13:30 +02:00
< td > 23< / td >
< td > 2010/09/20< / td >
2014-02-10 18:07:22 +01:00
< td > $85,600< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Angelica Ramos< / td >
2014-02-10 18:07:22 +01:00
< td > Chief Executive Officer (CEO)< / td >
2013-10-16 13:13:30 +02:00
< td > London< / td >
2014-02-10 18:07:22 +01:00
< td > 47< / td >
2013-10-16 13:13:30 +02:00
< td > 2009/10/09< / td >
2014-02-10 18:07:22 +01:00
< td > $1,200,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Gavin Joyce< / td >
< td > Developer< / td >
< td > Edinburgh< / td >
< td > 42< / td >
< td > 2010/12/22< / td >
2014-02-10 18:07:22 +01:00
< td > $92,575< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jennifer Chang< / td >
< td > Regional Director< / td >
2014-02-10 18:07:22 +01:00
< td > Singapore< / td >
2013-10-16 13:13:30 +02:00
< td > 28< / td >
< td > 2010/11/14< / td >
2014-02-10 18:07:22 +01:00
< td > $357,650< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Brenden Wagner< / td >
< td > Software Engineer< / td >
< td > San Francisco< / td >
2014-02-10 18:07:22 +01:00
< td > 28< / td >
2013-10-16 13:13:30 +02:00
< td > 2011/06/07< / td >
2014-02-10 18:07:22 +01:00
< td > $206,850< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Fiona Green< / td >
< td > Chief Operating Officer (COO)< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 48< / td >
< td > 2010/03/11< / td >
2014-02-10 18:07:22 +01:00
< td > $850,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Shou Itou< / td >
< td > Regional Marketing< / td >
< td > Tokyo< / td >
2013-10-16 13:13:30 +02:00
< td > 20< / td >
< td > 2011/08/14< / td >
2014-02-10 18:07:22 +01:00
< td > $163,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Michelle House< / td >
< td > Integration Specialist< / td >
2014-02-10 18:07:22 +01:00
< td > Sidney< / td >
2013-10-16 13:13:30 +02:00
< td > 37< / td >
< td > 2011/06/02< / td >
2014-02-10 18:07:22 +01:00
< td > $95,400< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Suki Burks< / td >
< td > Developer< / td >
< td > London< / td >
< td > 53< / td >
< td > 2009/10/22< / td >
2014-02-10 18:07:22 +01:00
< td > $114,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Prescott Bartlett< / td >
< td > Technical Author< / td >
< td > London< / td >
< td > 27< / td >
< td > 2011/05/07< / td >
2014-02-10 18:07:22 +01:00
< td > $145,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Gavin Cortez< / td >
2014-02-10 18:07:22 +01:00
< td > Team Leader< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 22< / td >
< td > 2008/10/26< / td >
2014-02-10 18:07:22 +01:00
< td > $235,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Martena Mccray< / td >
2014-02-10 18:07:22 +01:00
< td > Post-Sales support< / td >
2013-10-16 13:13:30 +02:00
< td > Edinburgh< / td >
< td > 46< / td >
< td > 2011/03/09< / td >
2014-02-10 18:07:22 +01:00
< td > $324,050< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Unity Butler< / td >
2014-02-10 18:07:22 +01:00
< td > Marketing Designer< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 47< / td >
< td > 2009/12/09< / td >
2014-02-10 18:07:22 +01:00
< td > $85,675< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Howard Hatfield< / td >
2014-02-10 18:07:22 +01:00
< td > Office Manager< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 51< / td >
< td > 2008/12/16< / td >
2014-02-10 18:07:22 +01:00
< td > $164,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Hope Fuentes< / td >
2014-02-10 18:07:22 +01:00
< td > Secretary< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 41< / td >
< td > 2010/02/12< / td >
2014-02-10 18:07:22 +01:00
< td > $109,850< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Vivian Harrell< / td >
2014-02-10 18:07:22 +01:00
< td > Financial Controller< / td >
2013-10-16 13:13:30 +02:00
< td > San Francisco< / td >
< td > 62< / td >
< td > 2009/02/14< / td >
2014-02-10 18:07:22 +01:00
< td > $452,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Timothy Mooney< / td >
2014-02-10 18:07:22 +01:00
< td > Office Manager< / td >
2013-10-16 13:13:30 +02:00
< td > London< / td >
< td > 37< / td >
< td > 2008/12/11< / td >
2014-02-10 18:07:22 +01:00
< td > $136,200< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jackson Bradshaw< / td >
< td > Director< / td >
< td > New York< / td >
< td > 65< / td >
< td > 2008/09/26< / td >
2014-02-10 18:07:22 +01:00
< td > $645,750< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Olivia Liang< / td >
2013-10-16 13:13:30 +02:00
< td > Support Engineer< / td >
2014-02-10 18:07:22 +01:00
< td > Singapore< / td >
2013-10-16 13:13:30 +02:00
< td > 64< / td >
< td > 2011/02/03< / td >
2014-02-10 18:07:22 +01:00
< td > $234,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Bruno Nash< / td >
< td > Software Engineer< / td >
< td > London< / td >
< td > 38< / td >
< td > 2011/05/03< / td >
2014-02-10 18:07:22 +01:00
< td > $163,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Sakura Yamamoto< / td >
2013-10-16 13:13:30 +02:00
< td > Support Engineer< / td >
2014-02-10 18:07:22 +01:00
< td > Tokyo< / td >
2013-10-16 13:13:30 +02:00
< td > 37< / td >
< td > 2009/08/19< / td >
2014-02-10 18:07:22 +01:00
< td > $139,575< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Thor Walton< / td >
< td > Developer< / td >
< td > New York< / td >
< td > 61< / td >
< td > 2013/08/11< / td >
2014-02-10 18:07:22 +01:00
< td > $98,540< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Finn Camacho< / td >
< td > Support Engineer< / td >
< td > San Francisco< / td >
< td > 47< / td >
< td > 2009/07/07< / td >
2014-02-10 18:07:22 +01:00
< td > $87,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
2014-02-10 18:07:22 +01:00
< td > Serge Baldwin< / td >
2013-10-16 13:13:30 +02:00
< td > Data Coordinator< / td >
2014-02-10 18:07:22 +01:00
< td > Singapore< / td >
2013-10-16 13:13:30 +02:00
< td > 64< / td >
< td > 2012/04/09< / td >
2014-02-10 18:07:22 +01:00
< td > $138,575< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Zenaida Frank< / td >
< td > Software Engineer< / td >
< td > New York< / td >
< td > 63< / td >
< td > 2010/01/04< / td >
2014-02-10 18:07:22 +01:00
< td > $125,250< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Zorita Serrano< / td >
< td > Software Engineer< / td >
< td > San Francisco< / td >
< td > 56< / td >
< td > 2012/06/01< / td >
2014-02-10 18:07:22 +01:00
< td > $115,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jennifer Acosta< / td >
2014-02-10 18:07:22 +01:00
< td > Junior Javascript Developer< / td >
2013-10-16 13:13:30 +02:00
< td > Edinburgh< / td >
< td > 43< / td >
< td > 2013/02/01< / td >
2014-02-10 18:07:22 +01:00
< td > $75,650< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Cara Stevens< / td >
< td > Sales Assistant< / td >
< td > New York< / td >
< td > 46< / td >
< td > 2011/12/06< / td >
2014-02-10 18:07:22 +01:00
< td > $145,600< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Hermione Butler< / td >
2014-02-10 18:07:22 +01:00
< td > Regional Director< / td >
2013-10-16 13:13:30 +02:00
< td > London< / td >
< td > 47< / td >
< td > 2011/03/21< / td >
2014-02-10 18:07:22 +01:00
< td > $356,250< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Lael Greer< / td >
< td > Systems Administrator< / td >
< td > London< / td >
< td > 21< / td >
< td > 2009/02/27< / td >
2014-02-10 18:07:22 +01:00
< td > $103,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Jonas Alexander< / td >
< td > Developer< / td >
< td > San Francisco< / td >
< td > 30< / td >
< td > 2010/07/14< / td >
2014-02-10 18:07:22 +01:00
< td > $86,500< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Shad Decker< / td >
< td > Regional Director< / td >
< td > Edinburgh< / td >
< td > 51< / td >
< td > 2008/11/13< / td >
2014-02-10 18:07:22 +01:00
< td > $183,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Michael Bruce< / td >
< td > Javascript Developer< / td >
2014-02-10 18:07:22 +01:00
< td > Singapore< / td >
2013-10-16 13:13:30 +02:00
< td > 29< / td >
< td > 2011/06/27< / td >
2014-02-10 18:07:22 +01:00
< td > $183,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< tr >
< td > Donna Snider< / td >
2014-02-10 18:07:22 +01:00
< td > Customer Support< / td >
2013-10-16 13:13:30 +02:00
< td > New York< / td >
< td > 27< / td >
< td > 2011/01/25< / td >
2014-02-10 18:07:22 +01:00
< td > $112,000< / td >
2013-10-16 13:13:30 +02:00
< / tr >
< / tbody >
< / table >
< ul class = "tabs" >
< li class = "active" > Javascript< / li >
< li > HTML< / li >
< li > CSS< / li >
< li > Ajax< / li >
2014-01-17 17:45:14 +01:00
< li > Server-side script< / li >
2013-10-16 13:13:30 +02:00
< / ul >
< div class = "tabs" >
< div class = "js" >
2014-12-11 16:27:11 +01: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() {
2013-10-16 13:13:30 +02:00
$('#example').dataTable( {
2013-11-12 20:18:51 +01:00
" pagingType" : " full_numbers"
2013-10-16 13:13:30 +02:00
} );
2013-12-19 15:03:24 +01:00
} );< / code >
2013-10-16 13:13:30 +02:00
2014-12-11 16:27:11 +01:00
< p > In addition to the above code, the following Javascript library files are loaded for use in this example:< / p >
2013-10-16 13:13:30 +02:00
< ul >
2013-12-19 15:04:37 +01:00
< 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 >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< div class = "table" >
2014-12-11 16:27:11 +01:00
< p > The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:< / p >
2013-10-16 13:13:30 +02:00
< / div >
< div class = "css" >
< div >
2014-12-11 16:27:11 +01: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 >
2013-10-16 13:13:30 +02:00
< / div >
2014-12-11 16:27:11 +01:00
< p > The following CSS library files are loaded for use in this example to provide the styling of the table:< / p >
2013-10-16 13:13:30 +02:00
< ul >
2014-12-11 16:27:11 +01:00
< li > < a href = "../../media/css/jquery.dataTables.css" > ../../media/css/jquery.dataTables.css< / a > < / li >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< div class = "ajax" >
2014-12-11 16:27:11 +01: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 >
2013-10-16 13:13:30 +02:00
< / div >
2014-01-17 17:45:14 +01:00
< div class = "php" >
2014-12-11 16:27:11 +01: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 >
2014-01-17 17:45:14 +01:00
< / div >
2013-10-16 13:13:30 +02:00
< / 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" >
2014-01-17 17:45:14 +01:00
< h3 > < a href = "./index.html" > Basic initialisation< / a > < / h3 >
2013-10-16 13:13:30 +02:00
< ul class = "toc active" >
< li > < a href = "./zero_configuration.html" > Zero configuration< / a > < / li >
< li > < a href = "./filter_only.html" > Feature enable / disable< / a > < / li >
2013-11-12 20:18:51 +01:00
< li > < a href = "./table_sorting.html" > Default ordering (sorting)< / a > < / li >
< li > < a href = "./multi_col_sort.html" > Multi-column ordering< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "./multiple_tables.html" > Multiple tables< / a > < / li >
< li > < a href = "./hidden_columns.html" > Hidden columns< / a > < / li >
< li > < a href = "./complex_header.html" > Complex headers (rowspan and colspan)< / a > < / li >
< li > < a href = "./dom.html" > DOM positioning< / a > < / li >
< li > < a href = "./flexible_width.html" > Flexible table width< / a > < / li >
< li > < a href = "./state_save.html" > State saving< / a > < / li >
< li class = "active" > < a href = "./alt_pagination.html" > Alternative pagination< / a > < / li >
< li > < a href = "./scroll_y.html" > Scroll - vertical< / a > < / li >
< li > < a href = "./scroll_x.html" > Scroll - horizontal< / a > < / li >
< li > < a href = "./scroll_xy.html" > Scroll - horizontal and vertical< / a > < / li >
< li > < a href = "./scroll_y_theme.html" > Scroll - vertical with jQuery UI ThemeRoller< / a > < / li >
2014-02-10 18:07:22 +01:00
< li > < a href = "./comma-decimal.html" > Language - Comma decimal place< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "./language.html" > Language options< / a > < / li >
< / ul >
< / div >
< div class = "toc-group" >
2014-01-17 17:45:14 +01:00
< h3 > < a href = "../advanced_init/index.html" > Advanced initialisation< / a > < / h3 >
2013-10-16 13:13:30 +02:00
< ul class = "toc" >
2013-10-16 16:33:34 +02:00
< li > < a href = "../advanced_init/events_live.html" > DOM / jQuery events< / a > < / li >
< li > < a href = "../advanced_init/dt_events.html" > DataTables events< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../advanced_init/column_render.html" > Column rendering< / a > < / li >
2013-10-16 16:33:34 +02:00
< li > < a href = "../advanced_init/length_menu.html" > Page length options< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../advanced_init/dom_multiple_elements.html" > Multiple table control elements< / a > < / li >
< li > < a href = "../advanced_init/complex_header.html" > Complex headers (rowspan / colspan)< / a > < / li >
2014-10-08 15:19:14 +02:00
< li > < a href = "../advanced_init/object_dom_read.html" > Read HTML to data objects< / a > < / li >
2015-02-06 17:35:34 +01:00
< li > < a href = "../advanced_init/html5-data-attributes.html" > HTML5 data-* attributes - cell data< / a > < / li >
< li > < a href = "../advanced_init/html5-data-options.html" > HTML5 data-* attributes - table options< / a > < / li >
2013-10-16 16:33:34 +02:00
< li > < a href = "../advanced_init/language_file.html" > Language file< / a > < / li >
< li > < a href = "../advanced_init/defaults.html" > Setting defaults< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../advanced_init/row_callback.html" > Row created callback< / a > < / li >
2013-10-16 16:33:34 +02:00
< li > < a href = "../advanced_init/row_grouping.html" > Row grouping< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../advanced_init/footer_callback.html" > Footer callback< / a > < / li >
2013-10-16 16:33:34 +02:00
< li > < a href = "../advanced_init/dom_toolbar.html" > Custom toolbar elements< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../advanced_init/sort_direction_control.html" > Order direction sequence control< / a > < / li >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< div class = "toc-group" >
< h3 > < a href = "../styling/index.html" > Styling< / a > < / h3 >
< ul class = "toc" >
< li > < a href = "../styling/display.html" > Base style< / a > < / li >
< li > < a href = "../styling/no-classes.html" > Base style - no styling classes< / a > < / li >
< li > < a href = "../styling/cell-border.html" > Base style - cell borders< / a > < / li >
2014-06-23 16:34:52 +02:00
< li > < a href = "../styling/compact.html" > Base style - compact< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../styling/hover.html" > Base style - hover< / a > < / li >
2013-11-12 20:18:51 +01:00
< li > < a href = "../styling/order-column.html" > Base style - order-column< / a > < / li >
2014-06-23 16:34:52 +02:00
< li > < a href = "../styling/row-border.html" > Base style - row borders< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../styling/stripe.html" > Base style - stripe< / a > < / li >
< li > < a href = "../styling/bootstrap.html" > Bootstrap< / a > < / li >
< li > < a href = "../styling/foundation.html" > Foundation< / a > < / li >
2014-06-23 16:34:52 +02:00
< li > < a href = "../styling/jqueryUI.html" > jQuery UI ThemeRoller< / a > < / li >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< div class = "toc-group" >
2014-01-17 17:45:14 +01:00
< h3 > < a href = "../data_sources/index.html" > Data sources< / a > < / h3 >
2013-10-16 13:13:30 +02:00
< ul class = "toc" >
2014-01-17 17:45:14 +01:00
< li > < a href = "../data_sources/dom.html" > HTML (DOM) sourced data< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../data_sources/ajax.html" > Ajax sourced data< / a > < / li >
< li > < a href = "../data_sources/js_array.html" > Javascript sourced data< / a > < / li >
< li > < a href = "../data_sources/server_side.html" > Server-side processing< / a > < / li >
< / ul >
< / div >
2014-01-17 17:45:14 +01:00
< div class = "toc-group" >
< h3 > < a href = "../api/index.html" > API< / a > < / h3 >
< ul class = "toc" >
< li > < a href = "../api/add_row.html" > Add rows< / a > < / li >
2014-07-18 13:09:54 +02:00
< li > < a href = "../api/multi_filter.html" > Individual column searching (text inputs)< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../api/multi_filter_select.html" > Individual column searching (select inputs)< / a > < / li >
2014-01-17 17:45:14 +01:00
< li > < a href = "../api/highlight.html" > Highlighting rows and columns< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../api/row_details.html" > Child rows (show extra / detailed information)< / a > < / li >
2014-01-17 17:45:14 +01:00
< li > < a href = "../api/select_row.html" > Row selection (multiple rows)< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../api/select_single_row.html" > Row selection and deletion (single row)< / a > < / li >
2014-01-17 17:45:14 +01:00
< li > < a href = "../api/form.html" > Form inputs< / a > < / li >
< li > < a href = "../api/counter_columns.html" > Index column< / a > < / li >
< li > < a href = "../api/show_hide.html" > Show / hide columns dynamically< / a > < / li >
< li > < a href = "../api/api_in_init.html" > Using API in callbacks< / a > < / li >
< li > < a href = "../api/tabs_and_scrolling.html" > Scrolling and jQuery UI tabs< / a > < / li >
2014-07-18 13:09:03 +02:00
< li > < a href = "../api/regex.html" > Search API (regular expressions)< / a > < / li >
2014-01-17 17:45:14 +01:00
< / ul >
< / div >
2013-10-16 13:13:30 +02:00
< div class = "toc-group" >
< h3 > < a href = "../ajax/index.html" > Ajax< / a > < / h3 >
< ul class = "toc" >
< li > < a href = "../ajax/simple.html" > Ajax data source (arrays)< / a > < / li >
< li > < a href = "../ajax/objects.html" > Ajax data source (objects)< / a > < / li >
< li > < a href = "../ajax/deep.html" > Nested object data (objects)< / a > < / li >
< li > < a href = "../ajax/objects_subarrays.html" > Nested object data (arrays)< / a > < / li >
2014-01-14 16:51:06 +01:00
< li > < a href = "../ajax/orthogonal-data.html" > Orthogonal data< / a > < / li >
2013-10-16 13:13:30 +02:00
< li > < a href = "../ajax/null_data_source.html" > Generated content for a column< / a > < / li >
< li > < a href = "../ajax/custom_data_property.html" > Custom data source property< / a > < / li >
< li > < a href = "../ajax/custom_data_flat.html" > Flat array data source< / a > < / li >
< li > < a href = "../ajax/defer_render.html" > Deferred rendering for speed< / a > < / li >
< / ul >
< / div >
< div class = "toc-group" >
2014-01-17 17:45:14 +01:00
< h3 > < a href = "../server_side/index.html" > Server-side< / a > < / h3 >
2013-10-16 13:13:30 +02:00
< ul class = "toc" >
< li > < a href = "../server_side/simple.html" > Server-side processing< / a > < / li >
< li > < a href = "../server_side/custom_vars.html" > Custom HTTP variables< / a > < / li >
< li > < a href = "../server_side/post.html" > POST data< / a > < / li >
< li > < a href = "../server_side/ids.html" > Automatic addition of row ID attributes< / a > < / li >
< li > < a href = "../server_side/object_data.html" > Object data source< / a > < / li >
< li > < a href = "../server_side/row_details.html" > Row details< / a > < / li >
< li > < a href = "../server_side/select_rows.html" > Row selection< / a > < / li >
< li > < a href = "../server_side/jsonp.html" > JSONP data source for remote domains< / a > < / li >
< li > < a href = "../server_side/defer_loading.html" > Deferred loading of data< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../server_side/pipeline.html" > Pipelining data to reduce Ajax calls for paging< / a > < / li >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< div class = "toc-group" >
< h3 > < a href = "../plug-ins/index.html" > Plug-ins< / a > < / h3 >
< ul class = "toc" >
< li > < a href = "../plug-ins/api.html" > API plug-in methods< / a > < / li >
2014-12-11 16:27:11 +01:00
< li > < a href = "../plug-ins/sorting_auto.html" > Ordering plug-ins (with type detection)< / a > < / li >
< li > < a href = "../plug-ins/sorting_manual.html" > Ordering plug-ins (no type detection)< / a > < / li >
2014-02-10 18:06:57 +01:00
< li > < a href = "../plug-ins/range_filtering.html" > Custom filtering - range search< / a > < / li >
2013-11-12 20:18:51 +01:00
< li > < a href = "../plug-ins/dom_sort.html" > Live DOM ordering< / a > < / li >
2013-10-16 13:13:30 +02:00
< / ul >
< / div >
< / div >
< div class = "epilogue" >
2014-12-11 16:27:11 +01: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 >
2015-01-11 17:26:59 +01:00
< p class = "copyright" > DataTables designed and created by < a href = "http://www.sprymedia.co.uk" > SpryMedia Ltd< / a > © 2007-2015< br >
2013-10-16 13:13:30 +02:00
DataTables is licensed under the < a href = "http://www.datatables.net/mit" > MIT license< / a > .< / p >
< / div >
< / div >
< / div >
< / section >
< / body >
< / html >