mirror of
https://gitea.mueller.network/extern/django-helpdesk.git
synced 2025-02-09 23:10:17 +01:00
Garret Wassermann
GitHub
commit
9bda30d09f
@ -1,101 +1,147 @@
|
|||||||
/*
|
/*
|
||||||
* Social Buttons for Bootstrap
|
* Social Buttons for Bootstrap
|
||||||
*
|
*
|
||||||
* Copyright 2013-2014 Panayiotis Lipiridis
|
* Copyright 2013-2016 Panayiotis Lipiridis
|
||||||
* Licensed under the MIT License
|
* Licensed under the MIT License
|
||||||
*
|
*
|
||||||
* https://github.com/lipis/bootstrap-social
|
* https://github.com/lipis/bootstrap-social
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
|
.btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
|
||||||
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
|
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
|
||||||
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
|
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
|
||||||
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
|
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
|
||||||
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
|
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
|
||||||
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
|
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
|
||||||
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
|
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
|
||||||
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
|
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
|
||||||
.btn-social-icon :first-child{border:none;text-align:center;width:100% !important}
|
.btn-social-icon>:first-child{border:none;text-align:center;width:100% !important}
|
||||||
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
|
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
|
||||||
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
|
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
|
||||||
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
|
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
|
||||||
.btn-adn{color:#fff;background-color:#d87a68;border-color:rgba(0,0,0,0.2)}.btn-adn:hover,.btn-adn:focus,.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
|
.btn-adn{color:#fff;background-color:#d87a68;border-color:rgba(0,0,0,0.2)}.btn-adn:focus,.btn-adn.focus{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-adn:hover{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}.btn-adn:active:hover,.btn-adn.active:hover,.open>.dropdown-toggle.btn-adn:hover,.btn-adn:active:focus,.btn-adn.active:focus,.open>.dropdown-toggle.btn-adn:focus,.btn-adn:active.focus,.btn-adn.active.focus,.open>.dropdown-toggle.btn-adn.focus{color:#fff;background-color:#b94630;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{background-image:none}
|
.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{background-image:none}
|
||||||
.btn-adn.disabled,.btn-adn[disabled],fieldset[disabled] .btn-adn,.btn-adn.disabled:hover,.btn-adn[disabled]:hover,fieldset[disabled] .btn-adn:hover,.btn-adn.disabled:focus,.btn-adn[disabled]:focus,fieldset[disabled] .btn-adn:focus,.btn-adn.disabled:active,.btn-adn[disabled]:active,fieldset[disabled] .btn-adn:active,.btn-adn.disabled.active,.btn-adn[disabled].active,fieldset[disabled] .btn-adn.active{background-color:#d87a68;border-color:rgba(0,0,0,0.2)}
|
.btn-adn.disabled:hover,.btn-adn[disabled]:hover,fieldset[disabled] .btn-adn:hover,.btn-adn.disabled:focus,.btn-adn[disabled]:focus,fieldset[disabled] .btn-adn:focus,.btn-adn.disabled.focus,.btn-adn[disabled].focus,fieldset[disabled] .btn-adn.focus{background-color:#d87a68;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-adn .badge{color:#d87a68;background-color:#fff}
|
.btn-adn .badge{color:#d87a68;background-color:#fff}
|
||||||
.btn-bitbucket{color:#fff;background-color:#205081;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:hover,.btn-bitbucket:focus,.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
|
.btn-bitbucket{color:#fff;background-color:#205081;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:focus,.btn-bitbucket.focus{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-bitbucket:hover{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:active:hover,.btn-bitbucket.active:hover,.open>.dropdown-toggle.btn-bitbucket:hover,.btn-bitbucket:active:focus,.btn-bitbucket.active:focus,.open>.dropdown-toggle.btn-bitbucket:focus,.btn-bitbucket:active.focus,.btn-bitbucket.active.focus,.open>.dropdown-toggle.btn-bitbucket.focus{color:#fff;background-color:#0f253c;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{background-image:none}
|
.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{background-image:none}
|
||||||
.btn-bitbucket.disabled,.btn-bitbucket[disabled],fieldset[disabled] .btn-bitbucket,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket:hover,.btn-bitbucket.disabled:focus,.btn-bitbucket[disabled]:focus,fieldset[disabled] .btn-bitbucket:focus,.btn-bitbucket.disabled:active,.btn-bitbucket[disabled]:active,fieldset[disabled] .btn-bitbucket:active,.btn-bitbucket.disabled.active,.btn-bitbucket[disabled].active,fieldset[disabled] .btn-bitbucket.active{background-color:#205081;border-color:rgba(0,0,0,0.2)}
|
.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket:hover,.btn-bitbucket.disabled:focus,.btn-bitbucket[disabled]:focus,fieldset[disabled] .btn-bitbucket:focus,.btn-bitbucket.disabled.focus,.btn-bitbucket[disabled].focus,fieldset[disabled] .btn-bitbucket.focus{background-color:#205081;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-bitbucket .badge{color:#205081;background-color:#fff}
|
.btn-bitbucket .badge{color:#205081;background-color:#fff}
|
||||||
.btn-dropbox{color:#fff;background-color:#1087dd;border-color:rgba(0,0,0,0.2)}.btn-dropbox:hover,.btn-dropbox:focus,.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
|
.btn-dropbox{color:#fff;background-color:#1087dd;border-color:rgba(0,0,0,0.2)}.btn-dropbox:focus,.btn-dropbox.focus{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-dropbox:hover{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}.btn-dropbox:active:hover,.btn-dropbox.active:hover,.open>.dropdown-toggle.btn-dropbox:hover,.btn-dropbox:active:focus,.btn-dropbox.active:focus,.open>.dropdown-toggle.btn-dropbox:focus,.btn-dropbox:active.focus,.btn-dropbox.active.focus,.open>.dropdown-toggle.btn-dropbox.focus{color:#fff;background-color:#0a568c;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{background-image:none}
|
.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{background-image:none}
|
||||||
.btn-dropbox.disabled,.btn-dropbox[disabled],fieldset[disabled] .btn-dropbox,.btn-dropbox.disabled:hover,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox:hover,.btn-dropbox.disabled:focus,.btn-dropbox[disabled]:focus,fieldset[disabled] .btn-dropbox:focus,.btn-dropbox.disabled:active,.btn-dropbox[disabled]:active,fieldset[disabled] .btn-dropbox:active,.btn-dropbox.disabled.active,.btn-dropbox[disabled].active,fieldset[disabled] .btn-dropbox.active{background-color:#1087dd;border-color:rgba(0,0,0,0.2)}
|
.btn-dropbox.disabled:hover,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox:hover,.btn-dropbox.disabled:focus,.btn-dropbox[disabled]:focus,fieldset[disabled] .btn-dropbox:focus,.btn-dropbox.disabled.focus,.btn-dropbox[disabled].focus,fieldset[disabled] .btn-dropbox.focus{background-color:#1087dd;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-dropbox .badge{color:#1087dd;background-color:#fff}
|
.btn-dropbox .badge{color:#1087dd;background-color:#fff}
|
||||||
.btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
|
.btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:focus,.btn-facebook.focus{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-facebook:hover{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}.btn-facebook:active:hover,.btn-facebook.active:hover,.open>.dropdown-toggle.btn-facebook:hover,.btn-facebook:active:focus,.btn-facebook.active:focus,.open>.dropdown-toggle.btn-facebook:focus,.btn-facebook:active.focus,.btn-facebook.active.focus,.open>.dropdown-toggle.btn-facebook.focus{color:#fff;background-color:#23345a;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{background-image:none}
|
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{background-image:none}
|
||||||
.btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
|
.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled.focus,.btn-facebook[disabled].focus,fieldset[disabled] .btn-facebook.focus{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-facebook .badge{color:#3b5998;background-color:#fff}
|
.btn-facebook .badge{color:#3b5998;background-color:#fff}
|
||||||
.btn-flickr{color:#fff;background-color:#ff0084;border-color:rgba(0,0,0,0.2)}.btn-flickr:hover,.btn-flickr:focus,.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
|
.btn-flickr{color:#fff;background-color:#ff0084;border-color:rgba(0,0,0,0.2)}.btn-flickr:focus,.btn-flickr.focus{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-flickr:hover{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}.btn-flickr:active:hover,.btn-flickr.active:hover,.open>.dropdown-toggle.btn-flickr:hover,.btn-flickr:active:focus,.btn-flickr.active:focus,.open>.dropdown-toggle.btn-flickr:focus,.btn-flickr:active.focus,.btn-flickr.active.focus,.open>.dropdown-toggle.btn-flickr.focus{color:#fff;background-color:#a80057;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{background-image:none}
|
.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{background-image:none}
|
||||||
.btn-flickr.disabled,.btn-flickr[disabled],fieldset[disabled] .btn-flickr,.btn-flickr.disabled:hover,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr:hover,.btn-flickr.disabled:focus,.btn-flickr[disabled]:focus,fieldset[disabled] .btn-flickr:focus,.btn-flickr.disabled:active,.btn-flickr[disabled]:active,fieldset[disabled] .btn-flickr:active,.btn-flickr.disabled.active,.btn-flickr[disabled].active,fieldset[disabled] .btn-flickr.active{background-color:#ff0084;border-color:rgba(0,0,0,0.2)}
|
.btn-flickr.disabled:hover,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr:hover,.btn-flickr.disabled:focus,.btn-flickr[disabled]:focus,fieldset[disabled] .btn-flickr:focus,.btn-flickr.disabled.focus,.btn-flickr[disabled].focus,fieldset[disabled] .btn-flickr.focus{background-color:#ff0084;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-flickr .badge{color:#ff0084;background-color:#fff}
|
.btn-flickr .badge{color:#ff0084;background-color:#fff}
|
||||||
.btn-foursquare{color:#fff;background-color:#f94877;border-color:rgba(0,0,0,0.2)}.btn-foursquare:hover,.btn-foursquare:focus,.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
|
.btn-foursquare{color:#fff;background-color:#f94877;border-color:rgba(0,0,0,0.2)}.btn-foursquare:focus,.btn-foursquare.focus{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-foursquare:hover{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}.btn-foursquare:active:hover,.btn-foursquare.active:hover,.open>.dropdown-toggle.btn-foursquare:hover,.btn-foursquare:active:focus,.btn-foursquare.active:focus,.open>.dropdown-toggle.btn-foursquare:focus,.btn-foursquare:active.focus,.btn-foursquare.active.focus,.open>.dropdown-toggle.btn-foursquare.focus{color:#fff;background-color:#e30742;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{background-image:none}
|
.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{background-image:none}
|
||||||
.btn-foursquare.disabled,.btn-foursquare[disabled],fieldset[disabled] .btn-foursquare,.btn-foursquare.disabled:hover,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare:hover,.btn-foursquare.disabled:focus,.btn-foursquare[disabled]:focus,fieldset[disabled] .btn-foursquare:focus,.btn-foursquare.disabled:active,.btn-foursquare[disabled]:active,fieldset[disabled] .btn-foursquare:active,.btn-foursquare.disabled.active,.btn-foursquare[disabled].active,fieldset[disabled] .btn-foursquare.active{background-color:#f94877;border-color:rgba(0,0,0,0.2)}
|
.btn-foursquare.disabled:hover,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare:hover,.btn-foursquare.disabled:focus,.btn-foursquare[disabled]:focus,fieldset[disabled] .btn-foursquare:focus,.btn-foursquare.disabled.focus,.btn-foursquare[disabled].focus,fieldset[disabled] .btn-foursquare.focus{background-color:#f94877;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-foursquare .badge{color:#f94877;background-color:#fff}
|
.btn-foursquare .badge{color:#f94877;background-color:#fff}
|
||||||
.btn-github{color:#fff;background-color:#444;border-color:rgba(0,0,0,0.2)}.btn-github:hover,.btn-github:focus,.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
|
.btn-github{color:#fff;background-color:#444;border-color:rgba(0,0,0,0.2)}.btn-github:focus,.btn-github.focus{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-github:hover{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}.btn-github:active:hover,.btn-github.active:hover,.open>.dropdown-toggle.btn-github:hover,.btn-github:active:focus,.btn-github.active:focus,.open>.dropdown-toggle.btn-github:focus,.btn-github:active.focus,.btn-github.active.focus,.open>.dropdown-toggle.btn-github.focus{color:#fff;background-color:#191919;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{background-image:none}
|
.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{background-image:none}
|
||||||
.btn-github.disabled,.btn-github[disabled],fieldset[disabled] .btn-github,.btn-github.disabled:hover,.btn-github[disabled]:hover,fieldset[disabled] .btn-github:hover,.btn-github.disabled:focus,.btn-github[disabled]:focus,fieldset[disabled] .btn-github:focus,.btn-github.disabled:active,.btn-github[disabled]:active,fieldset[disabled] .btn-github:active,.btn-github.disabled.active,.btn-github[disabled].active,fieldset[disabled] .btn-github.active{background-color:#444;border-color:rgba(0,0,0,0.2)}
|
.btn-github.disabled:hover,.btn-github[disabled]:hover,fieldset[disabled] .btn-github:hover,.btn-github.disabled:focus,.btn-github[disabled]:focus,fieldset[disabled] .btn-github:focus,.btn-github.disabled.focus,.btn-github[disabled].focus,fieldset[disabled] .btn-github.focus{background-color:#444;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-github .badge{color:#444;background-color:#fff}
|
.btn-github .badge{color:#444;background-color:#fff}
|
||||||
.btn-google-plus{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google-plus:hover,.btn-google-plus:focus,.btn-google-plus:active,.btn-google-plus.active,.open>.dropdown-toggle.btn-google-plus{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
|
.btn-google{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google:focus,.btn-google.focus{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-google-plus:active,.btn-google-plus.active,.open>.dropdown-toggle.btn-google-plus{background-image:none}
|
.btn-google:hover{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-google-plus.disabled,.btn-google-plus[disabled],fieldset[disabled] .btn-google-plus,.btn-google-plus.disabled:hover,.btn-google-plus[disabled]:hover,fieldset[disabled] .btn-google-plus:hover,.btn-google-plus.disabled:focus,.btn-google-plus[disabled]:focus,fieldset[disabled] .btn-google-plus:focus,.btn-google-plus.disabled:active,.btn-google-plus[disabled]:active,fieldset[disabled] .btn-google-plus:active,.btn-google-plus.disabled.active,.btn-google-plus[disabled].active,fieldset[disabled] .btn-google-plus.active{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
|
.btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}.btn-google:active:hover,.btn-google.active:hover,.open>.dropdown-toggle.btn-google:hover,.btn-google:active:focus,.btn-google.active:focus,.open>.dropdown-toggle.btn-google:focus,.btn-google:active.focus,.btn-google.active.focus,.open>.dropdown-toggle.btn-google.focus{color:#fff;background-color:#a32b1c;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-google-plus .badge{color:#dd4b39;background-color:#fff}
|
.btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{background-image:none}
|
||||||
.btn-instagram{color:#fff;background-color:#3f729b;border-color:rgba(0,0,0,0.2)}.btn-instagram:hover,.btn-instagram:focus,.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
|
.btn-google.disabled:hover,.btn-google[disabled]:hover,fieldset[disabled] .btn-google:hover,.btn-google.disabled:focus,.btn-google[disabled]:focus,fieldset[disabled] .btn-google:focus,.btn-google.disabled.focus,.btn-google[disabled].focus,fieldset[disabled] .btn-google.focus{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-google .badge{color:#dd4b39;background-color:#fff}
|
||||||
|
.btn-instagram{color:#fff;background-color:#3f729b;border-color:rgba(0,0,0,0.2)}.btn-instagram:focus,.btn-instagram.focus{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-instagram:hover{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}.btn-instagram:active:hover,.btn-instagram.active:hover,.open>.dropdown-toggle.btn-instagram:hover,.btn-instagram:active:focus,.btn-instagram.active:focus,.open>.dropdown-toggle.btn-instagram:focus,.btn-instagram:active.focus,.btn-instagram.active.focus,.open>.dropdown-toggle.btn-instagram.focus{color:#fff;background-color:#26455d;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{background-image:none}
|
.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{background-image:none}
|
||||||
.btn-instagram.disabled,.btn-instagram[disabled],fieldset[disabled] .btn-instagram,.btn-instagram.disabled:hover,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram:hover,.btn-instagram.disabled:focus,.btn-instagram[disabled]:focus,fieldset[disabled] .btn-instagram:focus,.btn-instagram.disabled:active,.btn-instagram[disabled]:active,fieldset[disabled] .btn-instagram:active,.btn-instagram.disabled.active,.btn-instagram[disabled].active,fieldset[disabled] .btn-instagram.active{background-color:#3f729b;border-color:rgba(0,0,0,0.2)}
|
.btn-instagram.disabled:hover,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram:hover,.btn-instagram.disabled:focus,.btn-instagram[disabled]:focus,fieldset[disabled] .btn-instagram:focus,.btn-instagram.disabled.focus,.btn-instagram[disabled].focus,fieldset[disabled] .btn-instagram.focus{background-color:#3f729b;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-instagram .badge{color:#3f729b;background-color:#fff}
|
.btn-instagram .badge{color:#3f729b;background-color:#fff}
|
||||||
.btn-linkedin{color:#fff;background-color:#007bb6;border-color:rgba(0,0,0,0.2)}.btn-linkedin:hover,.btn-linkedin:focus,.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
|
.btn-linkedin{color:#fff;background-color:#007bb6;border-color:rgba(0,0,0,0.2)}.btn-linkedin:focus,.btn-linkedin.focus{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-linkedin:hover{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}.btn-linkedin:active:hover,.btn-linkedin.active:hover,.open>.dropdown-toggle.btn-linkedin:hover,.btn-linkedin:active:focus,.btn-linkedin.active:focus,.open>.dropdown-toggle.btn-linkedin:focus,.btn-linkedin:active.focus,.btn-linkedin.active.focus,.open>.dropdown-toggle.btn-linkedin.focus{color:#fff;background-color:#00405f;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{background-image:none}
|
.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{background-image:none}
|
||||||
.btn-linkedin.disabled,.btn-linkedin[disabled],fieldset[disabled] .btn-linkedin,.btn-linkedin.disabled:hover,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin:hover,.btn-linkedin.disabled:focus,.btn-linkedin[disabled]:focus,fieldset[disabled] .btn-linkedin:focus,.btn-linkedin.disabled:active,.btn-linkedin[disabled]:active,fieldset[disabled] .btn-linkedin:active,.btn-linkedin.disabled.active,.btn-linkedin[disabled].active,fieldset[disabled] .btn-linkedin.active{background-color:#007bb6;border-color:rgba(0,0,0,0.2)}
|
.btn-linkedin.disabled:hover,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin:hover,.btn-linkedin.disabled:focus,.btn-linkedin[disabled]:focus,fieldset[disabled] .btn-linkedin:focus,.btn-linkedin.disabled.focus,.btn-linkedin[disabled].focus,fieldset[disabled] .btn-linkedin.focus{background-color:#007bb6;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-linkedin .badge{color:#007bb6;background-color:#fff}
|
.btn-linkedin .badge{color:#007bb6;background-color:#fff}
|
||||||
.btn-microsoft{color:#fff;background-color:#2672ec;border-color:rgba(0,0,0,0.2)}.btn-microsoft:hover,.btn-microsoft:focus,.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
|
.btn-microsoft{color:#fff;background-color:#2672ec;border-color:rgba(0,0,0,0.2)}.btn-microsoft:focus,.btn-microsoft.focus{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-microsoft:hover{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}.btn-microsoft:active:hover,.btn-microsoft.active:hover,.open>.dropdown-toggle.btn-microsoft:hover,.btn-microsoft:active:focus,.btn-microsoft.active:focus,.open>.dropdown-toggle.btn-microsoft:focus,.btn-microsoft:active.focus,.btn-microsoft.active.focus,.open>.dropdown-toggle.btn-microsoft.focus{color:#fff;background-color:#0f4bac;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{background-image:none}
|
.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{background-image:none}
|
||||||
.btn-microsoft.disabled,.btn-microsoft[disabled],fieldset[disabled] .btn-microsoft,.btn-microsoft.disabled:hover,.btn-microsoft[disabled]:hover,fieldset[disabled] .btn-microsoft:hover,.btn-microsoft.disabled:focus,.btn-microsoft[disabled]:focus,fieldset[disabled] .btn-microsoft:focus,.btn-microsoft.disabled:active,.btn-microsoft[disabled]:active,fieldset[disabled] .btn-microsoft:active,.btn-microsoft.disabled.active,.btn-microsoft[disabled].active,fieldset[disabled] .btn-microsoft.active{background-color:#2672ec;border-color:rgba(0,0,0,0.2)}
|
.btn-microsoft.disabled:hover,.btn-microsoft[disabled]:hover,fieldset[disabled] .btn-microsoft:hover,.btn-microsoft.disabled:focus,.btn-microsoft[disabled]:focus,fieldset[disabled] .btn-microsoft:focus,.btn-microsoft.disabled.focus,.btn-microsoft[disabled].focus,fieldset[disabled] .btn-microsoft.focus{background-color:#2672ec;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-microsoft .badge{color:#2672ec;background-color:#fff}
|
.btn-microsoft .badge{color:#2672ec;background-color:#fff}
|
||||||
.btn-openid{color:#fff;background-color:#f7931e;border-color:rgba(0,0,0,0.2)}.btn-openid:hover,.btn-openid:focus,.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
|
.btn-odnoklassniki{color:#fff;background-color:#f4731c;border-color:rgba(0,0,0,0.2)}.btn-odnoklassniki:focus,.btn-odnoklassniki.focus{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-odnoklassniki:hover{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-odnoklassniki:active,.btn-odnoklassniki.active,.open>.dropdown-toggle.btn-odnoklassniki{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}.btn-odnoklassniki:active:hover,.btn-odnoklassniki.active:hover,.open>.dropdown-toggle.btn-odnoklassniki:hover,.btn-odnoklassniki:active:focus,.btn-odnoklassniki.active:focus,.open>.dropdown-toggle.btn-odnoklassniki:focus,.btn-odnoklassniki:active.focus,.btn-odnoklassniki.active.focus,.open>.dropdown-toggle.btn-odnoklassniki.focus{color:#fff;background-color:#b14c09;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-odnoklassniki:active,.btn-odnoklassniki.active,.open>.dropdown-toggle.btn-odnoklassniki{background-image:none}
|
||||||
|
.btn-odnoklassniki.disabled:hover,.btn-odnoklassniki[disabled]:hover,fieldset[disabled] .btn-odnoklassniki:hover,.btn-odnoklassniki.disabled:focus,.btn-odnoklassniki[disabled]:focus,fieldset[disabled] .btn-odnoklassniki:focus,.btn-odnoklassniki.disabled.focus,.btn-odnoklassniki[disabled].focus,fieldset[disabled] .btn-odnoklassniki.focus{background-color:#f4731c;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-odnoklassniki .badge{color:#f4731c;background-color:#fff}
|
||||||
|
.btn-openid{color:#fff;background-color:#f7931e;border-color:rgba(0,0,0,0.2)}.btn-openid:focus,.btn-openid.focus{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-openid:hover{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}.btn-openid:active:hover,.btn-openid.active:hover,.open>.dropdown-toggle.btn-openid:hover,.btn-openid:active:focus,.btn-openid.active:focus,.open>.dropdown-toggle.btn-openid:focus,.btn-openid:active.focus,.btn-openid.active.focus,.open>.dropdown-toggle.btn-openid.focus{color:#fff;background-color:#b86607;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{background-image:none}
|
.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{background-image:none}
|
||||||
.btn-openid.disabled,.btn-openid[disabled],fieldset[disabled] .btn-openid,.btn-openid.disabled:hover,.btn-openid[disabled]:hover,fieldset[disabled] .btn-openid:hover,.btn-openid.disabled:focus,.btn-openid[disabled]:focus,fieldset[disabled] .btn-openid:focus,.btn-openid.disabled:active,.btn-openid[disabled]:active,fieldset[disabled] .btn-openid:active,.btn-openid.disabled.active,.btn-openid[disabled].active,fieldset[disabled] .btn-openid.active{background-color:#f7931e;border-color:rgba(0,0,0,0.2)}
|
.btn-openid.disabled:hover,.btn-openid[disabled]:hover,fieldset[disabled] .btn-openid:hover,.btn-openid.disabled:focus,.btn-openid[disabled]:focus,fieldset[disabled] .btn-openid:focus,.btn-openid.disabled.focus,.btn-openid[disabled].focus,fieldset[disabled] .btn-openid.focus{background-color:#f7931e;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-openid .badge{color:#f7931e;background-color:#fff}
|
.btn-openid .badge{color:#f7931e;background-color:#fff}
|
||||||
.btn-pinterest{color:#fff;background-color:#cb2027;border-color:rgba(0,0,0,0.2)}.btn-pinterest:hover,.btn-pinterest:focus,.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
|
.btn-pinterest{color:#fff;background-color:#cb2027;border-color:rgba(0,0,0,0.2)}.btn-pinterest:focus,.btn-pinterest.focus{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-pinterest:hover{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}.btn-pinterest:active:hover,.btn-pinterest.active:hover,.open>.dropdown-toggle.btn-pinterest:hover,.btn-pinterest:active:focus,.btn-pinterest.active:focus,.open>.dropdown-toggle.btn-pinterest:focus,.btn-pinterest:active.focus,.btn-pinterest.active.focus,.open>.dropdown-toggle.btn-pinterest.focus{color:#fff;background-color:#801419;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{background-image:none}
|
.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{background-image:none}
|
||||||
.btn-pinterest.disabled,.btn-pinterest[disabled],fieldset[disabled] .btn-pinterest,.btn-pinterest.disabled:hover,.btn-pinterest[disabled]:hover,fieldset[disabled] .btn-pinterest:hover,.btn-pinterest.disabled:focus,.btn-pinterest[disabled]:focus,fieldset[disabled] .btn-pinterest:focus,.btn-pinterest.disabled:active,.btn-pinterest[disabled]:active,fieldset[disabled] .btn-pinterest:active,.btn-pinterest.disabled.active,.btn-pinterest[disabled].active,fieldset[disabled] .btn-pinterest.active{background-color:#cb2027;border-color:rgba(0,0,0,0.2)}
|
.btn-pinterest.disabled:hover,.btn-pinterest[disabled]:hover,fieldset[disabled] .btn-pinterest:hover,.btn-pinterest.disabled:focus,.btn-pinterest[disabled]:focus,fieldset[disabled] .btn-pinterest:focus,.btn-pinterest.disabled.focus,.btn-pinterest[disabled].focus,fieldset[disabled] .btn-pinterest.focus{background-color:#cb2027;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-pinterest .badge{color:#cb2027;background-color:#fff}
|
.btn-pinterest .badge{color:#cb2027;background-color:#fff}
|
||||||
.btn-reddit{color:#000;background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}.btn-reddit:hover,.btn-reddit:focus,.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
|
.btn-reddit{color:#000;background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}.btn-reddit:focus,.btn-reddit.focus{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-reddit:hover{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}.btn-reddit:active:hover,.btn-reddit.active:hover,.open>.dropdown-toggle.btn-reddit:hover,.btn-reddit:active:focus,.btn-reddit.active:focus,.open>.dropdown-toggle.btn-reddit:focus,.btn-reddit:active.focus,.btn-reddit.active.focus,.open>.dropdown-toggle.btn-reddit.focus{color:#000;background-color:#98ccff;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{background-image:none}
|
.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{background-image:none}
|
||||||
.btn-reddit.disabled,.btn-reddit[disabled],fieldset[disabled] .btn-reddit,.btn-reddit.disabled:hover,.btn-reddit[disabled]:hover,fieldset[disabled] .btn-reddit:hover,.btn-reddit.disabled:focus,.btn-reddit[disabled]:focus,fieldset[disabled] .btn-reddit:focus,.btn-reddit.disabled:active,.btn-reddit[disabled]:active,fieldset[disabled] .btn-reddit:active,.btn-reddit.disabled.active,.btn-reddit[disabled].active,fieldset[disabled] .btn-reddit.active{background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}
|
.btn-reddit.disabled:hover,.btn-reddit[disabled]:hover,fieldset[disabled] .btn-reddit:hover,.btn-reddit.disabled:focus,.btn-reddit[disabled]:focus,fieldset[disabled] .btn-reddit:focus,.btn-reddit.disabled.focus,.btn-reddit[disabled].focus,fieldset[disabled] .btn-reddit.focus{background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-reddit .badge{color:#eff7ff;background-color:#000}
|
.btn-reddit .badge{color:#eff7ff;background-color:#000}
|
||||||
.btn-soundcloud{color:#fff;background-color:#f50;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:hover,.btn-soundcloud:focus,.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
|
.btn-soundcloud{color:#fff;background-color:#f50;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:focus,.btn-soundcloud.focus{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-soundcloud:hover{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:active:hover,.btn-soundcloud.active:hover,.open>.dropdown-toggle.btn-soundcloud:hover,.btn-soundcloud:active:focus,.btn-soundcloud.active:focus,.open>.dropdown-toggle.btn-soundcloud:focus,.btn-soundcloud:active.focus,.btn-soundcloud.active.focus,.open>.dropdown-toggle.btn-soundcloud.focus{color:#fff;background-color:#a83800;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{background-image:none}
|
.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{background-image:none}
|
||||||
.btn-soundcloud.disabled,.btn-soundcloud[disabled],fieldset[disabled] .btn-soundcloud,.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled]:hover,fieldset[disabled] .btn-soundcloud:hover,.btn-soundcloud.disabled:focus,.btn-soundcloud[disabled]:focus,fieldset[disabled] .btn-soundcloud:focus,.btn-soundcloud.disabled:active,.btn-soundcloud[disabled]:active,fieldset[disabled] .btn-soundcloud:active,.btn-soundcloud.disabled.active,.btn-soundcloud[disabled].active,fieldset[disabled] .btn-soundcloud.active{background-color:#f50;border-color:rgba(0,0,0,0.2)}
|
.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled]:hover,fieldset[disabled] .btn-soundcloud:hover,.btn-soundcloud.disabled:focus,.btn-soundcloud[disabled]:focus,fieldset[disabled] .btn-soundcloud:focus,.btn-soundcloud.disabled.focus,.btn-soundcloud[disabled].focus,fieldset[disabled] .btn-soundcloud.focus{background-color:#f50;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-soundcloud .badge{color:#f50;background-color:#fff}
|
.btn-soundcloud .badge{color:#f50;background-color:#fff}
|
||||||
.btn-tumblr{color:#fff;background-color:#2c4762;border-color:rgba(0,0,0,0.2)}.btn-tumblr:hover,.btn-tumblr:focus,.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
|
.btn-tumblr{color:#fff;background-color:#2c4762;border-color:rgba(0,0,0,0.2)}.btn-tumblr:focus,.btn-tumblr.focus{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-tumblr:hover{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}.btn-tumblr:active:hover,.btn-tumblr.active:hover,.open>.dropdown-toggle.btn-tumblr:hover,.btn-tumblr:active:focus,.btn-tumblr.active:focus,.open>.dropdown-toggle.btn-tumblr:focus,.btn-tumblr:active.focus,.btn-tumblr.active.focus,.open>.dropdown-toggle.btn-tumblr.focus{color:#fff;background-color:#111c26;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{background-image:none}
|
.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{background-image:none}
|
||||||
.btn-tumblr.disabled,.btn-tumblr[disabled],fieldset[disabled] .btn-tumblr,.btn-tumblr.disabled:hover,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr:hover,.btn-tumblr.disabled:focus,.btn-tumblr[disabled]:focus,fieldset[disabled] .btn-tumblr:focus,.btn-tumblr.disabled:active,.btn-tumblr[disabled]:active,fieldset[disabled] .btn-tumblr:active,.btn-tumblr.disabled.active,.btn-tumblr[disabled].active,fieldset[disabled] .btn-tumblr.active{background-color:#2c4762;border-color:rgba(0,0,0,0.2)}
|
.btn-tumblr.disabled:hover,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr:hover,.btn-tumblr.disabled:focus,.btn-tumblr[disabled]:focus,fieldset[disabled] .btn-tumblr:focus,.btn-tumblr.disabled.focus,.btn-tumblr[disabled].focus,fieldset[disabled] .btn-tumblr.focus{background-color:#2c4762;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-tumblr .badge{color:#2c4762;background-color:#fff}
|
.btn-tumblr .badge{color:#2c4762;background-color:#fff}
|
||||||
.btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:hover,.btn-twitter:focus,.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
|
.btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:focus,.btn-twitter.focus{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-twitter:hover{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}.btn-twitter:active:hover,.btn-twitter.active:hover,.open>.dropdown-toggle.btn-twitter:hover,.btn-twitter:active:focus,.btn-twitter.active:focus,.open>.dropdown-toggle.btn-twitter:focus,.btn-twitter:active.focus,.btn-twitter.active.focus,.open>.dropdown-toggle.btn-twitter.focus{color:#fff;background-color:#1583d7;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{background-image:none}
|
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{background-image:none}
|
||||||
.btn-twitter.disabled,.btn-twitter[disabled],fieldset[disabled] .btn-twitter,.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled:active,.btn-twitter[disabled]:active,fieldset[disabled] .btn-twitter:active,.btn-twitter.disabled.active,.btn-twitter[disabled].active,fieldset[disabled] .btn-twitter.active{background-color:#55acee;border-color:rgba(0,0,0,0.2)}
|
.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled.focus,.btn-twitter[disabled].focus,fieldset[disabled] .btn-twitter.focus{background-color:#55acee;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-twitter .badge{color:#55acee;background-color:#fff}
|
.btn-twitter .badge{color:#55acee;background-color:#fff}
|
||||||
.btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}.btn-vimeo:hover,.btn-vimeo:focus,.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
|
.btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}.btn-vimeo:focus,.btn-vimeo.focus{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-vimeo:hover{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}.btn-vimeo:active:hover,.btn-vimeo.active:hover,.open>.dropdown-toggle.btn-vimeo:hover,.btn-vimeo:active:focus,.btn-vimeo.active:focus,.open>.dropdown-toggle.btn-vimeo:focus,.btn-vimeo:active.focus,.btn-vimeo.active.focus,.open>.dropdown-toggle.btn-vimeo.focus{color:#fff;background-color:#0f7b9f;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{background-image:none}
|
.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{background-image:none}
|
||||||
.btn-vimeo.disabled,.btn-vimeo[disabled],fieldset[disabled] .btn-vimeo,.btn-vimeo.disabled:hover,.btn-vimeo[disabled]:hover,fieldset[disabled] .btn-vimeo:hover,.btn-vimeo.disabled:focus,.btn-vimeo[disabled]:focus,fieldset[disabled] .btn-vimeo:focus,.btn-vimeo.disabled:active,.btn-vimeo[disabled]:active,fieldset[disabled] .btn-vimeo:active,.btn-vimeo.disabled.active,.btn-vimeo[disabled].active,fieldset[disabled] .btn-vimeo.active{background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}
|
.btn-vimeo.disabled:hover,.btn-vimeo[disabled]:hover,fieldset[disabled] .btn-vimeo:hover,.btn-vimeo.disabled:focus,.btn-vimeo[disabled]:focus,fieldset[disabled] .btn-vimeo:focus,.btn-vimeo.disabled.focus,.btn-vimeo[disabled].focus,fieldset[disabled] .btn-vimeo.focus{background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-vimeo .badge{color:#1ab7ea;background-color:#fff}
|
.btn-vimeo .badge{color:#1ab7ea;background-color:#fff}
|
||||||
.btn-vk{color:#fff;background-color:#587ea3;border-color:rgba(0,0,0,0.2)}.btn-vk:hover,.btn-vk:focus,.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
|
.btn-vk{color:#fff;background-color:#587ea3;border-color:rgba(0,0,0,0.2)}.btn-vk:focus,.btn-vk.focus{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-vk:hover{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}.btn-vk:active:hover,.btn-vk.active:hover,.open>.dropdown-toggle.btn-vk:hover,.btn-vk:active:focus,.btn-vk.active:focus,.open>.dropdown-toggle.btn-vk:focus,.btn-vk:active.focus,.btn-vk.active.focus,.open>.dropdown-toggle.btn-vk.focus{color:#fff;background-color:#3a526b;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{background-image:none}
|
.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{background-image:none}
|
||||||
.btn-vk.disabled,.btn-vk[disabled],fieldset[disabled] .btn-vk,.btn-vk.disabled:hover,.btn-vk[disabled]:hover,fieldset[disabled] .btn-vk:hover,.btn-vk.disabled:focus,.btn-vk[disabled]:focus,fieldset[disabled] .btn-vk:focus,.btn-vk.disabled:active,.btn-vk[disabled]:active,fieldset[disabled] .btn-vk:active,.btn-vk.disabled.active,.btn-vk[disabled].active,fieldset[disabled] .btn-vk.active{background-color:#587ea3;border-color:rgba(0,0,0,0.2)}
|
.btn-vk.disabled:hover,.btn-vk[disabled]:hover,fieldset[disabled] .btn-vk:hover,.btn-vk.disabled:focus,.btn-vk[disabled]:focus,fieldset[disabled] .btn-vk:focus,.btn-vk.disabled.focus,.btn-vk[disabled].focus,fieldset[disabled] .btn-vk.focus{background-color:#587ea3;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-vk .badge{color:#587ea3;background-color:#fff}
|
.btn-vk .badge{color:#587ea3;background-color:#fff}
|
||||||
.btn-yahoo{color:#fff;background-color:#720e9e;border-color:rgba(0,0,0,0.2)}.btn-yahoo:hover,.btn-yahoo:focus,.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
|
.btn-yahoo{color:#fff;background-color:#720e9e;border-color:rgba(0,0,0,0.2)}.btn-yahoo:focus,.btn-yahoo.focus{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-yahoo:hover{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
|
||||||
|
.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}.btn-yahoo:active:hover,.btn-yahoo.active:hover,.open>.dropdown-toggle.btn-yahoo:hover,.btn-yahoo:active:focus,.btn-yahoo.active:focus,.open>.dropdown-toggle.btn-yahoo:focus,.btn-yahoo:active.focus,.btn-yahoo.active.focus,.open>.dropdown-toggle.btn-yahoo.focus{color:#fff;background-color:#39074e;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{background-image:none}
|
.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{background-image:none}
|
||||||
.btn-yahoo.disabled,.btn-yahoo[disabled],fieldset[disabled] .btn-yahoo,.btn-yahoo.disabled:hover,.btn-yahoo[disabled]:hover,fieldset[disabled] .btn-yahoo:hover,.btn-yahoo.disabled:focus,.btn-yahoo[disabled]:focus,fieldset[disabled] .btn-yahoo:focus,.btn-yahoo.disabled:active,.btn-yahoo[disabled]:active,fieldset[disabled] .btn-yahoo:active,.btn-yahoo.disabled.active,.btn-yahoo[disabled].active,fieldset[disabled] .btn-yahoo.active{background-color:#720e9e;border-color:rgba(0,0,0,0.2)}
|
.btn-yahoo.disabled:hover,.btn-yahoo[disabled]:hover,fieldset[disabled] .btn-yahoo:hover,.btn-yahoo.disabled:focus,.btn-yahoo[disabled]:focus,fieldset[disabled] .btn-yahoo:focus,.btn-yahoo.disabled.focus,.btn-yahoo[disabled].focus,fieldset[disabled] .btn-yahoo.focus{background-color:#720e9e;border-color:rgba(0,0,0,0.2)}
|
||||||
.btn-yahoo .badge{color:#720e9e;background-color:#fff}
|
.btn-yahoo .badge{color:#720e9e;background-color:#fff}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* Social Buttons for Bootstrap
|
* Social Buttons for Bootstrap
|
||||||
*
|
*
|
||||||
* Copyright 2013-2014 Panayiotis Lipiridis
|
* Copyright 2013-2016 Panayiotis Lipiridis
|
||||||
* Licensed under the MIT License
|
* Licensed under the MIT License
|
||||||
*
|
*
|
||||||
* https://github.com/lipis/bootstrap-social
|
* https://github.com/lipis/bootstrap-social
|
||||||
@ -32,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
&.btn-lg {
|
&.btn-lg {
|
||||||
padding-left: (@bs-height-lg + @padding-large-horizontal);
|
padding-left: (@bs-height-lg + @padding-large-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: @bs-height-lg;
|
line-height: @bs-height-lg;
|
||||||
width: @bs-height-lg;
|
width: @bs-height-lg;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
@ -40,7 +40,7 @@
|
|||||||
}
|
}
|
||||||
&.btn-sm {
|
&.btn-sm {
|
||||||
padding-left: (@bs-height-sm + @padding-small-horizontal);
|
padding-left: (@bs-height-sm + @padding-small-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: @bs-height-sm;
|
line-height: @bs-height-sm;
|
||||||
width: @bs-height-sm;
|
width: @bs-height-sm;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
@ -48,7 +48,7 @@
|
|||||||
}
|
}
|
||||||
&.btn-xs {
|
&.btn-xs {
|
||||||
padding-left: (@bs-height-xs + @padding-small-horizontal);
|
padding-left: (@bs-height-xs + @padding-small-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: @bs-height-xs;
|
line-height: @bs-height-xs;
|
||||||
width: @bs-height-xs;
|
width: @bs-height-xs;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
height: (@bs-height-base + 2);
|
height: (@bs-height-base + 2);
|
||||||
width: (@bs-height-base + 2);
|
width: (@bs-height-base + 2);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
:first-child {
|
> :first-child {
|
||||||
border: none;
|
border: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%!important;
|
width: 100%!important;
|
||||||
@ -99,10 +99,11 @@
|
|||||||
.btn-flickr { .btn-social(#ff0084); }
|
.btn-flickr { .btn-social(#ff0084); }
|
||||||
.btn-foursquare { .btn-social(#f94877); }
|
.btn-foursquare { .btn-social(#f94877); }
|
||||||
.btn-github { .btn-social(#444444); }
|
.btn-github { .btn-social(#444444); }
|
||||||
.btn-google-plus { .btn-social(#dd4b39); }
|
.btn-google { .btn-social(#dd4b39); }
|
||||||
.btn-instagram { .btn-social(#3f729b); }
|
.btn-instagram { .btn-social(#3f729b); }
|
||||||
.btn-linkedin { .btn-social(#007bb6); }
|
.btn-linkedin { .btn-social(#007bb6); }
|
||||||
.btn-microsoft { .btn-social(#2672ec); }
|
.btn-microsoft { .btn-social(#2672ec); }
|
||||||
|
.btn-odnoklassniki { .btn-social(#f4731c); }
|
||||||
.btn-openid { .btn-social(#f7931e); }
|
.btn-openid { .btn-social(#f7931e); }
|
||||||
.btn-pinterest { .btn-social(#cb2027); }
|
.btn-pinterest { .btn-social(#cb2027); }
|
||||||
.btn-reddit { .btn-social(#eff7ff, #000); }
|
.btn-reddit { .btn-social(#eff7ff, #000); }
|
||||||
|
|||||||
@ -1,16 +1,16 @@
|
|||||||
/*
|
/*
|
||||||
* Social Buttons for Bootstrap
|
* Social Buttons for Bootstrap
|
||||||
*
|
*
|
||||||
* Copyright 2013-2014 Panayiotis Lipiridis
|
* Copyright 2013-2016 Panayiotis Lipiridis
|
||||||
* Licensed under the MIT License
|
* Licensed under the MIT License
|
||||||
*
|
*
|
||||||
* https://github.com/lipis/bootstrap-social
|
* https://github.com/lipis/bootstrap-social
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$bs-height-base: ($line-height-computed + $padding-base-vertical * 2);
|
$bs-height-base: ($line-height-computed + $padding-base-vertical * 2) !default;
|
||||||
$bs-height-lg: (floor($font-size-large * $line-height-base) + $padding-large-vertical * 2);
|
$bs-height-lg: (floor($font-size-large * $line-height-base) + $padding-large-vertical * 2) !default;
|
||||||
$bs-height-sm: (floor($font-size-small * 1.5) + $padding-small-vertical * 2);
|
$bs-height-sm: (floor($font-size-small * 1.5) + $padding-small-vertical * 2) !default;
|
||||||
$bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
$bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1) !default;
|
||||||
|
|
||||||
.btn-social {
|
.btn-social {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -32,7 +32,7 @@ $bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
|||||||
}
|
}
|
||||||
&.btn-lg {
|
&.btn-lg {
|
||||||
padding-left: ($bs-height-lg + $padding-large-horizontal);
|
padding-left: ($bs-height-lg + $padding-large-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: $bs-height-lg;
|
line-height: $bs-height-lg;
|
||||||
width: $bs-height-lg;
|
width: $bs-height-lg;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
@ -40,7 +40,7 @@ $bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
|||||||
}
|
}
|
||||||
&.btn-sm {
|
&.btn-sm {
|
||||||
padding-left: ($bs-height-sm + $padding-small-horizontal);
|
padding-left: ($bs-height-sm + $padding-small-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: $bs-height-sm;
|
line-height: $bs-height-sm;
|
||||||
width: $bs-height-sm;
|
width: $bs-height-sm;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
@ -48,7 +48,7 @@ $bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
|||||||
}
|
}
|
||||||
&.btn-xs {
|
&.btn-xs {
|
||||||
padding-left: ($bs-height-xs + $padding-small-horizontal);
|
padding-left: ($bs-height-xs + $padding-small-horizontal);
|
||||||
:first-child {
|
> :first-child {
|
||||||
line-height: $bs-height-xs;
|
line-height: $bs-height-xs;
|
||||||
width: $bs-height-xs;
|
width: $bs-height-xs;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
@ -61,7 +61,7 @@ $bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
|||||||
height: ($bs-height-base + 2);
|
height: ($bs-height-base + 2);
|
||||||
width: ($bs-height-base + 2);
|
width: ($bs-height-base + 2);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
:first-child {
|
> :first-child {
|
||||||
border: none;
|
border: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%!important;
|
width: 100%!important;
|
||||||
@ -99,10 +99,11 @@ $bs-height-xs: (floor($font-size-small * 1.2) + $padding-small-vertical + 1);
|
|||||||
.btn-flickr { @include btn-social(#ff0084); }
|
.btn-flickr { @include btn-social(#ff0084); }
|
||||||
.btn-foursquare { @include btn-social(#f94877); }
|
.btn-foursquare { @include btn-social(#f94877); }
|
||||||
.btn-github { @include btn-social(#444444); }
|
.btn-github { @include btn-social(#444444); }
|
||||||
.btn-google-plus { @include btn-social(#dd4b39); }
|
.btn-google { @include btn-social(#dd4b39); }
|
||||||
.btn-instagram { @include btn-social(#3f729b); }
|
.btn-instagram { @include btn-social(#3f729b); }
|
||||||
.btn-linkedin { @include btn-social(#007bb6); }
|
.btn-linkedin { @include btn-social(#007bb6); }
|
||||||
.btn-microsoft { @include btn-social(#2672ec); }
|
.btn-microsoft { @include btn-social(#2672ec); }
|
||||||
|
.btn-odnoklassniki { @include btn-social(#f4731c); }
|
||||||
.btn-openid { @include btn-social(#f7931e); }
|
.btn-openid { @include btn-social(#f7931e); }
|
||||||
.btn-pinterest { @include btn-social(#cb2027); }
|
.btn-pinterest { @include btn-social(#cb2027); }
|
||||||
.btn-reddit { @include btn-social(#eff7ff, #000); }
|
.btn-reddit { @include btn-social(#eff7ff, #000); }
|
||||||
|
|||||||
@ -1,314 +0,0 @@
|
|||||||
div.dataTables_length label {
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_length select {
|
|
||||||
width: 75px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_filter {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_filter label {
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_filter input {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_info {
|
|
||||||
padding-top: 8px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_paginate {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_paginate ul.pagination {
|
|
||||||
margin: 2px 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
div.dataTables_length,
|
|
||||||
div.dataTables_filter,
|
|
||||||
div.dataTables_info,
|
|
||||||
div.dataTables_paginate {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
table.dataTable td,
|
|
||||||
table.dataTable th {
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
table.dataTable {
|
|
||||||
clear: both;
|
|
||||||
margin-top: 6px !important;
|
|
||||||
margin-bottom: 6px !important;
|
|
||||||
max-width: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable thead .sorting,
|
|
||||||
table.dataTable thead .sorting_asc,
|
|
||||||
table.dataTable thead .sorting_desc,
|
|
||||||
table.dataTable thead .sorting_asc_disabled,
|
|
||||||
table.dataTable thead .sorting_desc_disabled {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
|
|
||||||
table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
|
|
||||||
table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
|
|
||||||
|
|
||||||
table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
|
|
||||||
table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
|
|
||||||
|
|
||||||
table.dataTable thead > tr > th {
|
|
||||||
padding-left: 18px;
|
|
||||||
padding-right: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable th:active {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrolling */
|
|
||||||
div.dataTables_scrollHead table {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_scrollHead table thead tr:last-child th:first-child,
|
|
||||||
div.dataTables_scrollHead table thead tr:last-child td:first-child {
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_scrollBody table {
|
|
||||||
border-top: none;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_scrollBody tbody tr:first-child th,
|
|
||||||
div.dataTables_scrollBody tbody tr:first-child td {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_scrollFoot table {
|
|
||||||
margin-top: 0 !important;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
|
|
||||||
width calculations when using scrolling impossible to align columns. We have
|
|
||||||
to use separate
|
|
||||||
*/
|
|
||||||
table.table-bordered.dataTable {
|
|
||||||
border-collapse: separate !important;
|
|
||||||
}
|
|
||||||
table.table-bordered thead th,
|
|
||||||
table.table-bordered thead td {
|
|
||||||
border-left-width: 0;
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
table.table-bordered tbody th,
|
|
||||||
table.table-bordered tbody td {
|
|
||||||
border-left-width: 0;
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
table.table-bordered th:last-child,
|
|
||||||
table.table-bordered td:last-child {
|
|
||||||
border-right-width: 0;
|
|
||||||
}
|
|
||||||
div.dataTables_scrollHead table.table-bordered {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* TableTools styles
|
|
||||||
*/
|
|
||||||
.table.dataTable tbody tr.active td,
|
|
||||||
.table.dataTable tbody tr.active th {
|
|
||||||
background-color: #08C;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table.dataTable tbody tr.active:hover td,
|
|
||||||
.table.dataTable tbody tr.active:hover th {
|
|
||||||
background-color: #0075b0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table.dataTable tbody tr.active th > a,
|
|
||||||
.table.dataTable tbody tr.active td > a {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-striped.dataTable tbody tr.active:nth-child(odd) td,
|
|
||||||
.table-striped.dataTable tbody tr.active:nth-child(odd) th {
|
|
||||||
background-color: #017ebc;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.DTTT_selectable tbody tr {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTTT .btn:hover {
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.DTTT_dropdown.dropdown-menu {
|
|
||||||
z-index: 2003;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.DTTT_dropdown.dropdown-menu a {
|
|
||||||
color: #333 !important; /* needed only when demo_page.css is included */
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.DTTT_dropdown.dropdown-menu li {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.DTTT_dropdown.dropdown-menu li:hover a {
|
|
||||||
background-color: #0088cc;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTTT_collection_background {
|
|
||||||
z-index: 2002;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TableTools information display */
|
|
||||||
div.DTTT_print_info {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 400px;
|
|
||||||
height: 150px;
|
|
||||||
margin-left: -200px;
|
|
||||||
margin-top: -75px;
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
padding: 10px 30px;
|
|
||||||
opacity: 0.95;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
|
||||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTTT_print_info h6 {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 28px;
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTTT_print_info p {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dataTables_processing {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: -50%;
|
|
||||||
margin-top: -25px;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.2em;
|
|
||||||
background-color: white;
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
|
|
||||||
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
|
|
||||||
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
|
|
||||||
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
|
|
||||||
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
|
|
||||||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* FixedColumns styles
|
|
||||||
*/
|
|
||||||
div.DTFC_LeftHeadWrapper table,
|
|
||||||
div.DTFC_LeftFootWrapper table,
|
|
||||||
div.DTFC_RightHeadWrapper table,
|
|
||||||
div.DTFC_RightFootWrapper table,
|
|
||||||
table.DTFC_Cloned tr.even {
|
|
||||||
background-color: white;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTFC_RightHeadWrapper table ,
|
|
||||||
div.DTFC_LeftHeadWrapper table {
|
|
||||||
border-bottom: none !important;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
border-top-right-radius: 0 !important;
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
|
|
||||||
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
|
|
||||||
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
|
|
||||||
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTFC_RightBodyWrapper table,
|
|
||||||
div.DTFC_LeftBodyWrapper table {
|
|
||||||
border-top: none;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTFC_RightBodyWrapper tbody tr:first-child th,
|
|
||||||
div.DTFC_RightBodyWrapper tbody tr:first-child td,
|
|
||||||
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
|
|
||||||
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.DTFC_RightFootWrapper table,
|
|
||||||
div.DTFC_LeftFootWrapper table {
|
|
||||||
border-top: none;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* FixedHeader styles
|
|
||||||
*/
|
|
||||||
div.FixedHeader_Cloned table {
|
|
||||||
margin: 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,186 +0,0 @@
|
|||||||
/*! DataTables Bootstrap 3 integration
|
|
||||||
* ©2011-2014 SpryMedia Ltd - datatables.net/license
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
|
|
||||||
* DataTables 1.10 or newer.
|
|
||||||
*
|
|
||||||
* This file sets the defaults and adds options to DataTables to style its
|
|
||||||
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
|
||||||
* for further information.
|
|
||||||
*/
|
|
||||||
(function(window, document, undefined){
|
|
||||||
|
|
||||||
var factory = function( $, DataTable ) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
|
|
||||||
/* Set the defaults for DataTables initialisation */
|
|
||||||
$.extend( true, DataTable.defaults, {
|
|
||||||
dom:
|
|
||||||
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
|
|
||||||
"<'row'<'col-sm-12'tr>>" +
|
|
||||||
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
|
|
||||||
renderer: 'bootstrap'
|
|
||||||
} );
|
|
||||||
|
|
||||||
|
|
||||||
/* Default class modification */
|
|
||||||
$.extend( DataTable.ext.classes, {
|
|
||||||
sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
|
|
||||||
sFilterInput: "form-control input-sm",
|
|
||||||
sLengthSelect: "form-control input-sm"
|
|
||||||
} );
|
|
||||||
|
|
||||||
|
|
||||||
/* Bootstrap paging button renderer */
|
|
||||||
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
|
|
||||||
var api = new DataTable.Api( settings );
|
|
||||||
var classes = settings.oClasses;
|
|
||||||
var lang = settings.oLanguage.oPaginate;
|
|
||||||
var btnDisplay, btnClass;
|
|
||||||
|
|
||||||
var attach = function( container, buttons ) {
|
|
||||||
var i, ien, node, button;
|
|
||||||
var clickHandler = function ( e ) {
|
|
||||||
e.preventDefault();
|
|
||||||
if ( !$(e.currentTarget).hasClass('disabled') ) {
|
|
||||||
api.page( e.data.action ).draw( false );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
|
||||||
button = buttons[i];
|
|
||||||
|
|
||||||
if ( $.isArray( button ) ) {
|
|
||||||
attach( container, button );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
btnDisplay = '';
|
|
||||||
btnClass = '';
|
|
||||||
|
|
||||||
switch ( button ) {
|
|
||||||
case 'ellipsis':
|
|
||||||
btnDisplay = '…';
|
|
||||||
btnClass = 'disabled';
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'first':
|
|
||||||
btnDisplay = lang.sFirst;
|
|
||||||
btnClass = button + (page > 0 ?
|
|
||||||
'' : ' disabled');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'previous':
|
|
||||||
btnDisplay = lang.sPrevious;
|
|
||||||
btnClass = button + (page > 0 ?
|
|
||||||
'' : ' disabled');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'next':
|
|
||||||
btnDisplay = lang.sNext;
|
|
||||||
btnClass = button + (page < pages-1 ?
|
|
||||||
'' : ' disabled');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'last':
|
|
||||||
btnDisplay = lang.sLast;
|
|
||||||
btnClass = button + (page < pages-1 ?
|
|
||||||
'' : ' disabled');
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
btnDisplay = button + 1;
|
|
||||||
btnClass = page === button ?
|
|
||||||
'active' : '';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( btnDisplay ) {
|
|
||||||
node = $('<li>', {
|
|
||||||
'class': classes.sPageButton+' '+btnClass,
|
|
||||||
'aria-controls': settings.sTableId,
|
|
||||||
'tabindex': settings.iTabIndex,
|
|
||||||
'id': idx === 0 && typeof button === 'string' ?
|
|
||||||
settings.sTableId +'_'+ button :
|
|
||||||
null
|
|
||||||
} )
|
|
||||||
.append( $('<a>', {
|
|
||||||
'href': '#'
|
|
||||||
} )
|
|
||||||
.html( btnDisplay )
|
|
||||||
)
|
|
||||||
.appendTo( container );
|
|
||||||
|
|
||||||
settings.oApi._fnBindAction(
|
|
||||||
node, {action: button}, clickHandler
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
attach(
|
|
||||||
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
|
||||||
buttons
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* TableTools Bootstrap compatibility
|
|
||||||
* Required TableTools 2.1+
|
|
||||||
*/
|
|
||||||
if ( DataTable.TableTools ) {
|
|
||||||
// Set the classes that TableTools uses to something suitable for Bootstrap
|
|
||||||
$.extend( true, DataTable.TableTools.classes, {
|
|
||||||
"container": "DTTT btn-group",
|
|
||||||
"buttons": {
|
|
||||||
"normal": "btn btn-default",
|
|
||||||
"disabled": "disabled"
|
|
||||||
},
|
|
||||||
"collection": {
|
|
||||||
"container": "DTTT_dropdown dropdown-menu",
|
|
||||||
"buttons": {
|
|
||||||
"normal": "",
|
|
||||||
"disabled": "disabled"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"print": {
|
|
||||||
"info": "DTTT_print_info"
|
|
||||||
},
|
|
||||||
"select": {
|
|
||||||
"row": "active"
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Have the collection use a bootstrap compatible drop down
|
|
||||||
$.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
|
|
||||||
"collection": {
|
|
||||||
"container": "ul",
|
|
||||||
"button": "li",
|
|
||||||
"liner": "a"
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
|
|
||||||
}; // /factory
|
|
||||||
|
|
||||||
|
|
||||||
// Define as an AMD module if possible
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
define( ['jquery', 'datatables'], factory );
|
|
||||||
}
|
|
||||||
else if ( typeof exports === 'object' ) {
|
|
||||||
// Node/CommonJS
|
|
||||||
factory( require('jquery'), require('datatables') );
|
|
||||||
}
|
|
||||||
else if ( jQuery ) {
|
|
||||||
// Otherwise simply initialise as normal, stopping multiple evaluation
|
|
||||||
factory( jQuery, jQuery.fn.dataTable );
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
})(window, document);
|
|
||||||
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
/*!
|
|
||||||
DataTables Bootstrap 3 integration
|
|
||||||
©2011-2014 SpryMedia Ltd - datatables.net/license
|
|
||||||
*/
|
|
||||||
(function(){var f=function(c,b){c.extend(!0,b.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-6'i><'col-sm-6'p>>",renderer:"bootstrap"});c.extend(b.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});b.ext.renderer.pageButton.bootstrap=function(g,f,p,k,h,l){var q=new b.Api(g),r=g.oClasses,i=g.oLanguage.oPaginate,d,e,o=function(b,f){var j,m,n,a,k=function(a){a.preventDefault();
|
|
||||||
c(a.currentTarget).hasClass("disabled")||q.page(a.data.action).draw(!1)};j=0;for(m=f.length;j<m;j++)if(a=f[j],c.isArray(a))o(b,a);else{e=d="";switch(a){case "ellipsis":d="…";e="disabled";break;case "first":d=i.sFirst;e=a+(0<h?"":" disabled");break;case "previous":d=i.sPrevious;e=a+(0<h?"":" disabled");break;case "next":d=i.sNext;e=a+(h<l-1?"":" disabled");break;case "last":d=i.sLast;e=a+(h<l-1?"":" disabled");break;default:d=a+1,e=h===a?"active":""}d&&(n=c("<li>",{"class":r.sPageButton+" "+
|
|
||||||
e,"aria-controls":g.sTableId,tabindex:g.iTabIndex,id:0===p&&"string"===typeof a?g.sTableId+"_"+a:null}).append(c("<a>",{href:"#"}).html(d)).appendTo(b),g.oApi._fnBindAction(n,{action:a},k))}};o(c(f).empty().html('<ul class="pagination"/>').children("ul"),k)};b.TableTools&&(c.extend(!0,b.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn btn-default",disabled:"disabled"},collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info"},
|
|
||||||
select:{row:"active"}}),c.extend(!0,b.TableTools.DEFAULTS.oTags,{collection:{container:"ul",button:"li",liner:"a"}}))};"function"===typeof define&&define.amd?define(["jquery","datatables"],f):"object"===typeof exports?f(require("jquery"),require("datatables")):jQuery&&f(jQuery,jQuery.fn.dataTable)})(window,document);
|
|
||||||
@ -1,442 +0,0 @@
|
|||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
||||||
|
|
||||||
<title>DataTables Bootstrap 3 example</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">
|
|
||||||
|
|
||||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
||||||
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
|
|
||||||
<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
|
|
||||||
<script type="text/javascript" charset="utf-8">
|
|
||||||
$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
|
||||||
} );
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Rendering engine</th>
|
|
||||||
<th>Browser</th>
|
|
||||||
<th>Platform(s)</th>
|
|
||||||
<th>Engine version</th>
|
|
||||||
<th>CSS grade</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="odd gradeX">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 4.0</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center"> 4</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="even gradeC">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 5.0</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center">5</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 5.5</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center">5.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="even gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 6</td>
|
|
||||||
<td>Win 98+</td>
|
|
||||||
<td class="center">6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="odd gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet Explorer 7</td>
|
|
||||||
<td>Win XP SP2+</td>
|
|
||||||
<td class="center">7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="even gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>AOL browser (AOL desktop)</td>
|
|
||||||
<td>Win XP</td>
|
|
||||||
<td class="center">6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 1.0</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 1.5</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 2.0</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 3.0</td>
|
|
||||||
<td>Win 2k+ / OSX.3+</td>
|
|
||||||
<td class="center">1.9</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Camino 1.0</td>
|
|
||||||
<td>OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Camino 1.5</td>
|
|
||||||
<td>OSX.3+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape 7.2</td>
|
|
||||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape Browser 8</td>
|
|
||||||
<td>Win 98SE+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape Navigator 9</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.0</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.1</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.2</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.2</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.3</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.4</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.4</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.5</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.6</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.7</td>
|
|
||||||
<td>Win 98+ / OSX.1+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.8</td>
|
|
||||||
<td>Win 98+ / OSX.1+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Seamonkey 1.1</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Epiphany 2.20</td>
|
|
||||||
<td>Gnome</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 1.2</td>
|
|
||||||
<td>OSX.3</td>
|
|
||||||
<td class="center">125.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 1.3</td>
|
|
||||||
<td>OSX.3</td>
|
|
||||||
<td class="center">312.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 2.0</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">419.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 3.0</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">522.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>OmniWeb 5.5</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">420</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>iPod Touch / iPhone</td>
|
|
||||||
<td>iPod</td>
|
|
||||||
<td class="center">420.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>S60</td>
|
|
||||||
<td>S60</td>
|
|
||||||
<td class="center">413</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 7.0</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 7.5</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 8.0</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 8.5</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.0</td>
|
|
||||||
<td>Win 95+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.2</td>
|
|
||||||
<td>Win 88+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.5</td>
|
|
||||||
<td>Win 88+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera for Wii</td>
|
|
||||||
<td>Wii</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Nokia N800</td>
|
|
||||||
<td>N800</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Nintendo DS browser</td>
|
|
||||||
<td>Nintendo DS</td>
|
|
||||||
<td class="center">8.5</td>
|
|
||||||
<td class="center">C/A<sup>1</sup></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.1</td>
|
|
||||||
<td>KDE 3.1</td>
|
|
||||||
<td class="center">3.1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.3</td>
|
|
||||||
<td>KDE 3.3</td>
|
|
||||||
<td class="center">3.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.5</td>
|
|
||||||
<td>KDE 3.5</td>
|
|
||||||
<td class="center">3.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 4.5</td>
|
|
||||||
<td>Mac OS 8-9</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 5.1</td>
|
|
||||||
<td>Mac OS 7.6-9</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 5.2</td>
|
|
||||||
<td>Mac OS 8-X</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>NetFront 3.1</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>NetFront 3.4</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Dillo 0.8</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Links</td>
|
|
||||||
<td>Text only</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Lynx</td>
|
|
||||||
<td>Text only</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>IE Mobile</td>
|
|
||||||
<td>Windows Mobile 6</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>PSP browser</td>
|
|
||||||
<td>PSP</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeU">
|
|
||||||
<td>Other browsers</td>
|
|
||||||
<td>All others</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">U</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,149 +0,0 @@
|
|||||||
|
|
||||||
//
|
|
||||||
// Mixins
|
|
||||||
//
|
|
||||||
@mixin control() {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
color: white;
|
|
||||||
border: 2px solid white;
|
|
||||||
border-radius: 16px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 14px;
|
|
||||||
box-shadow: 0 0 3px #444;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin control-open() {
|
|
||||||
content: '+';
|
|
||||||
background-color: #31b131;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin control-close() {
|
|
||||||
content: '-';
|
|
||||||
background-color: #d33333;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Table styles
|
|
||||||
//
|
|
||||||
table.dataTable {
|
|
||||||
// Styling for the `inline` type
|
|
||||||
&.dtr-inline.collapsed > tbody {
|
|
||||||
> tr > td:first-child,
|
|
||||||
> tr > th:first-child {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 8px;
|
|
||||||
left: 4px;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
@include control;
|
|
||||||
@include control-open;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dataTables_empty:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> tr.parent {
|
|
||||||
> td:first-child:before,
|
|
||||||
> th:first-child:before {
|
|
||||||
@include control-close;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> tr.child td:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// DataTables' `compact` styling
|
|
||||||
&.dtr-inline.collapsed.compact > tbody {
|
|
||||||
> tr > td:first-child,
|
|
||||||
> tr > th:first-child {
|
|
||||||
padding-left: 27px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 5px;
|
|
||||||
left: 4px;
|
|
||||||
height: 14px;
|
|
||||||
width: 14px;
|
|
||||||
border-radius: 14px;
|
|
||||||
line-height: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Styling for the `column` type
|
|
||||||
&.dtr-column > tbody {
|
|
||||||
> tr > td.control,
|
|
||||||
> tr > th.control {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-top: -10px;
|
|
||||||
margin-left: -10px;
|
|
||||||
@include control;
|
|
||||||
@include control-open;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> tr.parent {
|
|
||||||
td.control:before,
|
|
||||||
th.control:before {
|
|
||||||
@include control-close;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Child row styling
|
|
||||||
> tbody > tr.child {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
border-bottom: 1px solid #efefef;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.dtr-title {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 75px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.dtr-data {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
59
helpdesk/static/helpdesk/vendor/datatables/Readme.md
vendored
Normal file
59
helpdesk/static/helpdesk/vendor/datatables/Readme.md
vendored
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
# DataTables plug-in for jQuery
|
||||||
|
|
||||||
|
DataTables is a table enhancing plug-in for the [jQuery](//jquery.com) Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal effort. The stated goal of DataTables is:
|
||||||
|
|
||||||
|
> To enhance the accessibility of data in HTML tables.
|
||||||
|
|
||||||
|
To meet this goal, DataTables is developed with two distinct groups of users in mind:
|
||||||
|
|
||||||
|
* You the developers using DataTables. For developers DataTables provides a wide array of options for how data should be obtained, displayed and acted upon, along with an extensive API for accessing and manipulating the table.
|
||||||
|
|
||||||
|
* End users. For those using the interface DataTables presents, actions to get the most from the information contained in tables, such as sorting and filtering, along with paging and scrolling of the data in table, are easy to use, intuitive and fast.
|
||||||
|
|
||||||
|
|
||||||
|
## Installing DataTables
|
||||||
|
|
||||||
|
To use DataTables, the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](//datatables.net/manual/installation) for full details.
|
||||||
|
|
||||||
|
### NPM and Bower
|
||||||
|
|
||||||
|
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||||
|
|
||||||
|
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||||
|
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
In its simplest case, DataTables can be initialised with a single line of Javascript:
|
||||||
|
|
||||||
|
```js
|
||||||
|
$('table').dataTable();
|
||||||
|
```
|
||||||
|
|
||||||
|
where the jQuery selector is used to obtain a reference to the table you want to enhance with DataTables. Optional configuration parameters can be passed in to DataTables to have it perform certain actions by using a configuration object as the parameter passed in to the DataTables constructor. For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
$('table').dataTable( {
|
||||||
|
paginate: false,
|
||||||
|
scrollY: 300
|
||||||
|
} );
|
||||||
|
```
|
||||||
|
|
||||||
|
will disable paging and enable scrolling.
|
||||||
|
|
||||||
|
A full list of the options available for DataTables are available in the [documentation](//datatables.net).
|
||||||
|
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
Full documentation of the DataTables options, API and plug-in interface are available on the [DataTables web-site](//datatables.net). The site also contains information on the wide variety of plug-ins that are available for DataTables, which can be used to enhance and customise your table even further.
|
||||||
|
|
||||||
|
|
||||||
|
## Support
|
||||||
|
|
||||||
|
Support for DataTables is available through the [DataTables forums](//datatables.net/forums) and [commercial support options](//datatables.net/support) are available.
|
||||||
|
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
DataTables is release under the [MIT license](//datatables.net/license). You are free to use, modify and distribute this software, as long as the copyright header is left intact (specifically the comment block which starts with `/*!`.
|
||||||
@ -8,7 +8,6 @@ table.dataTable {
|
|||||||
table.dataTable td,
|
table.dataTable td,
|
||||||
table.dataTable th {
|
table.dataTable th {
|
||||||
-webkit-box-sizing: content-box;
|
-webkit-box-sizing: content-box;
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
table.dataTable td.dataTables_empty,
|
table.dataTable td.dataTables_empty,
|
||||||
@ -118,22 +117,22 @@ div.dataTables_scrollHead table.dataTable {
|
|||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.dataTables_scrollBody table {
|
div.dataTables_scrollBody > table {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
div.dataTables_scrollBody table thead .sorting:after,
|
div.dataTables_scrollBody > table > thead .sorting:after,
|
||||||
div.dataTables_scrollBody table thead .sorting_asc:after,
|
div.dataTables_scrollBody > table > thead .sorting_asc:after,
|
||||||
div.dataTables_scrollBody table thead .sorting_desc:after {
|
div.dataTables_scrollBody > table > thead .sorting_desc:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
div.dataTables_scrollBody > table > tbody > tr:first-child > th,
|
||||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
div.dataTables_scrollBody > table > tbody > tr:first-child > td {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.dataTables_scrollFoot table {
|
div.dataTables_scrollFoot > table {
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
|
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody>tr:first-child>th,div.dataTables_scrollBody>table>tbody>tr:first-child>td{border-top:none}div.dataTables_scrollFoot>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
|
||||||
|
|||||||
@ -53,6 +53,7 @@ div.dataTables_wrapper div.dataTables_paginate {
|
|||||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||||
margin: 2px 0;
|
margin: 2px 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
div.dataTables_wrapper div.dataTables_processing {
|
div.dataTables_wrapper div.dataTables_processing {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
|
table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
|
||||||
|
|||||||
@ -69,7 +69,9 @@ table.dataTable thead > tr > td:active {
|
|||||||
}
|
}
|
||||||
table.dataTable thead .sorting,
|
table.dataTable thead .sorting,
|
||||||
table.dataTable thead .sorting_asc,
|
table.dataTable thead .sorting_asc,
|
||||||
table.dataTable thead .sorting_desc {
|
table.dataTable thead .sorting_desc,
|
||||||
|
table.dataTable thead .sorting_asc_disabled,
|
||||||
|
table.dataTable thead .sorting_desc_disabled {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
table.dataTable thead .sorting,
|
table.dataTable thead .sorting,
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
table.dataTable{clear:both;margin:0.5em 0 !important;max-width:none !important;width:100%}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper{position:relative}div.dataTables_wrapper div.dataTables_length label{float:left;text-align:left;margin-bottom:0}div.dataTables_wrapper div.dataTables_length select{width:75px;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter label{float:right;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter input{display:inline-block !important;width:auto !important;margin-bottom:0;margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:2px}div.dataTables_wrapper div.dataTables_paginate{float:right;margin:0}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1rem 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:1.5rem}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}div.dataTables_scrollHead table{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}
|
table.dataTable{clear:both;margin:0.5em 0 !important;max-width:none !important;width:100%}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper{position:relative}div.dataTables_wrapper div.dataTables_length label{float:left;text-align:left;margin-bottom:0}div.dataTables_wrapper div.dataTables_length select{width:75px;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter label{float:right;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter input{display:inline-block !important;width:auto !important;margin-bottom:0;margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:2px}div.dataTables_wrapper div.dataTables_paginate{float:right;margin:0}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1rem 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:1.5rem}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}div.dataTables_scrollHead table{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}
|
||||||
|
|||||||
@ -374,11 +374,12 @@ table.dataTable td {
|
|||||||
*margin-top: -1px;
|
*margin-top: -1px;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td {
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
|
||||||
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
@ -387,8 +388,8 @@ table.dataTable td {
|
|||||||
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
||||||
border-bottom: 1px solid #111;
|
border-bottom: 1px solid #111;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
|
.dataTables_wrapper.no-footer div.dataTables_scrollHead > table,
|
||||||
.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
|
.dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper:after {
|
.dataTables_wrapper:after {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -41,7 +41,6 @@ table.dataTable.table thead td.sorting_desc:after {
|
|||||||
table.dataTable.table td,
|
table.dataTable.table td,
|
||||||
table.dataTable.table th {
|
table.dataTable.table th {
|
||||||
-webkit-box-sizing: content-box;
|
-webkit-box-sizing: content-box;
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
table.dataTable.table td.dataTables_empty,
|
table.dataTable.table td.dataTables_empty,
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
table.dataTable.table{margin:0}table.dataTable.table thead th,table.dataTable.table thead td{position:relative}table.dataTable.table thead th.sorting,table.dataTable.table thead th.sorting_asc,table.dataTable.table thead th.sorting_desc,table.dataTable.table thead td.sorting,table.dataTable.table thead td.sorting_asc,table.dataTable.table thead td.sorting_desc{padding-right:20px}table.dataTable.table thead th.sorting:after,table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting:after,table.dataTable.table thead td.sorting_asc:after,table.dataTable.table thead td.sorting_desc:after{position:absolute;top:12px;right:8px;display:block;font-family:Icons}table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em}table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{content:"\f0de"}table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{content:"\f0dd"}table.dataTable.table td,table.dataTable.table th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.table td.dataTables_empty,table.dataTable.table th.dataTables_empty{text-align:center}table.dataTable.table.nowrap th,table.dataTable.table.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{vertical-align:middle;min-height:2.7142em}div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown{min-width:0}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:13px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.row.dt-table{padding:0}div.dataTables_wrapper div.dataTables_scrollHead table.dataTable{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:none}div.dataTables_wrapper div.dataTables_scrollBody thead .sorting:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_asc:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_desc:after{display:none}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable{border-radius:0;border-top:none;border-bottom-width:0}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable.no-footer{border-bottom-width:1px}div.dataTables_wrapper div.dataTables_scrollFoot table.dataTable{border-top-right-radius:0;border-top-left-radius:0;border-top:none}
|
table.dataTable.table{margin:0}table.dataTable.table thead th,table.dataTable.table thead td{position:relative}table.dataTable.table thead th.sorting,table.dataTable.table thead th.sorting_asc,table.dataTable.table thead th.sorting_desc,table.dataTable.table thead td.sorting,table.dataTable.table thead td.sorting_asc,table.dataTable.table thead td.sorting_desc{padding-right:20px}table.dataTable.table thead th.sorting:after,table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting:after,table.dataTable.table thead td.sorting_asc:after,table.dataTable.table thead td.sorting_desc:after{position:absolute;top:12px;right:8px;display:block;font-family:Icons}table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em}table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{content:"\f0de"}table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{content:"\f0dd"}table.dataTable.table td,table.dataTable.table th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable.table td.dataTables_empty,table.dataTable.table th.dataTables_empty{text-align:center}table.dataTable.table.nowrap th,table.dataTable.table.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{vertical-align:middle;min-height:2.7142em}div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown{min-width:0}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:13px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.row.dt-table{padding:0}div.dataTables_wrapper div.dataTables_scrollHead table.dataTable{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:none}div.dataTables_wrapper div.dataTables_scrollBody thead .sorting:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_asc:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_desc:after{display:none}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable{border-radius:0;border-top:none;border-bottom-width:0}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable.no-footer{border-bottom-width:1px}div.dataTables_wrapper div.dataTables_scrollFoot table.dataTable{border-top-right-radius:0;border-top-left-radius:0;border-top:none}
|
||||||
|
|||||||
@ -34,7 +34,9 @@ table.dataTable tfoot td {
|
|||||||
}
|
}
|
||||||
table.dataTable thead .sorting,
|
table.dataTable thead .sorting,
|
||||||
table.dataTable thead .sorting_asc,
|
table.dataTable thead .sorting_asc,
|
||||||
table.dataTable thead .sorting_desc {
|
table.dataTable thead .sorting_desc,
|
||||||
|
table.dataTable thead .sorting_asc_disabled,
|
||||||
|
table.dataTable thead .sorting_desc_disabled {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
*cursor: hand;
|
*cursor: hand;
|
||||||
}
|
}
|
||||||
@ -405,11 +407,12 @@ table.dataTable td {
|
|||||||
*margin-top: -1px;
|
*margin-top: -1px;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td {
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
|
||||||
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
|
||||||
|
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
@ -418,8 +421,8 @@ table.dataTable td {
|
|||||||
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
.dataTables_wrapper.no-footer .dataTables_scrollBody {
|
||||||
border-bottom: 1px solid #111;
|
border-bottom: 1px solid #111;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
|
.dataTables_wrapper.no-footer div.dataTables_scrollHead > table,
|
||||||
.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
|
.dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.dataTables_wrapper:after {
|
.dataTables_wrapper:after {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
22
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/License.txt
vendored
Normal file
22
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/License.txt
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
MIT license
|
||||||
|
|
||||||
|
Copyright (c) 2008-2015 SpryMedia Limited
|
||||||
|
http://datatables.net
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
39
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/Readme.md
vendored
Normal file
39
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/Readme.md
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# AutoFill
|
||||||
|
|
||||||
|
AutoFill adds an Excel data fill like option to a DataTable to click and drag over multiple cells, filling in information over the selected cells and incrementing numbers as needed.
|
||||||
|
|
||||||
|
|
||||||
|
# Installation
|
||||||
|
|
||||||
|
To use AutoFill the best way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/autofill/) for full details.
|
||||||
|
|
||||||
|
## NPM and Bower
|
||||||
|
|
||||||
|
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-autofill`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||||
|
|
||||||
|
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||||
|
|
||||||
|
|
||||||
|
# Basic usage
|
||||||
|
|
||||||
|
AutoFill is initialised using the `autoFill` option in the DataTables constructor. Further options can be specified using this option as an object - see the documentation for details. For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
$(document).ready( function () {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# Documentation / support
|
||||||
|
|
||||||
|
* [Documentation](https://datatables.net/extensions/autofill/)
|
||||||
|
* [DataTables support forums](http://datatables.net/forums)
|
||||||
|
|
||||||
|
|
||||||
|
# GitHub
|
||||||
|
|
||||||
|
If you fancy getting involved with the development of AutoFill and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/AutoFill)
|
||||||
|
|
||||||
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.bootstrap.css
vendored
Normal file
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.bootstrap.css
vendored
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #337ab7;
|
||||||
|
background: #337ab7;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #337ab7;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #337ab7;background:#337ab7}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#337ab7;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}
|
||||||
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.bootstrap4.css
vendored
Normal file
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.bootstrap4.css
vendored
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #0275d8;
|
||||||
|
background: #0275d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #0275d8;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #0275d8;background:#0275d8}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#0275d8;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}
|
||||||
92
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.dataTables.css
vendored
Normal file
92
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.dataTables.css
vendored
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #316ad1;
|
||||||
|
background: linear-gradient(to bottom, #abcffb 0%, #4989de 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #4989de;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button button {
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
padding: 6px 12px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #2e6da4;
|
||||||
|
background-color: #337ab7;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #316ad1;background:linear-gradient(to bottom, #abcffb 0%, #4989de 100%)}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#4989de;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-button button{color:white;margin:0;padding:6px 12px;text-align:center;border:1px solid #2e6da4;background-color:#337ab7;border-radius:4px;cursor:pointer;vertical-align:middle}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}
|
||||||
85
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.foundation.css
vendored
Normal file
85
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.foundation.css
vendored
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #008CBA;
|
||||||
|
background: #008CBA;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #008CBA;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #008CBA;background:#008CBA}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#008CBA;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}div.dt-autofill-list button{margin:0}
|
||||||
85
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.jqueryui.css
vendored
Normal file
85
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.jqueryui.css
vendored
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #316ad1;
|
||||||
|
background: linear-gradient(to bottom, #abcffb 0%, #4989de 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #4989de;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list button {
|
||||||
|
padding: 0.35em 1em;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.jqueryui.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.jqueryui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #316ad1;background:linear-gradient(to bottom, #abcffb 0%, #4989de 100%)}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#4989de;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}div.dt-autofill-list button{padding:0.35em 1em}
|
||||||
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.semanticui.css
vendored
Normal file
81
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/css/autoFill.semanticui.css
vendored
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
div.dt-autofill-handle {
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
z-index: 102;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #888;
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-select {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: #888;
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.top, div.dt-autofill-select.bottom {
|
||||||
|
height: 3px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
div.dt-autofill-select.left, div.dt-autofill-select.right {
|
||||||
|
width: 3px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-list {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 500px;
|
||||||
|
margin-left: -250px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 5px #555;
|
||||||
|
border: 2px solid #444;
|
||||||
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul {
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:last-child div.dt-autofill-question, div.dt-autofill-list ul li:last-child div.dt-autofill-button {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list ul li:hover {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-question input[type=number] {
|
||||||
|
padding: 6px;
|
||||||
|
width: 30px;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
div.dt-autofill-list div.dt-autofill-button {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-autofill-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.dt-autofill-handle{position:absolute;height:8px;width:8px;z-index:102;box-sizing:border-box;border:1px solid #888;background:#888}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#888;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.5) 5px, rgba(255,255,255,0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:6px;box-shadow:0 0 5px #555;border:2px solid #444;z-index:11;box-sizing:border-box;padding:1.5em 2em}div.dt-autofill-list ul{display:table;margin:0;padding:0;list-style:none;width:100%}div.dt-autofill-list ul li{display:table-row}div.dt-autofill-list ul li:last-child div.dt-autofill-question,div.dt-autofill-list ul li:last-child div.dt-autofill-button{border-bottom:none}div.dt-autofill-list ul li:hover{background-color:#f6f6f6}div.dt-autofill-list div.dt-autofill-question{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:30px;margin:-2px 0}div.dt-autofill-list div.dt-autofill-button{display:table-cell;padding:0.5em 0;border-bottom:1px solid #ccc}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:10}
|
||||||
100
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/index.html
vendored
Normal file
100
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/index.html
vendored
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<!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="//code.jquery.com/jquery-1.12.4.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>AutoFill examples - Examples</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Examples</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Spreadsheets such as Excel and Google Docs have a very handy rapid data duplication auto fill UI method. The AutoFill library for DataTables provides a similar
|
||||||
|
interface for DataTables (even extending upon it to provide complex data interaction options). AutoFill also provides full support for <a href=
|
||||||
|
"https://editor.datatables.net">Editor</a> allowing end users to update data very quickly.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<section>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="gradient"></div>
|
||||||
|
<div class="liner">
|
||||||
|
<div class="toc">
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<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,667 @@
|
|||||||
|
<!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>AutoFill example - Always confirm action</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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( {
|
||||||
|
autoFill: {
|
||||||
|
alwaysAsk: true
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Always confirm action</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>When an auto fill is completed by the end user, AutoFill will determine how many data fill plug-ins can be used for the data that has been dragged over. If
|
||||||
|
there are multiple options it will display a list of those options to the end user allowing them to select the action to perform - a cancel button is also
|
||||||
|
shown.</p>
|
||||||
|
<p>By default, if there is only a single data fill plug-in that can operate on the data, it will be immediately acted upon, no confirmation required by the end
|
||||||
|
user and no option to cancel the action.</p>
|
||||||
|
<p>The <a href="//datatables.net/reference/option/autoFill.alwaysAsk"><code class="option" title="AutoFill initialisation option">autoFill.alwaysAsk</code></a>
|
||||||
|
option can be used to force AutoFill to confirm the action to take, even if there is only one option. This provides the end user with the ability to cancel the
|
||||||
|
action if they made a mistake during the drag. This example shows <a href="//datatables.net/reference/option/autoFill.alwaysAsk"><code class="option" title=
|
||||||
|
"AutoFill initialisation option">autoFill.alwaysAsk</code></a> set to <code>true</code> - to demonstrate, try auto filling a single row or column.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: {
|
||||||
|
alwaysAsk: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
699
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/columns.html
vendored
Normal file
699
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/columns.html
vendored
Normal file
@ -0,0 +1,699 @@
|
|||||||
|
<!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>AutoFill example - Column selector</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../Select/css/select.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../Select/js/dataTables.select.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( {
|
||||||
|
columnDefs: [ {
|
||||||
|
orderable: false,
|
||||||
|
className: 'select-checkbox',
|
||||||
|
targets: 0
|
||||||
|
} ],
|
||||||
|
select: {
|
||||||
|
style: 'os',
|
||||||
|
selector: 'td:first-child'
|
||||||
|
},
|
||||||
|
order: [[ 1, 'asc' ]],
|
||||||
|
autoFill: {
|
||||||
|
columns: ':not(:first-child)'
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Column selector</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill provides the ability to determine what columns it should be enabled upon through the <a href=
|
||||||
|
"//datatables.net/reference/option/autoFill.columns"><code class="option" title="AutoFill initialisation option">autoFill.columns</code></a> option. This will
|
||||||
|
accept any value allowed by the <a href="//datatables.net/reference/type/column-selector"><code class="type" title=
|
||||||
|
"DataTables parameter type">column-selector</code></a> data type, such as an array of column indexes, class names, or as shown in this case a jQuery selector.</p>
|
||||||
|
<p>This ability to exclude columns from the AutoFill action can be particularly useful if the table contains non-data columns. This example uses the <a href=
|
||||||
|
"https://datatables.net/extensions/select">Select extension for DataTables</a> to allow row selection through the <a href=
|
||||||
|
"//datatables.net/reference/option/select"><code class="option" title="Scroller initialisation option">select</code></a> option, with row selection restricted to
|
||||||
|
the first column. Thus we do not wish to have AutoFill on that column and the selector <code class="string" title="String">:not(:first-child)</code> for <a href=
|
||||||
|
"//datatables.net/reference/option/autoFill.columns"><code class="option" title="AutoFill initialisation option">autoFill.columns</code></a> enacts that.</p>
|
||||||
|
<p>Combining AutoFill with <a href="https://editor.datatables.net">Editor</a> (and other extensions such as <a href=
|
||||||
|
"https://datatables.net/extensions/rowreorder">RowReorder</a> and <a href="https://datatables.net/extensions/keytable">KeyTable</a>) can make for a powerful data
|
||||||
|
editing environment for end users.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Tiger Nixon</td>
|
||||||
|
<td>System Architect</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
columnDefs: [ {
|
||||||
|
orderable: false,
|
||||||
|
className: 'select-checkbox',
|
||||||
|
targets: 0
|
||||||
|
} ],
|
||||||
|
select: {
|
||||||
|
style: 'os',
|
||||||
|
selector: 'td:first-child'
|
||||||
|
},
|
||||||
|
order: [[ 1, 'asc' ]],
|
||||||
|
autoFill: {
|
||||||
|
columns: ':not(:first-child)'
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Select/js/dataTables.select.js">../../../Select/js/dataTables.select.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Select/css/select.dataTables.css">../../../Select/css/select.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<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,708 @@
|
|||||||
|
<!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>AutoFill example - Enable / disable API</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../Buttons/css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../Buttons/js/dataTables.buttons.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( {
|
||||||
|
autoFill: {
|
||||||
|
enable: false
|
||||||
|
},
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: "Enable AutoFill",
|
||||||
|
action: function (e, dt) {
|
||||||
|
if ( dt.autoFill().enabled() ) {
|
||||||
|
this.autoFill().disable();
|
||||||
|
this.text( 'Enable AutoFill' );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.autoFill().enable();
|
||||||
|
this.text( 'Disable AutoFill' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Enable / disable API</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill has the option of being enabled and disabled, either allowing or disallowing user interaction with the autofill interactions as the state of your
|
||||||
|
application requires. The default state can be set using the <a href="//datatables.net/reference/option/autoFill.enable"><code class="option" title=
|
||||||
|
"DataTables initialisation option">autoFill.enable</code></a> option (which is enabled by default when the <a href=
|
||||||
|
"//datatables.net/reference/option/autoFill"><code class="option" title="DataTables initialisation option">autoFill</code></a> parameter is specified), and can
|
||||||
|
later be modified using <a href="//datatables.net/reference/api/autoFill().enable()"><code class="api" title="DataTables API method">autoFill().enable()</code></a>
|
||||||
|
and <a href="//datatables.net/reference/api/autoFill().disable()"><code class="api" title="DataTables API method">autoFill().disable()</code></a>.</p>
|
||||||
|
<p>This example shows AutoFill disabled when the page is loaded and a <a href="//datatables.net/extensions/buttons">custom Button</a> that will let you toggle the
|
||||||
|
enabled state of AutoFill. Clicking the button the first time will enable AutoFill, and also change the text of the button, allowing the state to be continually
|
||||||
|
toggled.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: {
|
||||||
|
enable: false
|
||||||
|
},
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: "Enable AutoFill",
|
||||||
|
action: function (e, dt) {
|
||||||
|
if ( dt.autoFill().enabled() ) {
|
||||||
|
this.autoFill().disable();
|
||||||
|
this.text( 'Enable AutoFill' );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.autoFill().enable();
|
||||||
|
this.text( 'Disable AutoFill' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Buttons/js/dataTables.buttons.js">../../../Buttons/js/dataTables.buttons.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Buttons/css/buttons.dataTables.css">../../../Buttons/css/buttons.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
676
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/events.html
vendored
Normal file
676
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/events.html
vendored
Normal file
@ -0,0 +1,676 @@
|
|||||||
|
<!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>AutoFill example - Events</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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 table = $('#example').DataTable( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.on( 'autoFill', function () {
|
||||||
|
table.columns.adjust();
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Events</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill will emit events that can be listened for to take action when the user has completed an fill action. The events emitted by AutoFill are:</p>
|
||||||
|
<ul class="markdown">
|
||||||
|
<li>
|
||||||
|
<a href="//datatables.net/reference/event/preAutoFill"><code class="event" title="AutoFill event">preAutoFill</code></a> - Emitted prior to the data
|
||||||
|
update, but after the drag has been completed
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="//datatables.net/reference/event/autoFill"><code class="event" title="AutoFill event">autoFill</code></a> - Emitted immediately after the table
|
||||||
|
has been updated with the new data.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>This example shows the <a href="//datatables.net/reference/event/autoFill"><code class="event" title="AutoFill event">autoFill</code></a> event being listened
|
||||||
|
for to adjust the table's column sizes to suit the new data. Although this is a trivial example, this listener can be used to perform other updates such as writing
|
||||||
|
the filled data to a database.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
var table = $('#example').DataTable( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.on( 'autoFill', function () {
|
||||||
|
table.columns.adjust();
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
667
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/fills.html
vendored
Normal file
667
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/fills.html
vendored
Normal file
@ -0,0 +1,667 @@
|
|||||||
|
<!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>AutoFill example - Fill types</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Fill types</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Spreadsheets will typically only copy a value from one cell to another (although this is made particularly powerful if a formula is used), but AutoFill provides
|
||||||
|
different options for how the data can be filled - presenting the options available to the end user for them to select from.</p>
|
||||||
|
<p>AutoFill has four built in fill types:</p>
|
||||||
|
<ul class="markdown">
|
||||||
|
<li>Increment: For numeric data AutoFill will give the user the option of incrementing the value as it is filled. The amount it is incremented by can be
|
||||||
|
entered by the user, and also provides the option to use a negative value to perform a decrement. As an example, fill over the <em>Age</em> column below.</li>
|
||||||
|
<li>Fill: The data from the original cell is used for all other cells</li>
|
||||||
|
<li>Fill vertical: The data from the first row in the selected cells is copied <strong>vertically</strong>. As an example, fill over multiple rows and columns
|
||||||
|
below and select the <em>Fill cells vertically</em> option.</li>
|
||||||
|
<li>Fill horizontal: The data from the first column in the selected cells is copied <strong>horizontally</strong>. As an example, fill over multiple rows and
|
||||||
|
columns below and select the <em>Fill cells horizontally</em> option.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Additional fills can also be added <a href="plugins.html">using plug-ins</a> if you require further options.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/focus.html
vendored
Normal file
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/focus.html
vendored
Normal file
@ -0,0 +1,672 @@
|
|||||||
|
<!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>AutoFill example - Click focus</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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( {
|
||||||
|
autoFill: {
|
||||||
|
focus: 'click'
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Click focus</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <em>click-to-drag</em> auto fill handle can be attached to the table using a number of different triggers. This is set by the <a href=
|
||||||
|
"//datatables.net/reference/option/autoFill.focus"><code class="option" title="AutoFill initialisation option">autoFill.focus</code></a> option:</p>
|
||||||
|
<ul class="markdown">
|
||||||
|
<li><code class="string" title="String">click</code> - Display when a cell is clicked upon</li>
|
||||||
|
<li>
|
||||||
|
<code class="string" title="String">focus</code> - Display when a cell gains focus - for integration with <a href=
|
||||||
|
"https://datatables.net/extensions/keytable">KeyTable</a>
|
||||||
|
</li>
|
||||||
|
<li><code class="string" title="String">hover</code> - Display when a cell is hovered over</li>
|
||||||
|
</ul>
|
||||||
|
<p>The default behaviour is <code class="string" title="String">hover</code>, unless KeyTable is also initialised on the same table, in which case <code class=
|
||||||
|
"string" title="String">focus</code> is used.</p>
|
||||||
|
<p>This example shows the <code class="string" title="String">click</code> behaviour. Click a cell to show the auto fill handle. Note that a click outside of the
|
||||||
|
table will cause the handle to be removed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: {
|
||||||
|
focus: 'click'
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<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,81 @@
|
|||||||
|
<!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="//code.jquery.com/jquery-1.12.4.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>AutoFill examples - Initialisation examples</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Initialisation examples</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Spreadsheets such as Excel and Google Docs have a very handy data duplication option of an auto fill tool. The AutoFill library for DataTables provides a
|
||||||
|
similar interface for DataTables (even extending upon it to provide complex data interaction options). AutoFill also provides full support for <a href=
|
||||||
|
"https://editor.datatables.net">Editor</a> allowing end users to update data very quickly.</p>
|
||||||
|
<p>The examples in this section show how AutoFill can be used with DataTables.</p>
|
||||||
|
</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">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable 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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/keyTable.html
vendored
Normal file
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/keyTable.html
vendored
Normal file
@ -0,0 +1,672 @@
|
|||||||
|
<!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>AutoFill example - KeyTable integration</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../KeyTable/css/keyTable.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../KeyTable/js/dataTables.keyTable.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( {
|
||||||
|
keys: true,
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>KeyTable integration</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>If you are looking to emulate the UI of spreadsheet programs such as Excel with DataTables, the combination of <a href=
|
||||||
|
"https://datatables.net/extensions/keytable">KeyTable</a> and AutoFill will take you a long way there!</p>
|
||||||
|
<p>AutoFill will automatically detect when KeyTable is used on the same table and alter its focus option (<a href=
|
||||||
|
"//datatables.net/reference/option/autoFill.focus"><code class="option" title="AutoFill initialisation option">autoFill.focus</code></a>) so the focused cell will
|
||||||
|
show the auto fill handle. Thus all that needs to be done is to initialise both AutoFill and KeyTable with <a href=
|
||||||
|
"//datatables.net/reference/option/autoFill"><code class="option" title="AutoFill initialisation option">autoFill</code></a> and <a href=
|
||||||
|
"//datatables.net/reference/option/keys"><code class="option" title="KeyTable initialisation option">keys</code></a> respectively).</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
keys: true,
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../KeyTable/js/dataTables.keyTable.js">../../../KeyTable/js/dataTables.keyTable.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../KeyTable/css/keyTable.dataTables.css">../../../KeyTable/css/keyTable.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
716
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/plugins.html
vendored
Normal file
716
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/plugins.html
vendored
Normal file
@ -0,0 +1,716 @@
|
|||||||
|
<!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>AutoFill example - Fill plug-ins</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$.fn.dataTable.AutoFill.actions.names = {
|
||||||
|
available: function ( dt, cells ) {
|
||||||
|
// Only available if a single column is being
|
||||||
|
// filled and it is the first column
|
||||||
|
return cells[0].length === 1 && cells[0][0].index.column === 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
option: function ( dt, cells ) {
|
||||||
|
// Ask the user if they want to change the surname only
|
||||||
|
return 'Fill only surname - retain first name';
|
||||||
|
},
|
||||||
|
|
||||||
|
execute: function ( dt, cells, node ) {
|
||||||
|
// Modify the name and set the new values
|
||||||
|
var surname = cells[0][0].data.split(' ')[1];
|
||||||
|
|
||||||
|
for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
|
||||||
|
var name = cells[i][0].data.split(' ');
|
||||||
|
|
||||||
|
cells[i][0].set = name[0]+' '+surname;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Fill plug-ins</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill provides a <a href="fills.html">number of built in fill types</a>, but these built in options can be augmented with additional options using
|
||||||
|
plug-ins.</p>
|
||||||
|
<p>The fill options are provided by plug-ins which are attached to the <code>$.fn.dataTable.AutoFill.actions</code> object. Each property in this object must be an
|
||||||
|
object that provides three functions:</p>
|
||||||
|
<ul class="markdown">
|
||||||
|
<li><code>available</code> - Determine if the data that the user dragged the fill over is suitable for this fill type</li>
|
||||||
|
<li><code>option</code> - Returns a question the user will be asked for if they want to use this fill type</li>
|
||||||
|
<li><code>execute</code> - Modifies the data if this fill type is selected</li>
|
||||||
|
</ul>
|
||||||
|
<p>The example shows a plug-in that will operate only on the first column in the table and will change only the surname - retaining the forename from the original
|
||||||
|
cell. While slightly contrived as an example, it demonstrates how plug-ins can perform potentially complex operations.</p>
|
||||||
|
<p>For full details about creating fill plug-ins for AutoFill, please refer to the <a href="https://datatables.net/extensions/autofill">online
|
||||||
|
documentation</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$.fn.dataTable.AutoFill.actions.names = {
|
||||||
|
available: function ( dt, cells ) {
|
||||||
|
// Only available if a single column is being
|
||||||
|
// filled and it is the first column
|
||||||
|
return cells[0].length === 1 && cells[0][0].index.column === 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
option: function ( dt, cells ) {
|
||||||
|
// Ask the user if they want to change the surname only
|
||||||
|
return 'Fill only surname - retain first name';
|
||||||
|
},
|
||||||
|
|
||||||
|
execute: function ( dt, cells, node ) {
|
||||||
|
// Modify the name and set the new values
|
||||||
|
var surname = cells[0][0].data.split(' ')[1];
|
||||||
|
|
||||||
|
for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
|
||||||
|
var name = cells[i][0].data.split(' ');
|
||||||
|
|
||||||
|
cells[i][0].set = name[0]+' '+surname;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<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,664 @@
|
|||||||
|
<!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>AutoFill example - Scrolling DataTable</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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 table = $('#example').dataTable( {
|
||||||
|
scrollY: 400,
|
||||||
|
scrollX: true,
|
||||||
|
scrollCollapse: true,
|
||||||
|
paging: false,
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Scrolling DataTable</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>When dragging an AutoFill handle, the table (if DataTables scrolling is enabled) or the window will be automatically scrolled, as you approach the edge of the
|
||||||
|
scrolling component. The example below shows the effect with DataTables scrolling (and also window if needed).</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
var table = $('#example').dataTable( {
|
||||||
|
scrollY: 400,
|
||||||
|
scrollX: true,
|
||||||
|
scrollCollapse: true,
|
||||||
|
paging: false,
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
659
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/simple.html
vendored
Normal file
659
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/initialisation/simple.html
vendored
Normal file
@ -0,0 +1,659 @@
|
|||||||
|
<!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>AutoFill example - Basic initialisation</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Basic initialisation</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill gives an Excel like option to a DataTable to click and drag over multiple cells, filling in information over the selected cells and incrementing
|
||||||
|
numbers as needed.</p>
|
||||||
|
<p>AutoFill is initialised using the <a href="//datatables.net/reference/option/autoFill"><code class="option" title=
|
||||||
|
"AutoFill initialisation option">autoFill</code></a> option as shown in the example below. This can be set to be <code>true</code> to use the AutoFill
|
||||||
|
configuration defaults, or used as an object to specify options.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="display nowrap" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.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 language-css"></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/autoFill.dataTables.css">../../css/autoFill.dataTables.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">Initialisation</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li class="active">
|
||||||
|
<a href="./simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
673
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/bootstrap.html
vendored
Normal file
673
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/bootstrap.html
vendored
Normal file
@ -0,0 +1,673 @@
|
|||||||
|
<!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>AutoFill example - Bootstrap styling</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.bootstrap.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/autoFill.bootstrap.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example dt-example-bootstrap">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Bootstrap styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example shows DataTables and the AutoFill extension being used with the <a href="http://getbootstrap.com">Bootstrap</a> framework providing the styling.
|
||||||
|
The <a href="//datatables.net/manual/styling/bootstrap">DataTables / Bootstrap integration</a> provides seamless integration for DataTables to be used in a
|
||||||
|
Bootstrap page.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="table table-striped table-bordered" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/dataTables.bootstrap.js">../../../../media/js/dataTables.bootstrap.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/autoFill.bootstrap.js">../../js/autoFill.bootstrap.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 language-css"></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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/css/dataTables.bootstrap.css">../../../../media/css/dataTables.bootstrap.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../css/autoFill.bootstrap.css">../../css/autoFill.bootstrap.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="../initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Styling</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li class="active">
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
673
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/bootstrap4.html
vendored
Normal file
673
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/bootstrap4.html
vendored
Normal file
@ -0,0 +1,673 @@
|
|||||||
|
<!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>AutoFill example - Bootstrap 4 styling</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap4.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.bootstrap4.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/autoFill.bootstrap4.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example dt-example-bootstrap4">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Bootstrap 4 styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example shows DataTables and the AutoFill extension being used with <a href="http://getbootstrap.com">Bootstrap 4</a> providing the styling. The DataTables
|
||||||
|
/ Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="table table-striped table-bordered" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/dataTables.bootstrap4.js">../../../../media/js/dataTables.bootstrap4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/autoFill.bootstrap4.js">../../js/autoFill.bootstrap4.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 language-css"></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=
|
||||||
|
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/css/dataTables.bootstrap4.css">../../../../media/css/dataTables.bootstrap4.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../css/autoFill.bootstrap4.css">../../css/autoFill.bootstrap4.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="../initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Styling</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
674
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/foundation.html
vendored
Normal file
674
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/foundation.html
vendored
Normal file
@ -0,0 +1,674 @@
|
|||||||
|
<!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>AutoFill example - Foundation styling</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.foundation.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.foundation.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.foundation.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/autoFill.foundation.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example dt-example-foundation">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Foundation styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example shows DataTables and the AutoFill extension being used with the <a href="http://foundation.zurb.com">Foundation</a> framework providing the
|
||||||
|
styling. The <a href="//datatables.net/manual/styling/foundation">DataTables / Foundation integration</a> prove seamless integration for DataTables to be used in a
|
||||||
|
Foundation page.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/dataTables.foundation.js">../../../../media/js/dataTables.foundation.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/autoFill.foundation.js">../../js/autoFill.foundation.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 language-css"></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=
|
||||||
|
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/css/dataTables.foundation.css">../../../../media/css/dataTables.foundation.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../css/autoFill.foundation.css">../../css/autoFill.foundation.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="../initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Styling</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
65
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/index.html
vendored
Normal file
65
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/index.html
vendored
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<!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="//code.jquery.com/jquery-1.12.4.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>AutoFill examples - Styling</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>AutoFill, like all other DataTables extensions, can be styled by various styling frameworks (such as Bootstrap) allowing seamless integration of AutoFill into
|
||||||
|
the look and feel of your site / app.</p>
|
||||||
|
<p>The examples in this section demonstrate this styling integration.</p>
|
||||||
|
</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">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
671
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/jqueryui.html
vendored
Normal file
671
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/jqueryui.html
vendored
Normal file
@ -0,0 +1,671 @@
|
|||||||
|
<!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>AutoFill example - jQuery UI styling</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.jqueryui.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.jqueryui.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.jqueryui.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/autoFill.jqueryui.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example dt-example-jqueryui">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>jQuery UI styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example shows DataTables and AutoFill being used with <a href="http://jqueryui.com/">jQuery UI</a> providing the base styling information.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/dataTables.jqueryui.js">../../../../media/js/dataTables.jqueryui.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/autoFill.jqueryui.js">../../js/autoFill.jqueryui.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 language-css"></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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/css/dataTables.jqueryui.css">../../../../media/css/dataTables.jqueryui.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../css/autoFill.jqueryui.css">../../css/autoFill.jqueryui.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="../initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Styling</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/semanticui.html
vendored
Normal file
672
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/examples/styling/semanticui.html
vendored
Normal file
@ -0,0 +1,672 @@
|
|||||||
|
<!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>AutoFill example - Semantic UI styling</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.semanticui.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/autoFill.semanticui.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.semanticui.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.autoFill.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/autoFill.semanticui.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( {
|
||||||
|
autoFill: true
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example dt-example-semanticui">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>AutoFill example <span>Semantic UI styling</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example shows DataTables and the AutoFill extension being used with <a href="http://semantic-ui.com">Semantic UI</a> providing the styling. The DataTables
|
||||||
|
/ Semantic UI integration provides seamless integration for DataTables to be used in a Semantic UI page.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></div>
|
||||||
|
<table id="example" class="ui celled table" 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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
autoFill: 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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/dataTables.semanticui.js">../../../../media/js/dataTables.semanticui.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.autoFill.js">../../js/dataTables.autoFill.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/autoFill.semanticui.js">../../js/autoFill.semanticui.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 language-css"></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="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/css/dataTables.semanticui.css">../../../../media/css/dataTables.semanticui.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../css/autoFill.semanticui.css">../../css/autoFill.semanticui.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="../initialisation/index.html">Initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/fills.html">Fill types</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keyTable.html">KeyTable integration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/events.html">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/alwaysAsk.html">Always confirm action</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/columns.html">Column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/focus.html">Click focus</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/scrolling.html">Scrolling DataTable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Fill plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/enableDisable.html">Enable / disable API</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Styling</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./jqueryui.html">jQuery UI styling</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap.js
vendored
Normal file
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap.js
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*! Bootstrap integration for DataTables' AutoFill
|
||||||
|
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( factory ){
|
||||||
|
if ( typeof define === 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( ['jquery', 'datatables.net-bs', 'datatables.net-autofill'], function ( $ ) {
|
||||||
|
return factory( $, window, document );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
else if ( typeof exports === 'object' ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = function (root, $) {
|
||||||
|
if ( ! root ) {
|
||||||
|
root = window;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $ || ! $.fn.dataTable ) {
|
||||||
|
$ = require('datatables.net-bs')(root, $).$;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $.fn.dataTable.AutoFill ) {
|
||||||
|
require('datatables.net-autofill')(root, $);
|
||||||
|
}
|
||||||
|
|
||||||
|
return factory( $, root, root.document );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Browser
|
||||||
|
factory( jQuery, window, document );
|
||||||
|
}
|
||||||
|
}(function( $, window, document, undefined ) {
|
||||||
|
'use strict';
|
||||||
|
var DataTable = $.fn.dataTable;
|
||||||
|
|
||||||
|
|
||||||
|
DataTable.AutoFill.classes.btn = 'btn btn-primary';
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap.min.js
vendored
Normal file
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*!
|
||||||
|
Bootstrap integration for DataTables' AutoFill
|
||||||
|
©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-autofill"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);if(!c||!c.fn.dataTable)c=require("datatables.net-bs")(b,c).$;c.fn.dataTable.AutoFill||require("datatables.net-autofill")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a){a=a.fn.dataTable;a.AutoFill.classes.btn="btn btn-primary";return a});
|
||||||
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap4.js
vendored
Normal file
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap4.js
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*! Bootstrap integration for DataTables' AutoFill
|
||||||
|
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( factory ){
|
||||||
|
if ( typeof define === 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( ['jquery', 'datatables.net-bs4', 'datatables.net-autofill'], function ( $ ) {
|
||||||
|
return factory( $, window, document );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
else if ( typeof exports === 'object' ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = function (root, $) {
|
||||||
|
if ( ! root ) {
|
||||||
|
root = window;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $ || ! $.fn.dataTable ) {
|
||||||
|
$ = require('datatables.net-bs4')(root, $).$;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $.fn.dataTable.AutoFill ) {
|
||||||
|
require('datatables.net-autofill')(root, $);
|
||||||
|
}
|
||||||
|
|
||||||
|
return factory( $, root, root.document );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Browser
|
||||||
|
factory( jQuery, window, document );
|
||||||
|
}
|
||||||
|
}(function( $, window, document, undefined ) {
|
||||||
|
'use strict';
|
||||||
|
var DataTable = $.fn.dataTable;
|
||||||
|
|
||||||
|
|
||||||
|
DataTable.AutoFill.classes.btn = 'btn btn-primary';
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap4.min.js
vendored
Normal file
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.bootstrap4.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*!
|
||||||
|
Bootstrap integration for DataTables' AutoFill
|
||||||
|
©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-autofill"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);if(!c||!c.fn.dataTable)c=require("datatables.net-bs4")(b,c).$;c.fn.dataTable.AutoFill||require("datatables.net-autofill")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a){a=a.fn.dataTable;a.AutoFill.classes.btn="btn btn-primary";return a});
|
||||||
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.foundation.js
vendored
Normal file
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.foundation.js
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*! Foundation integration for DataTables' AutoFill
|
||||||
|
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( factory ){
|
||||||
|
if ( typeof define === 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( ['jquery', 'datatables.net-zf', 'datatables.net-autofill'], function ( $ ) {
|
||||||
|
return factory( $, window, document );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
else if ( typeof exports === 'object' ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = function (root, $) {
|
||||||
|
if ( ! root ) {
|
||||||
|
root = window;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $ || ! $.fn.dataTable ) {
|
||||||
|
$ = require('datatables.net-zf')(root, $).$;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $.fn.dataTable.AutoFill ) {
|
||||||
|
require('datatables.net-autofill')(root, $);
|
||||||
|
}
|
||||||
|
|
||||||
|
return factory( $, root, root.document );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Browser
|
||||||
|
factory( jQuery, window, document );
|
||||||
|
}
|
||||||
|
}(function( $, window, document, undefined ) {
|
||||||
|
'use strict';
|
||||||
|
var DataTable = $.fn.dataTable;
|
||||||
|
|
||||||
|
|
||||||
|
DataTable.AutoFill.classes.btn = 'button tiny';
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.foundation.min.js
vendored
Normal file
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.foundation.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*!
|
||||||
|
Foundation integration for DataTables' AutoFill
|
||||||
|
©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-zf","datatables.net-autofill"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);if(!c||!c.fn.dataTable)c=require("datatables.net-zf")(b,c).$;c.fn.dataTable.AutoFill||require("datatables.net-autofill")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a){a=a.fn.dataTable;a.AutoFill.classes.btn="button tiny";return a});
|
||||||
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.jqueryui.js
vendored
Normal file
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.jqueryui.js
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*! jQuery UI integration for DataTables' AutoFill
|
||||||
|
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( factory ){
|
||||||
|
if ( typeof define === 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( ['jquery', 'datatables.net-jqui', 'datatables.net-autofill'], function ( $ ) {
|
||||||
|
return factory( $, window, document );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
else if ( typeof exports === 'object' ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = function (root, $) {
|
||||||
|
if ( ! root ) {
|
||||||
|
root = window;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $ || ! $.fn.dataTable ) {
|
||||||
|
$ = require('datatables.net-jqui')(root, $).$;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $.fn.dataTable.AutoFill ) {
|
||||||
|
require('datatables.net-autofill')(root, $);
|
||||||
|
}
|
||||||
|
|
||||||
|
return factory( $, root, root.document );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Browser
|
||||||
|
factory( jQuery, window, document );
|
||||||
|
}
|
||||||
|
}(function( $, window, document, undefined ) {
|
||||||
|
'use strict';
|
||||||
|
var DataTable = $.fn.dataTable;
|
||||||
|
|
||||||
|
|
||||||
|
DataTable.AutoFill.classes.btn = 'ui-button ui-state-default ui-corner-all';
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
6
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.jqueryui.min.js
vendored
Normal file
6
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.jqueryui.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/*!
|
||||||
|
jQuery UI integration for DataTables' AutoFill
|
||||||
|
©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-jqui","datatables.net-autofill"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);if(!c||!c.fn.dataTable)c=require("datatables.net-jqui")(b,c).$;c.fn.dataTable.AutoFill||require("datatables.net-autofill")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a){a=a.fn.dataTable;a.AutoFill.classes.btn="ui-button ui-state-default ui-corner-all";
|
||||||
|
return a});
|
||||||
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.semanticui.js
vendored
Normal file
43
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.semanticui.js
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/*! Bootstrap integration for DataTables' AutoFill
|
||||||
|
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( factory ){
|
||||||
|
if ( typeof define === 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( ['jquery', 'datatables.net-se', 'datatables.net-autofill'], function ( $ ) {
|
||||||
|
return factory( $, window, document );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
else if ( typeof exports === 'object' ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = function (root, $) {
|
||||||
|
if ( ! root ) {
|
||||||
|
root = window;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $ || ! $.fn.dataTable ) {
|
||||||
|
$ = require('datatables.net-se')(root, $).$;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! $.fn.dataTable.AutoFill ) {
|
||||||
|
require('datatables.net-autofill')(root, $);
|
||||||
|
}
|
||||||
|
|
||||||
|
return factory( $, root, root.document );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Browser
|
||||||
|
factory( jQuery, window, document );
|
||||||
|
}
|
||||||
|
}(function( $, window, document, undefined ) {
|
||||||
|
'use strict';
|
||||||
|
var DataTable = $.fn.dataTable;
|
||||||
|
|
||||||
|
|
||||||
|
DataTable.AutoFill.classes.btn = 'ui button';
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.semanticui.min.js
vendored
Normal file
5
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/autoFill.semanticui.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*!
|
||||||
|
Bootstrap integration for DataTables' AutoFill
|
||||||
|
©2015 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-se","datatables.net-autofill"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);if(!c||!c.fn.dataTable)c=require("datatables.net-se")(b,c).$;c.fn.dataTable.AutoFill||require("datatables.net-autofill")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a){a=a.fn.dataTable;a.AutoFill.classes.btn="ui button";return a});
|
||||||
1159
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/dataTables.autoFill.js
vendored
Executable file
1159
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/dataTables.autoFill.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
25
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/dataTables.autoFill.min.js
vendored
Normal file
25
helpdesk/static/helpdesk/vendor/datatables/extensions/AutoFill/js/dataTables.autoFill.min.js
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*!
|
||||||
|
AutoFill 2.2.0
|
||||||
|
©2008-2016 SpryMedia Ltd - datatables.net/license
|
||||||
|
*/
|
||||||
|
(function(e){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(l){return e(l,window,document)}):"object"===typeof exports?module.exports=function(l,i){l||(l=window);if(!i||!i.fn.dataTable)i=require("datatables.net")(l,i).$;return e(i,l,l.document)}:e(jQuery,window,document)})(function(e,l,i,q){var k=e.fn.dataTable,p=0,j=function(c,b){if(!k.versionCheck||!k.versionCheck("1.10.8"))throw"Warning: AutoFill requires DataTables 1.10.8 or greater";this.c=e.extend(!0,{},k.defaults.autoFill,
|
||||||
|
j.defaults,b);this.s={dt:new k.Api(c),namespace:".autoFill"+p++,scroll:{},scrollInterval:null,handle:{height:0,width:0},enabled:!1};this.dom={handle:e('<div class="dt-autofill-handle"/>'),select:{top:e('<div class="dt-autofill-select top"/>'),right:e('<div class="dt-autofill-select right"/>'),bottom:e('<div class="dt-autofill-select bottom"/>'),left:e('<div class="dt-autofill-select left"/>')},background:e('<div class="dt-autofill-background"/>'),list:e('<div class="dt-autofill-list">'+this.s.dt.i18n("autoFill.info",
|
||||||
|
"")+"<ul/></div>"),dtScroll:null,offsetParent:null};this._constructor()};e.extend(j.prototype,{enabled:function(){return this.s.enabled},enable:function(c){var b=this;if(!1===c)return this.disable();this.s.enabled=!0;this._focusListener();this.dom.handle.on("mousedown",function(a){b._mousedown(a);return!1});return this},disable:function(){this.s.enabled=!1;this._focusListenerRemove();return this},_constructor:function(){var c=this,b=this.s.dt,a=e("div.dataTables_scrollBody",this.s.dt.table().container());
|
||||||
|
b.settings()[0].autoFill=this;a.length&&(this.dom.dtScroll=a,"static"===a.css("position")&&a.css("position","relative"));!1!==this.c.enable&&this.enable();b.on("destroy.autoFill",function(){c._focusListenerRemove()})},_attach:function(c){var b=this.s.dt,a=b.cell(c).index(),d=this.dom.handle,f=this.s.handle;if(!a||-1===b.columns(this.c.columns).indexes().indexOf(a.column))this._detach();else{this.dom.offsetParent||(this.dom.offsetParent=e(b.table().node()).offsetParent());if(!f.height||!f.width)d.appendTo("body"),
|
||||||
|
f.height=d.outerHeight(),f.width=d.outerWidth();b=this._getPosition(c,this.dom.offsetParent);this.dom.attachedTo=c;d.css({top:b.top+c.offsetHeight-f.height,left:b.left+c.offsetWidth-f.width}).appendTo(this.dom.offsetParent)}},_actionSelector:function(c){var b=this,a=this.s.dt,d=j.actions,f=[];e.each(d,function(b,d){d.available(a,c)&&f.push(b)});if(1===f.length&&!1===this.c.alwaysAsk){var h=d[f[0]].execute(a,c);this._update(h,c)}else{var g=this.dom.list.children("ul").empty();f.push("cancel");e.each(f,
|
||||||
|
function(f,h){g.append(e("<li/>").append('<div class="dt-autofill-question">'+d[h].option(a,c)+"<div>").append(e('<div class="dt-autofill-button">').append(e('<button class="'+j.classes.btn+'">'+a.i18n("autoFill.button",">")+"</button>").on("click",function(){var f=d[h].execute(a,c,e(this).closest("li"));b._update(f,c);b.dom.background.remove();b.dom.list.remove()}))))});this.dom.background.appendTo("body");this.dom.list.appendTo("body");this.dom.list.css("margin-top",-1*(this.dom.list.outerHeight()/
|
||||||
|
2))}},_detach:function(){this.dom.attachedTo=null;this.dom.handle.detach()},_drawSelection:function(c){var b=this.s.dt,a=this.s.start,d=e(this.dom.start),f=e(c),h={row:b.rows({page:"current"}).nodes().indexOf(f.parent()[0]),column:f.index()},c=b.column.index("toData",h.column);if(b.cell(f).any()&&-1!==b.columns(this.c.columns).indexes().indexOf(c)){this.s.end=h;var g,b=a.row<h.row?d:f;g=a.row<h.row?f:d;c=a.column<h.column?d:f;d=a.column<h.column?f:d;b=this._getPosition(b).top;c=this._getPosition(c).left;
|
||||||
|
a=this._getPosition(g).top+g.outerHeight()-b;d=this._getPosition(d).left+d.outerWidth()-c;f=this.dom.select;f.top.css({top:b,left:c,width:d});f.left.css({top:b,left:c,height:a});f.bottom.css({top:b+a,left:c,width:d});f.right.css({top:b,left:c+d,height:a})}},_editor:function(c){var b=this.s.dt,a=this.c.editor;if(a){for(var d={},f=[],e=a.fields(),g=0,i=c.length;g<i;g++)for(var j=0,l=c[g].length;j<l;j++){var o=c[g][j],k=b.settings()[0].aoColumns[o.index.column],n=k.editField;if(n===q)for(var k=k.mData,
|
||||||
|
m=0,p=e.length;m<p;m++){var r=a.field(e[m]);if(r.dataSrc()===k){n=r.name();break}}if(!n)throw"Could not automatically determine field data. Please see https://datatables.net/tn/11";d[n]||(d[n]={});k=b.row(o.index.row).id();d[n][k]=o.set;f.push(o.index)}a.bubble(f,!1).multiSet(d).submit()}},_emitEvent:function(c,b){this.s.dt.iterator("table",function(a){e(a.nTable).triggerHandler(c+".dt",b)})},_focusListener:function(){var c=this,b=this.s.dt,a=this.s.namespace,d=null!==this.c.focus?this.c.focus:b.init().keys||
|
||||||
|
b.settings()[0].keytable?"focus":"hover";if("focus"===d)b.on("key-focus.autoFill",function(b,a,d){c._attach(d.node())}).on("key-blur.autoFill",function(){c._detach()});else if("click"===d)e(b.table().body()).on("click"+a,"td, th",function(){c._attach(this)}),e(i.body).on("click"+a,function(a){e(a.target).parents().filter(b.table().body()).length||c._detach()});else e(b.table().body()).on("mouseenter"+a,"td, th",function(){c._attach(this)}).on("mouseleave"+a,function(b){e(b.relatedTarget).hasClass("dt-autofill-handle")||
|
||||||
|
c._detach()})},_focusListenerRemove:function(){var c=this.s.dt;c.off(".autoFill");e(c.table().body()).off(this.s.namespace);e(i.body).off(this.s.namespace)},_getPosition:function(c,b){var a=e(c),d,f,h=0,g=0;b||(b=e(this.s.dt.table().node()).offsetParent());do{f=a.position();d=a.offsetParent();h+=f.top+d.scrollTop();g+=f.left+d.scrollLeft();if("body"===a.get(0).nodeName.toLowerCase())break;a=d}while(d.get(0)!==b.get(0));return{top:h,left:g}},_mousedown:function(c){var b=this,a=this.s.dt;this.dom.start=
|
||||||
|
this.dom.attachedTo;this.s.start={row:a.rows({page:"current"}).nodes().indexOf(e(this.dom.start).parent()[0]),column:e(this.dom.start).index()};e(i.body).on("mousemove.autoFill",function(a){b._mousemove(a)}).on("mouseup.autoFill",function(a){b._mouseup(a)});var d=this.dom.select,a=e(a.table().node()).offsetParent();d.top.appendTo(a);d.left.appendTo(a);d.right.appendTo(a);d.bottom.appendTo(a);this._drawSelection(this.dom.start,c);this.dom.handle.css("display","none");c=this.dom.dtScroll;this.s.scroll=
|
||||||
|
{windowHeight:e(l).height(),windowWidth:e(l).width(),dtTop:c?c.offset().top:null,dtLeft:c?c.offset().left:null,dtHeight:c?c.outerHeight():null,dtWidth:c?c.outerWidth():null}},_mousemove:function(c){var b=c.target.nodeName.toLowerCase();"td"!==b&&"th"!==b||(this._drawSelection(c.target,c),this._shiftScroll(c))},_mouseup:function(){e(i.body).off(".autoFill");var c=this.s.dt,b=this.dom.select;b.top.remove();b.left.remove();b.right.remove();b.bottom.remove();this.dom.handle.css("display","block");var b=
|
||||||
|
this.s.start,a=this.s.end;if(!(b.row===a.row&&b.column===a.column)){for(var d=this._range(b.row,a.row),b=this._range(b.column,a.column),a=[],f=c.settings()[0],h=f.aoColumns,g=0;g<d.length;g++)a.push(e.map(b,function(a){var a=c.cell(":eq("+d[g]+")",a+":visible",{page:"current"}),b=a.data(),e=a.index(),i=h[e.column].editField;i!==q&&(b=f.oApi._fnGetObjectDataFn(i)(c.row(e.row).data()));return{cell:a,data:b,label:a.data(),index:e}}));this._actionSelector(a);clearInterval(this.s.scrollInterval);this.s.scrollInterval=
|
||||||
|
null}},_range:function(c,b){var a=[],d;if(c<=b)for(d=c;d<=b;d++)a.push(d);else for(d=c;d>=b;d--)a.push(d);return a},_shiftScroll:function(c){var b=this,a=this.s.scroll,d=!1,f=c.pageY-i.body.scrollTop,e=c.pageX-i.body.scrollLeft,g,j,k,l;65>f?g=-5:f>a.windowHeight-65&&(g=5);65>e?j=-5:e>a.windowWidth-65&&(j=5);null!==a.dtTop&&c.pageY<a.dtTop+65?k=-5:null!==a.dtTop&&c.pageY>a.dtTop+a.dtHeight-65&&(k=5);null!==a.dtLeft&&c.pageX<a.dtLeft+65?l=-5:null!==a.dtLeft&&c.pageX>a.dtLeft+a.dtWidth-65&&(l=5);g||
|
||||||
|
j||k||l?(a.windowVert=g,a.windowHoriz=j,a.dtVert=k,a.dtHoriz=l,d=!0):this.s.scrollInterval&&(clearInterval(this.s.scrollInterval),this.s.scrollInterval=null);!this.s.scrollInterval&&d&&(this.s.scrollInterval=setInterval(function(){if(a.windowVert)i.body.scrollTop=i.body.scrollTop+a.windowVert;if(a.windowHoriz)i.body.scrollLeft=i.body.scrollLeft+a.windowHoriz;if(a.dtVert||a.dtHoriz){var c=b.dom.dtScroll[0];if(a.dtVert)c.scrollTop=c.scrollTop+a.dtVert;if(a.dtHoriz)c.scrollLeft=c.scrollLeft+a.dtHoriz}},
|
||||||
|
20))},_update:function(c,b){if(!1!==c){var a=this.s.dt,d;this._emitEvent("preAutoFill",[a,b]);this._editor(b);if(null!==this.c.update?this.c.update:!this.c.editor){for(var f=0,e=b.length;f<e;f++)for(var g=0,i=b[f].length;g<i;g++)d=b[f][g],d.cell.data(d.set);a.draw(!1)}this._emitEvent("autoFill",[a,b])}}});j.actions={increment:{available:function(c,b){return e.isNumeric(b[0][0].label)},option:function(c){return c.i18n("autoFill.increment",'Increment / decrement each cell by: <input type="number" value="1">')},
|
||||||
|
execute:function(c,b,a){for(var c=1*b[0][0].data,a=1*e("input",a).val(),d=0,f=b.length;d<f;d++)for(var h=0,g=b[d].length;h<g;h++)b[d][h].set=c,c+=a}},fill:{available:function(){return!0},option:function(c,b){return c.i18n("autoFill.fill","Fill all cells with <i>"+b[0][0].label+"</i>")},execute:function(c,b){for(var a=b[0][0].data,d=0,e=b.length;d<e;d++)for(var h=0,g=b[d].length;h<g;h++)b[d][h].set=a}},fillHorizontal:{available:function(c,b){return 1<b.length&&1<b[0].length},option:function(c){return c.i18n("autoFill.fillHorizontal",
|
||||||
|
"Fill cells horizontally")},execute:function(c,b){for(var a=0,d=b.length;a<d;a++)for(var e=0,h=b[a].length;e<h;e++)b[a][e].set=b[a][0].data}},fillVertical:{available:function(c,b){return 1<b.length&&1<b[0].length},option:function(c){return c.i18n("autoFill.fillVertical","Fill cells vertically")},execute:function(c,b){for(var a=0,d=b.length;a<d;a++)for(var e=0,h=b[a].length;e<h;e++)b[a][e].set=b[0][e].data}},cancel:{available:function(){return!1},option:function(c){return c.i18n("autoFill.cancel",
|
||||||
|
"Cancel")},execute:function(){return!1}}};j.version="2.2.0";j.defaults={alwaysAsk:!1,focus:null,columns:"",enable:!0,update:null,editor:null};j.classes={btn:"btn"};var m=e.fn.dataTable.Api;m.register("autoFill()",function(){return this});m.register("autoFill().enabled()",function(){var c=this.context[0];return c.autoFill?c.autoFill.enabled():!1});m.register("autoFill().enable()",function(c){return this.iterator("table",function(b){b.autoFill&&b.autoFill.enable(c)})});m.register("autoFill().disable()",
|
||||||
|
function(){return this.iterator("table",function(c){c.autoFill&&c.autoFill.disable()})});e(i).on("preInit.dt.autofill",function(c,b){if("dt"===c.namespace){var a=b.oInit.autoFill,d=k.defaults.autoFill;if(a||d)d=e.extend({},a,d),!1!==a&&new j(b,d)}});k.AutoFill=j;return k.AutoFill=j});
|
||||||
22
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/License.txt
vendored
Normal file
22
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/License.txt
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
MIT license
|
||||||
|
|
||||||
|
Copyright (c) 2015-2016 SpryMedia Limited
|
||||||
|
http://datatables.net
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
39
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/Readme.md
vendored
Normal file
39
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/Readme.md
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# Buttons
|
||||||
|
|
||||||
|
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control.
|
||||||
|
|
||||||
|
|
||||||
|
# Installation
|
||||||
|
|
||||||
|
To use Buttons the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/buttons/) for full details.
|
||||||
|
|
||||||
|
## NPM and Bower
|
||||||
|
|
||||||
|
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-buttons`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||||
|
|
||||||
|
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||||
|
|
||||||
|
|
||||||
|
# Basic usage
|
||||||
|
|
||||||
|
Buttons is initialised using the `buttons` option in the DataTables constructor, giving an array of the buttons that should be shown. Further options can be specified using this option as an object - see the documentation for details. For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
$(document).ready( function () {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
buttons: [ 'csv', 'excel', 'pdf', 'print' ]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# Documentation / support
|
||||||
|
|
||||||
|
* [Documentation](https://datatables.net/extensions/buttons/)
|
||||||
|
* [DataTables support forums](http://datatables.net/forums)
|
||||||
|
|
||||||
|
|
||||||
|
# GitHub
|
||||||
|
|
||||||
|
If you fancy getting involved with the development of Buttons and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/Buttons)
|
||||||
|
|
||||||
158
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap.css
vendored
Normal file
158
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap.css
vendored
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-button-collection.dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
z-index: 2002;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2001;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
div.dt-buttons {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
div.dt-buttons a.btn {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-buttons button.btn.processing,
|
||||||
|
div.dt-buttons div.btn.processing,
|
||||||
|
div.dt-buttons a.btn.processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
div.dt-buttons button.btn.processing:after,
|
||||||
|
div.dt-buttons div.btn.processing:after,
|
||||||
|
div.dt-buttons a.btn.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0,0,0,0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:0.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}ul.dt-button-collection.dropdown-menu{display:block;z-index:2002;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}ul.dt-button-collection.dropdown-menu.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}ul.dt-button-collection.dropdown-menu.fixed.two-column{margin-left:-150px}ul.dt-button-collection.dropdown-menu.fixed.three-column{margin-left:-225px}ul.dt-button-collection.dropdown-menu.fixed.four-column{margin-left:-300px}ul.dt-button-collection.dropdown-menu>*{-webkit-column-break-inside:avoid;break-inside:avoid}ul.dt-button-collection.dropdown-menu.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}ul.dt-button-collection.dropdown-menu.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}ul.dt-button-collection.dropdown-menu.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2001}@media screen and (max-width: 767px){div.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:0.5em}div.dt-buttons a.btn{float:none}}div.dt-buttons button.btn.processing,div.dt-buttons div.btn.processing,div.dt-buttons a.btn.processing{color:rgba(0,0,0,0.2)}div.dt-buttons button.btn.processing:after,div.dt-buttons div.btn.processing:after,div.dt-buttons a.btn.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:' ';border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
|
||||||
219
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap4.css
vendored
Normal file
219
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap4.css
vendored
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-button-collection.dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
z-index: 2002;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.dropdown-menu.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-button-collection {
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.fixed:before, ul.dt-button-collection.fixed:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
div.dt-buttons {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
div.dt-buttons a.btn {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-buttons button.btn.processing,
|
||||||
|
div.dt-buttons div.btn.processing,
|
||||||
|
div.dt-buttons a.btn.processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
div.dt-buttons button.btn.processing:after,
|
||||||
|
div.dt-buttons div.btn.processing:after,
|
||||||
|
div.dt-buttons a.btn.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap4.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.bootstrap4.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0,0,0,0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:0.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}ul.dt-button-collection.dropdown-menu{display:block;z-index:2002;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}ul.dt-button-collection.dropdown-menu.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}ul.dt-button-collection.dropdown-menu.fixed.two-column{margin-left:-150px}ul.dt-button-collection.dropdown-menu.fixed.three-column{margin-left:-225px}ul.dt-button-collection.dropdown-menu.fixed.four-column{margin-left:-300px}ul.dt-button-collection.dropdown-menu>*{-webkit-column-break-inside:avoid;break-inside:avoid}ul.dt-button-collection.dropdown-menu.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}ul.dt-button-collection.dropdown-menu.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}ul.dt-button-collection.dropdown-menu.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}ul.dt-button-collection{-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}ul.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}ul.dt-button-collection.fixed.two-column{margin-left:-150px}ul.dt-button-collection.fixed.three-column{margin-left:-225px}ul.dt-button-collection.fixed.four-column{margin-left:-300px}ul.dt-button-collection>*{-webkit-column-break-inside:avoid;break-inside:avoid}ul.dt-button-collection.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}ul.dt-button-collection.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}ul.dt-button-collection.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}ul.dt-button-collection.fixed{max-width:none}ul.dt-button-collection.fixed:before,ul.dt-button-collection.fixed:after{display:none}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999}@media screen and (max-width: 767px){div.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:0.5em}div.dt-buttons a.btn{float:none}}div.dt-buttons button.btn.processing,div.dt-buttons div.btn.processing,div.dt-buttons a.btn.processing{color:rgba(0,0,0,0.2)}div.dt-buttons button.btn.processing:after,div.dt-buttons div.btn.processing:after,div.dt-buttons a.btn.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:' ';border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
|
||||||
354
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.dataTables.css
vendored
Normal file
354
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.dataTables.css
vendored
Normal file
@ -0,0 +1,354 @@
|
|||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.dt-button,
|
||||||
|
div.dt-button,
|
||||||
|
a.dt-button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-right: 0.333em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.88em;
|
||||||
|
color: black;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #e9e9e9;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, white 0%, #e9e9e9 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, white 0%, #e9e9e9 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, white 0%, #e9e9e9 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, white 0%, #e9e9e9 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, white 0%, #e9e9e9 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='white', EndColorStr='#e9e9e9');
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
button.dt-button.disabled,
|
||||||
|
div.dt-button.disabled,
|
||||||
|
a.dt-button.disabled {
|
||||||
|
color: #999;
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
cursor: default;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f9f9f9');
|
||||||
|
}
|
||||||
|
button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled),
|
||||||
|
div.dt-button:active:not(.disabled),
|
||||||
|
div.dt-button.active:not(.disabled),
|
||||||
|
a.dt-button:active:not(.disabled),
|
||||||
|
a.dt-button.active:not(.disabled) {
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #f3f3f3 0%, #e2e2e2 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f3f3f3', EndColorStr='#e2e2e2');
|
||||||
|
box-shadow: inset 1px 1px 3px #999999;
|
||||||
|
}
|
||||||
|
button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled),
|
||||||
|
div.dt-button:active:not(.disabled):hover:not(.disabled),
|
||||||
|
div.dt-button.active:not(.disabled):hover:not(.disabled),
|
||||||
|
a.dt-button:active:not(.disabled):hover:not(.disabled),
|
||||||
|
a.dt-button.active:not(.disabled):hover:not(.disabled) {
|
||||||
|
box-shadow: inset 1px 1px 3px #999999;
|
||||||
|
background-color: #cccccc;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #eaeaea 0%, #cccccc 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #eaeaea 0%, #cccccc 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#cccccc');
|
||||||
|
}
|
||||||
|
button.dt-button:hover,
|
||||||
|
div.dt-button:hover,
|
||||||
|
a.dt-button:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
button.dt-button:hover:not(.disabled),
|
||||||
|
div.dt-button:hover:not(.disabled),
|
||||||
|
a.dt-button:hover:not(.disabled) {
|
||||||
|
border: 1px solid #666;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e0e0e0');
|
||||||
|
}
|
||||||
|
button.dt-button:focus:not(.disabled),
|
||||||
|
div.dt-button:focus:not(.disabled),
|
||||||
|
a.dt-button:focus:not(.disabled) {
|
||||||
|
border: 1px solid #426c9e;
|
||||||
|
text-shadow: 0 1px 0 #c4def1;
|
||||||
|
outline: none;
|
||||||
|
background-color: #79ace9;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #bddef4 0%, #79ace9 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #bddef4 0%, #79ace9 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #bddef4 0%, #79ace9 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #bddef4 0%, #79ace9 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #bddef4 0%, #79ace9 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#bddef4', EndColorStr='#79ace9');
|
||||||
|
}
|
||||||
|
|
||||||
|
.dt-button embed {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-buttons {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
div.dt-buttons.buttons-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-collection {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
margin-top: 3px;
|
||||||
|
padding: 8px 8px 4px 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||||
|
background-color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2002;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 2002;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection button.dt-button,
|
||||||
|
div.dt-button-collection div.dt-button,
|
||||||
|
div.dt-button-collection a.dt-button {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled),
|
||||||
|
div.dt-button-collection div.dt-button:active:not(.disabled),
|
||||||
|
div.dt-button-collection div.dt-button.active:not(.disabled),
|
||||||
|
div.dt-button-collection a.dt-button:active:not(.disabled),
|
||||||
|
div.dt-button-collection a.dt-button.active:not(.disabled) {
|
||||||
|
background-color: #dadada;
|
||||||
|
/* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
|
||||||
|
/* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
|
||||||
|
/* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
|
||||||
|
/* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#dadada');
|
||||||
|
box-shadow: inset 1px 1px 3px #666;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
/* Fallback */
|
||||||
|
background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* IE10 Consumer Preview */
|
||||||
|
background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Firefox */
|
||||||
|
background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Opera */
|
||||||
|
background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
|
||||||
|
/* Webkit (Safari/Chrome 10) */
|
||||||
|
background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Webkit (Chrome 11+) */
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* W3C Markup, IE10 Release Preview */
|
||||||
|
z-index: 2001;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
div.dt-buttons {
|
||||||
|
float: none !important;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.dt-button.processing,
|
||||||
|
div.dt-button.processing,
|
||||||
|
a.dt-button.processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
button.dt-button.processing:after,
|
||||||
|
div.dt-button.processing:after,
|
||||||
|
a.dt-button.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.dataTables.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.dataTables.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
189
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.foundation.css
vendored
Normal file
189
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.foundation.css
vendored
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-buttons li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul.dt-buttons li.active a {
|
||||||
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-buttons.button-group a {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dt-button-collection.f-dropdown {
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
ul.dt-button-collection.f-dropdown.fixed:before, ul.dt-button-collection.f-dropdown.fixed:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 88;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
ul.dt-buttons {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
ul.dt-buttons li {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.button-group.stacked.dropdown-pane {
|
||||||
|
margin-top: 2px;
|
||||||
|
padding: 1px;
|
||||||
|
z-index: 89;
|
||||||
|
}
|
||||||
|
div.button-group.stacked.dropdown-pane a.button {
|
||||||
|
margin-bottom: 1px;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
div.button-group.stacked.dropdown-pane a.button:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-buttons button.button.processing,
|
||||||
|
div.dt-buttons div.button.processing,
|
||||||
|
div.dt-buttons a.button.processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
border-top-color: white;
|
||||||
|
border-bottom-color: white;
|
||||||
|
}
|
||||||
|
div.dt-buttons button.button.processing:after,
|
||||||
|
div.dt-buttons div.button.processing:after,
|
||||||
|
div.dt-buttons a.button.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.foundation.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.foundation.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0,0,0,0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:0.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}ul.dt-buttons li{margin:0}ul.dt-buttons li.active a{box-shadow:inset 0 0 10px rgba(0,0,0,0.6)}ul.dt-buttons.button-group a{margin-bottom:0}ul.dt-button-collection.f-dropdown{-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}ul.dt-button-collection.f-dropdown.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}ul.dt-button-collection.f-dropdown.fixed.two-column{margin-left:-150px}ul.dt-button-collection.f-dropdown.fixed.three-column{margin-left:-225px}ul.dt-button-collection.f-dropdown.fixed.four-column{margin-left:-300px}ul.dt-button-collection.f-dropdown>*{-webkit-column-break-inside:avoid;break-inside:avoid}ul.dt-button-collection.f-dropdown.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}ul.dt-button-collection.f-dropdown.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}ul.dt-button-collection.f-dropdown.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}ul.dt-button-collection.f-dropdown.fixed{max-width:none}ul.dt-button-collection.f-dropdown.fixed:before,ul.dt-button-collection.f-dropdown.fixed:after{display:none}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:88}@media screen and (max-width: 767px){ul.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:0.5rem}ul.dt-buttons li{float:none}}div.button-group.stacked.dropdown-pane{margin-top:2px;padding:1px;z-index:89}div.button-group.stacked.dropdown-pane a.button{margin-bottom:1px;border-right:none}div.button-group.stacked.dropdown-pane a.button:last-child{margin-bottom:0}div.dt-buttons button.button.processing,div.dt-buttons div.button.processing,div.dt-buttons a.button.processing{color:rgba(0,0,0,0.2);color:rgba(255,255,255,0.2);border-top-color:white;border-bottom-color:white}div.dt-buttons button.button.processing:after,div.dt-buttons div.button.processing:after,div.dt-buttons a.button.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:' ';border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
|
||||||
218
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.jqueryui.css
vendored
Normal file
218
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.jqueryui.css
vendored
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-buttons {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
div.dt-buttons .dt-button {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
div.dt-buttons .dt-button span.ui-icon {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
div.dt-buttons .dt-button:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
div.dt-buttons .dt-button:hover > span {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-collection {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
margin-top: 3px;
|
||||||
|
padding: 8px 8px 4px 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2002;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 2002;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
-webkit-column-gap: 0;
|
||||||
|
-moz-column-gap: 0;
|
||||||
|
-ms-column-gap: 0;
|
||||||
|
-o-column-gap: 0;
|
||||||
|
column-gap: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection .dt-button {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection .dt-button:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection .dt-button:hover > span {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
/* Fallback */
|
||||||
|
background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* IE10 Consumer Preview */
|
||||||
|
background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Firefox */
|
||||||
|
background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Opera */
|
||||||
|
background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
|
||||||
|
/* Webkit (Safari/Chrome 10) */
|
||||||
|
background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* Webkit (Chrome 11+) */
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||||
|
/* W3C Markup, IE10 Release Preview */
|
||||||
|
z-index: 2001;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
div.dt-buttons {
|
||||||
|
float: none !important;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.dt-button.processing,
|
||||||
|
div.dt-button.processing,
|
||||||
|
a.dt-button.processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
button.dt-button.processing:after,
|
||||||
|
div.dt-button.processing:after,
|
||||||
|
a.dt-button.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.jqueryui.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.jqueryui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0,0,0,0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:0.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}div.dt-buttons{position:relative;float:left}div.dt-buttons .dt-button{margin-right:0}div.dt-buttons .dt-button span.ui-icon{display:inline-block;vertical-align:middle;margin-top:-2px}div.dt-buttons .dt-button:active{outline:none}div.dt-buttons .dt-button:hover>span{background-color:rgba(0,0,0,0.05)}div.dt-button-collection{position:absolute;top:0;left:0;width:150px;margin-top:3px;padding:8px 8px 4px 8px;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.4);background-color:#f3f3f3;background-color:rgba(255,255,255,0.3);overflow:hidden;z-index:2002;border-radius:5px;box-shadow:3px 3px 5px rgba(0,0,0,0.3);z-index:2002;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px;-webkit-column-gap:0;-moz-column-gap:0;-ms-column-gap:0;-o-column-gap:0;column-gap:0}div.dt-button-collection .dt-button{position:relative;left:0;right:0;display:block;float:none;margin-right:0}div.dt-button-collection .dt-button:last-child{margin-bottom:4px}div.dt-button-collection .dt-button:hover>span{background-color:rgba(0,0,0,0.05)}div.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}div.dt-button-collection.fixed.two-column{margin-left:-150px}div.dt-button-collection.fixed.three-column{margin-left:-225px}div.dt-button-collection.fixed.four-column{margin-left:-300px}div.dt-button-collection>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dt-button-collection.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}div.dt-button-collection.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}div.dt-button-collection.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);background:-ms-radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);background:-moz-radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);background:-o-radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);background:-webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0,0,0,0.3)), color-stop(1, rgba(0,0,0,0.7)));background:-webkit-radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);background:radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);z-index:2001}@media screen and (max-width: 640px){div.dt-buttons{float:none !important;text-align:center}}button.dt-button.processing,div.dt-button.processing,a.dt-button.processing{color:rgba(0,0,0,0.2)}button.dt-button.processing:after,div.dt-button.processing:after,a.dt-button.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:' ';border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
|
||||||
171
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.semanticui.css
vendored
Normal file
171
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.semanticui.css
vendored
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
div.dt-button-info h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
div.dt-button-info > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-collection {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
margin-top: 3px !important;
|
||||||
|
z-index: 2002;
|
||||||
|
background: white;
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.fixed.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
div.dt-button-collection > * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
div.dt-button-collection.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.buttons-collection.ui.button span:after {
|
||||||
|
display: inline-block;
|
||||||
|
content: "▾";
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-button-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2001;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
div.dt-buttons {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
div.dt-buttons a.btn {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.dt-buttons button.button.processing,
|
||||||
|
div.dt-buttons div.button.processing,
|
||||||
|
div.dt-buttons a.button.processing {
|
||||||
|
position: relative;
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
div.dt-buttons button.button.processing:after,
|
||||||
|
div.dt-buttons div.button.processing:after,
|
||||||
|
div.dt-buttons a.button.processing:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid #282828;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.semanticui.min.css
vendored
Normal file
1
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/buttons.semanticui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0,0,0,0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:0.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}div.dt-button-collection{position:absolute;top:0;left:0;width:150px;margin-top:3px !important;z-index:2002;background:white;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}div.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}div.dt-button-collection.fixed.two-column{margin-left:-150px}div.dt-button-collection.fixed.three-column{margin-left:-225px}div.dt-button-collection.fixed.four-column{margin-left:-300px}div.dt-button-collection>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dt-button-collection.two-column{width:300px;padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}div.dt-button-collection.three-column{width:450px;padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}div.dt-button-collection.four-column{width:600px;padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}button.buttons-collection.ui.button span:after{display:inline-block;content:"▾";padding-left:0.5em}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2001}@media screen and (max-width: 767px){div.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:0.5em}div.dt-buttons a.btn{float:none}}div.dt-buttons button.button.processing,div.dt-buttons div.button.processing,div.dt-buttons a.button.processing{position:relative;color:rgba(0,0,0,0.2)}div.dt-buttons button.button.processing:after,div.dt-buttons div.button.processing:after,div.dt-buttons a.button.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:' ';border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
|
||||||
27
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/common.scss
vendored
Normal file
27
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/common.scss
vendored
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
div.dt-button-info {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-left: -200px;
|
||||||
|
background-color: white;
|
||||||
|
border: 2px solid #111;
|
||||||
|
box-shadow: 3px 3px 8px rgba( 0, 0, 0, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 21;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
136
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/mixins.scss
vendored
Normal file
136
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/css/mixins.scss
vendored
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
|
||||||
|
@mixin dtb-two-stop-gradient($fromColor, $toColor) {
|
||||||
|
background-color: $toColor; /* Fallback */
|
||||||
|
background-image: -webkit-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||||
|
background-image: -moz-linear-gradient(top, $fromColor 0%, $toColor 100%); /* FF3.6 */
|
||||||
|
background-image: -ms-linear-gradient(top, $fromColor 0%, $toColor 100%); /* IE10 */
|
||||||
|
background-image: -o-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Opera 11.10+ */
|
||||||
|
background-image: linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin dtb-radial-gradient ($fromColor, $toColor ) {
|
||||||
|
background: $toColor; /* Fallback */
|
||||||
|
background: -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */
|
||||||
|
background: -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */
|
||||||
|
background: -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */
|
||||||
|
background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */
|
||||||
|
background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */
|
||||||
|
background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin dtb-fixed-collection {
|
||||||
|
// Fixed positioning feature
|
||||||
|
&.fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&.two-column {
|
||||||
|
margin-left: -150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.three-column {
|
||||||
|
margin-left: -225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.four-column {
|
||||||
|
margin-left: -300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multi-column layout feature
|
||||||
|
-webkit-column-gap: 8px;
|
||||||
|
-moz-column-gap: 8px;
|
||||||
|
-ms-column-gap: 8px;
|
||||||
|
-o-column-gap: 8px;
|
||||||
|
column-gap: 8px;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.two-column {
|
||||||
|
width: 300px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
-ms-column-count: 2;
|
||||||
|
-o-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.three-column {
|
||||||
|
width: 450px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
|
||||||
|
-webkit-column-count: 3;
|
||||||
|
-moz-column-count: 3;
|
||||||
|
-ms-column-count: 3;
|
||||||
|
-o-column-count: 3;
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.four-column {
|
||||||
|
width: 600px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
|
||||||
|
-webkit-column-count: 4;
|
||||||
|
-moz-column-count: 4;
|
||||||
|
-ms-column-count: 4;
|
||||||
|
-o-column-count: 4;
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin dtb-processing {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
border: 2px solid rgb(40,40,40);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-o-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-ms-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-webkit-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
-moz-animation: dtb-spinner 1500ms infinite linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dtb-spinner {
|
||||||
|
100%{ transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes dtb-spinner {
|
||||||
|
100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes dtb-spinner {
|
||||||
|
100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes dtb-spinner {
|
||||||
|
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes dtb-spinner {
|
||||||
|
100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
853
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/addRemove.html
vendored
Normal file
853
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/addRemove.html
vendored
Normal file
@ -0,0 +1,853 @@
|
|||||||
|
<!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>Buttons example - Adding and removing buttons dynamically</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.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 counter = 1;
|
||||||
|
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Add new button',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
dt.button().add( 1, {
|
||||||
|
text: 'Button '+(counter++),
|
||||||
|
action: function () {
|
||||||
|
this.remove();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Adding and removing buttons dynamically</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/api/button().add()"><code class="api" title="Buttons API method">button().add()</code></a> and <a href=
|
||||||
|
"//datatables.net/reference/api/button().remove()"><code class="api" title="Buttons API method">button().remove()</code></a> methods provide the ability to
|
||||||
|
dynamically add and remove buttons from the list. The <a href="//datatables.net/reference/api/button().add()"><code class="api" title=
|
||||||
|
"Buttons API method">button().add()</code></a> method takes two parameters: firstly the insertion point for where the new button should appear, and secondly a
|
||||||
|
button definition (which can be an object, a string or a function) and displays that button.</p>
|
||||||
|
<p>This example shows a button that when activated will add new buttons to the list. These buttons, when activated, will then be removed. Although this example
|
||||||
|
lacks practical utility, it does demonstrate the API methods.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
var counter = 1;
|
||||||
|
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Add new button',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
dt.button().add( 1, {
|
||||||
|
text: 'Button '+(counter++),
|
||||||
|
action: function () {
|
||||||
|
this.remove();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">API</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
896
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/enable.html
vendored
Normal file
896
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/enable.html
vendored
Normal file
@ -0,0 +1,896 @@
|
|||||||
|
<!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>Buttons example - Enable / disable</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../Select/css/select.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../Select/js/dataTables.select.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 table = $('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
select: true,
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Row selected data',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
alert(
|
||||||
|
'Row data: '+
|
||||||
|
JSON.stringify( dt.row( { selected: true } ).data() )
|
||||||
|
);
|
||||||
|
},
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Count rows selected',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
alert( 'Rows: '+ dt.rows( { selected: true } ).count() );
|
||||||
|
},
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.on( 'select', function () {
|
||||||
|
var selectedRows = table.rows( { selected: true } ).count();
|
||||||
|
|
||||||
|
table.button( 0 ).enable( selectedRows === 1 );
|
||||||
|
table.button( 1 ).enable( selectedRows > 0 );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Enable / disable</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>It can often be useful to be able to dynamically enable and disable buttons based on the document state and other components in the table. A typical example of
|
||||||
|
this is to enable a button that will take action on a selected row in the table, only when there is a row selected! If there is no row selected, the button should
|
||||||
|
not take any action when clicked upon (i.e. it is disabled).</p>
|
||||||
|
<p>This example makes use of the <a href="https://datatables.net/extensions/select">Select extension</a> for DataTables to provide row selection. The <a href=
|
||||||
|
"//datatables.net/reference/event/select"><code class="event" title="Select event">select</code></a> event it listened for to know when the row selection has
|
||||||
|
changed and then update the button's enabled / disabled state through the <a href="//datatables.net/reference/api/button().enable()"><code class="api" title=
|
||||||
|
"Buttons API method">button().enable()</code></a> method.</p>
|
||||||
|
<p>The <a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> method is a selector method that will use
|
||||||
|
the information given to it to select the buttons that the subsequent methods will take action on. There is also a <a href=
|
||||||
|
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> method that can be used to select multiple buttons
|
||||||
|
(the DataTables API makes <a href="https://datatables.net/manual/api#Plural-/-Singular">significant use of this plural / singular distinction</a>).</p>
|
||||||
|
<p>The <a href="//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a> used in this
|
||||||
|
example is a simple index selector - button 1 and button 2. Based on the number of rows selected the enablement state is adjusted. The first button is enabled when
|
||||||
|
there is only one row selected, the second when one or more rows are selected.</p>
|
||||||
|
<p>Note that the Select library provides a number of button types such as <a href="//datatables.net/reference/button/selected"><code class="button" title=
|
||||||
|
"Select button type">selected</code></a> and <a href="//datatables.net/reference/button/selectedSingle"><code class="button" title=
|
||||||
|
"Select button type">selectedSingle</code></a> that provide this enable / disabled option without the additional code shown in this example.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
var table = $('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
select: true,
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Row selected data',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
alert(
|
||||||
|
'Row data: '+
|
||||||
|
JSON.stringify( dt.row( { selected: true } ).data() )
|
||||||
|
);
|
||||||
|
},
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Count rows selected',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
alert( 'Rows: '+ dt.rows( { selected: true } ).count() );
|
||||||
|
},
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.on( 'select', function () {
|
||||||
|
var selectedRows = table.rows( { selected: true } ).count();
|
||||||
|
|
||||||
|
table.button( 0 ).enable( selectedRows === 1 );
|
||||||
|
table.button( 1 ).enable( selectedRows > 0 );
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Select/js/dataTables.select.js">../../../Select/js/dataTables.select.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.css</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../Select/css/select.dataTables.css">../../../Select/css/select.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">API</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li class="active">
|
||||||
|
<a href="./enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
871
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/group.html
vendored
Normal file
871
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/group.html
vendored
Normal file
@ -0,0 +1,871 @@
|
|||||||
|
<!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>Buttons example - Group selection</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.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 table = $('#example').DataTable();
|
||||||
|
|
||||||
|
new $.fn.dataTable.Buttons( table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Button 1',
|
||||||
|
action: function ( e, dt, node, conf ) {
|
||||||
|
console.log( 'Button 1 clicked on' );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Button 2',
|
||||||
|
action: function ( e, dt, node, conf ) {
|
||||||
|
console.log( 'Button 2 clicked on' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.buttons( 0, null ).container().prependTo(
|
||||||
|
table.table().container()
|
||||||
|
);
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Group selection</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Multiple button sets can coexist together sharing the same DataTable as a host. When using the API you need the ability to select one, or more, of those groups,
|
||||||
|
and thus the buttons in them to be able to take whatever action is required. This is provided through the <a href=
|
||||||
|
"//datatables.net/reference/type/button-group-selector"><code class="type" title="Javascript parameter type">button-group-selector</code></a> data type of the
|
||||||
|
<a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> and <a href=
|
||||||
|
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> methods.</p>
|
||||||
|
<p>The group selector, and the individual button selector (<a href="//datatables.net/reference/type/button-selector"><code class="type" title=
|
||||||
|
"Javascript parameter type">button-selector</code></a>) give the ability to select any button or buttons in any group or groups of buttons. Actions can also be
|
||||||
|
taken on a whole group of buttons.</p>
|
||||||
|
<p>This example shows Buttons being constructed using the <code>new $.fn.dataTable.Buttons</code> construct and then the container node that holds all of the
|
||||||
|
created buttons obtained via the <a href="//datatables.net/reference/api/buttons().container()"><code class="api" title=
|
||||||
|
"Buttons API method">buttons().container()</code></a> method. Note that the function is called with two parameters: <code>0</code> and <code>null</code>. The
|
||||||
|
<code>0</code> is the <a href="//datatables.net/reference/type/button-group-selector"><code class="type" title=
|
||||||
|
"Javascript parameter type">button-group-selector</code></a> option (i.e. select BUttons instance 0) and the second parameter is the <a href=
|
||||||
|
"//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a> option. This is important as if a
|
||||||
|
single parameter is passed into the <a href="//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> or <a href=
|
||||||
|
"//datatables.net/reference/api/buttons()"><code class="api" title="Buttons API method">buttons()</code></a> methods it is treated as a <a href=
|
||||||
|
"//datatables.net/reference/type/button-selector"><code class="type" title="Javascript parameter type">button-selector</code></a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
var table = $('#example').DataTable();
|
||||||
|
|
||||||
|
new $.fn.dataTable.Buttons( table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Button 1',
|
||||||
|
action: function ( e, dt, node, conf ) {
|
||||||
|
console.log( 'Button 1 clicked on' );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Button 2',
|
||||||
|
action: function ( e, dt, node, conf ) {
|
||||||
|
console.log( 'Button 2 clicked on' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
table.buttons( 0, null ).container().prependTo(
|
||||||
|
table.table().container()
|
||||||
|
);
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">API</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/index.html
vendored
Normal file
60
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/index.html
vendored
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<!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="../../../../examples/resources/syntax/shCore.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||||
|
</script>
|
||||||
|
<title>Buttons examples - API</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>API</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The Buttons API is tightly integrated with DataTables own API, building on the same style and interaction. With the API it is possible to manipulate individual
|
||||||
|
buttons and groups of buttons, altering their characteristics and behaviour.</p>
|
||||||
|
<p>The examples in this section show how the Buttons API can be used.</p>
|
||||||
|
</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">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./group.html">Group selection</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
850
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/text.html
vendored
Normal file
850
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/api/text.html
vendored
Normal file
@ -0,0 +1,850 @@
|
|||||||
|
<!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>Buttons example - Dynamic text</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'My button',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
this.text( 'My button ('+config.counter+')' );
|
||||||
|
config.counter++;
|
||||||
|
},
|
||||||
|
counter: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Dynamic text</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>This example demonstrates Buttons' ability to dynamically set the text of buttons through the <a href=
|
||||||
|
"//datatables.net/reference/api/button().text()"><code class="api" title="Buttons API method">button().text()</code></a> method. Here the button's text will be
|
||||||
|
updated to indicate the number of times it has been clicked upon.</p>
|
||||||
|
<p>There are also two other important aspects of the Buttons API demonstrated here:</p>
|
||||||
|
<ol class="markdown">
|
||||||
|
<li>The <a href="//datatables.net/reference/option/buttons.buttons.action"><code class="option" title=
|
||||||
|
"Buttons initialisation option">buttons.buttons.action</code></a> method is executed in the scope of the <a href=
|
||||||
|
"//datatables.net/reference/api/button()"><code class="api" title="Buttons API method">button()</code></a> object for the button in question. The result is
|
||||||
|
that the button methods such as <a href="//datatables.net/reference/api/button().text()"><code class="api" title=
|
||||||
|
"Buttons API method">button().text()</code></a> are available under <code>this</code> - <code>this.text()</code> in this case.
|
||||||
|
</li>
|
||||||
|
<li>The <code>config</code> object passed in as the forth parameter to the <code>action</code> method is the button configuration. In this example
|
||||||
|
<code>counter</code> is set to 1 initially and that parameter can continue to be used by the button (self-referencing effectively).</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'My button',
|
||||||
|
action: function ( e, dt, node, config ) {
|
||||||
|
this.text( 'My button ('+config.counter+')' );
|
||||||
|
config.counter++;
|
||||||
|
},
|
||||||
|
counter: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">API</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,869 @@
|
|||||||
|
<!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>Buttons example - Column groups</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'Office info',
|
||||||
|
show: [ 1, 2 ],
|
||||||
|
hide: [ 3, 4, 5 ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'HR info',
|
||||||
|
show: [ 3, 4, 5 ],
|
||||||
|
hide: [ 1, 2 ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'Show all',
|
||||||
|
show: ':hidden'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Column groups</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>When working with column visibility you may wish to present a control to the end user that provides the ability to set various columns to both show and hide at
|
||||||
|
the same time - allowing grouping to occur. The <a href="//datatables.net/reference/button/colvisGroup"><code class="button" title=
|
||||||
|
"Buttons button type">colvisGroup</code></a> button type provides this ability for Buttons. The <code>show</code> and <code>hide</code> parameters of this button
|
||||||
|
are both <a href="//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a> types defining
|
||||||
|
the columns in the table that should be shown or hidden respectively. If a column is not defined in either, its visibility is not altered.</p>
|
||||||
|
<p>This example shows three uses of the <a href="//datatables.net/reference/button/colvisGroup"><code class="button" title=
|
||||||
|
"Buttons button type">colvisGroup</code></a> button type:</p>
|
||||||
|
<ul class="markdown">
|
||||||
|
<li>Grouping - show columns 0, 1, 2 and hide the others</li>
|
||||||
|
<li>Grouping - show columns 0, 2, 3, 4 and hide the others</li>
|
||||||
|
<li>Show all</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'Office info',
|
||||||
|
show: [ 1, 2 ],
|
||||||
|
hide: [ 3, 4, 5 ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'HR info',
|
||||||
|
show: [ 3, 4, 5 ],
|
||||||
|
hide: [ 1, 2 ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'colvisGroup',
|
||||||
|
text: 'Show all',
|
||||||
|
show: ':hidden'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,838 @@
|
|||||||
|
<!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>Buttons example - Customisation of column button text</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [ {
|
||||||
|
extend: 'colvis',
|
||||||
|
columnText: function ( dt, idx, title ) {
|
||||||
|
return (idx+1)+': '+title;
|
||||||
|
}
|
||||||
|
} ]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Customisation of column button text</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>At times it can be useful to control the text that is used for the display of each button in the <a href="//datatables.net/reference/button/colvis"><code class=
|
||||||
|
"button" title="DataTables button type">colvis</code></a> list. The <code>columnText</code> option of the <a href=
|
||||||
|
"//datatables.net/reference/button/colvis"><code class="button" title="DataTables button type">colvis</code></a> button type provides exactly that ability, as a
|
||||||
|
callback function.</p>
|
||||||
|
<p>The example below shows the column number being prefixed to the column title. As this is a function, virtually any logic could be used (performing an action
|
||||||
|
only on column indexes higher than 3 for example). You also have access to the DataTables API instance, so you can use <code>dt.column( idx ).node()</code> to get
|
||||||
|
the header <code class="tag" title="HTML tag">th/td</code> element if needed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [ {
|
||||||
|
extend: 'colvis',
|
||||||
|
columnText: function ( dt, idx, title ) {
|
||||||
|
return (idx+1)+': '+title;
|
||||||
|
}
|
||||||
|
} ]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,849 @@
|
|||||||
|
<!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>Buttons example - Select columns</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
columnDefs: [
|
||||||
|
{
|
||||||
|
targets: 1,
|
||||||
|
className: 'noVis'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
columns: ':not(.noVis)'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Select columns</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button type provides a
|
||||||
|
<code>columns</code> option to allow you to select what columns should be included in the column visibility control list. This option is a <a href=
|
||||||
|
"//datatables.net/reference/type/column-selector"><code class="type" title="DataTables parameter type">column-selector</code></a> and thus a number of methods to
|
||||||
|
select the columns included are available including jQuery selectors and data index selectors.</p>
|
||||||
|
<p>This example shows a jQuery selector being used to exclude the first column in the table - note that the <em>Name</em> column is not included in the column
|
||||||
|
visibility list.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
columnDefs: [
|
||||||
|
{
|
||||||
|
targets: 1,
|
||||||
|
className: 'noVis'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
columns: ':not(.noVis)'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,830 @@
|
|||||||
|
<!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>Buttons example - Visibility toggle buttons</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'columnsToggle'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Visibility toggle buttons</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> type will insert the buttons into a
|
||||||
|
<a href="//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button automatically, but you may
|
||||||
|
wish to have the column visibility buttons as buttons that are always visible. This is possible using the <a href=
|
||||||
|
"//datatables.net/reference/button/columnsToggle"><code class="button" title="Buttons button type">columnsToggle</code></a> button type, as shown in this
|
||||||
|
example.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'columnsToggle'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,76 @@
|
|||||||
|
<!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="//code.jquery.com/jquery-1.12.4.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>BUttons examples - Column visibility examples</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>BUttons example <span>Column visibility examples</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The column visibility plug-in for the DataTables Buttons extension provides a suite of buttons that can be used to very easily control the visibility of columns
|
||||||
|
in a table.</p>
|
||||||
|
</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">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
838
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/layout.html
vendored
Normal file
838
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/layout.html
vendored
Normal file
@ -0,0 +1,838 @@
|
|||||||
|
<!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>Buttons example - Multi-column layout</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
collectionLayout: 'fixed two-column'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Multi-column layout</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button has a
|
||||||
|
<code>collectionLayout</code> option that can be used to control the layout of the buttons shown in the collection. As the <a href=
|
||||||
|
"//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button extends the collection button, this option is
|
||||||
|
also available for the column visibility controls.</p>
|
||||||
|
<p>This example shows a fixed, two column layout. Please see the <code>collectionLayout</code> option in the <a href=
|
||||||
|
"//datatables.net/reference/button/collection"><code class="button" title="Buttons button type">collection</code></a> button documentation for the full list of
|
||||||
|
options.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
collectionLayout: 'fixed two-column'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,848 @@
|
|||||||
|
<!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>Buttons example - Restore column visibility</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
postfixButtons: [ 'colvisRestore' ]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
columnDefs: [
|
||||||
|
{
|
||||||
|
targets: -1,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Restore column visibility</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/button/colvisRestore"><code class="button" title="Buttons button type">colvisRestore</code></a> provides a single click
|
||||||
|
button that will restore the table's column visibility to the same as when the DataTable was initialised.</p>
|
||||||
|
<p>This example shows the <a href="//datatables.net/reference/button/colvis"><code class="button" title="Buttons button type">colvis</code></a> button collection
|
||||||
|
augmented with the <a href="//datatables.net/reference/button/colvisRestore"><code class="button" title="Buttons button type">colvisRestore</code></a> button type
|
||||||
|
through the <code>postfixButtons</code> option to add the restore button to the end of the column visibility collection.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'colvis',
|
||||||
|
postfixButtons: [ 'colvisRestore' ]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
columnDefs: [
|
||||||
|
{
|
||||||
|
targets: -1,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
831
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/simple.html
vendored
Normal file
831
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/simple.html
vendored
Normal file
@ -0,0 +1,831 @@
|
|||||||
|
<!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>Buttons example - Basic column visibility</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'colvis'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Basic column visibility</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The column visibility plug-in for Buttons provides a set of buttons that can be used to easily give the end user the ability to set the visibility of
|
||||||
|
columns.</p>
|
||||||
|
<p>The primary button type for column visibility controls is the <a href="//datatables.net/reference/button/colvis"><code class="button" title=
|
||||||
|
"Buttons button type">colvis</code></a> type which adds a collection (<a href="//datatables.net/reference/button/collection"><code class="button" title=
|
||||||
|
"Buttons button type">collection</code></a>) of buttons, one for each of the columns in the table, with the end user having the ability to toggle these
|
||||||
|
columns.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'colvis'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li class="active">
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<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,832 @@
|
|||||||
|
<!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>Buttons example - State saving</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
stateSave: true,
|
||||||
|
buttons: [
|
||||||
|
'colvis'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>State saving</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Button's column visibility module works seamlessly with DataTables' state saving option (<a href="//datatables.net/reference/option/stateSave"><code class=
|
||||||
|
"option" title="DataTables initialisation option">stateSave</code></a>). All you need to do is enable both the column visibility buttons and state saving, as shown
|
||||||
|
in this example.</p>
|
||||||
|
<p>To demonstrate this ability, simple hide a few columns and then refresh the table. The columns you selected to be hidden will remain hidden and the button
|
||||||
|
states will reflect this.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
stateSave: true,
|
||||||
|
buttons: [
|
||||||
|
'colvis'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
836
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/text.html
vendored
Normal file
836
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/column_visibility/text.html
vendored
Normal file
@ -0,0 +1,836 @@
|
|||||||
|
<!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>Buttons example - Internationalisation</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.colVis.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: 'Bfrtip',
|
||||||
|
buttons: [ 'colvis' ],
|
||||||
|
language: {
|
||||||
|
buttons: {
|
||||||
|
colvis: 'Change columns'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Internationalisation</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>Like all buttons available through the Buttons extension for DataTables, the button text can be modified - to suit your needs. This is always possible using the
|
||||||
|
<a href="//datatables.net/reference/option/buttons.buttons.text"><code class="option" title="Buttons initialisation option">buttons.buttons.text</code></a> option
|
||||||
|
and each button type can also make use of the DataTables <a href="//datatables.net/reference/option/language"><code class="option" title=
|
||||||
|
"DataTables initialisation option">language</code></a> configuration options.</p>
|
||||||
|
<p>In this case the <code>language.buttons.colvis</code> option is used to specify the text shown in the collection button.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [ 'colvis' ],
|
||||||
|
language: {
|
||||||
|
buttons: {
|
||||||
|
colvis: 'Change columns'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.colVis.js">../../js/buttons.colVis.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../flash/index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../flash/simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../flash/swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
852
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/copyi18n.html
vendored
Normal file
852
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/copyi18n.html
vendored
Normal file
@ -0,0 +1,852 @@
|
|||||||
|
<!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>Buttons example - Copy button internationalisation</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'copyFlash'
|
||||||
|
],
|
||||||
|
language: {
|
||||||
|
buttons: {
|
||||||
|
copyTitle: 'Copier au clipboard',
|
||||||
|
copySuccess: {
|
||||||
|
_: 'Copiés %d rangs',
|
||||||
|
1: 'Copié 1 rang'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Copy button internationalisation</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The <a href="//datatables.net/reference/button/copyFlash"><code class="button" title="Buttons button type">copyFlash</code></a> will immediately copy the
|
||||||
|
exported data from the DataTable to the user's clipboard. To let the user know that something has happened the button will show a message on the page stating that
|
||||||
|
this has occurred.</p>
|
||||||
|
<p>The message shown to the end user can be customised using the <a href="//datatables.net/reference/option/language"><code class="option" title=
|
||||||
|
"DataTables initialisation option">language</code></a> configuration option of DataTables. Specifically the <code>buttons.copyTitle</code> and
|
||||||
|
<code>buttons.copyInfo</code> options can be set.</p>
|
||||||
|
<p>This example uses these parameters to set French language strings for the copy message.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'copyFlash'
|
||||||
|
],
|
||||||
|
language: {
|
||||||
|
buttons: {
|
||||||
|
copyTitle: 'Copier au clipboard',
|
||||||
|
copySuccess: {
|
||||||
|
_: 'Copiés %d rangs',
|
||||||
|
1: 'Copié 1 rang'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.flash.js">../../js/buttons.flash.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
849
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/filename.html
vendored
Normal file
849
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/filename.html
vendored
Normal file
@ -0,0 +1,849 @@
|
|||||||
|
<!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>Buttons example - File name</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.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: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'excelFlash',
|
||||||
|
filename: 'Data export'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfFlash',
|
||||||
|
filename: 'Data export'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>File name</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>By default the name of the file created by the <a href="//datatables.net/reference/button/excelFlash"><code class="button" title=
|
||||||
|
"Buttons button type">excelFlash</code></a>, <a href="//datatables.net/reference/button/csvFlash"><code class="button" title=
|
||||||
|
"Buttons button type">csvFlash</code></a> and <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title=
|
||||||
|
"Buttons button type">pdfFlash</code></a> button types will automatically be taken from the document's <code class="tag" title="HTML tag">title</code> element. It
|
||||||
|
is also possible to set the file name to a specific value using the <code>filename</code> option of these three button types.</p>
|
||||||
|
<p>This example shows the <code>filename</code> option being set for the <a href="//datatables.net/reference/button/excelFlash"><code class="button" title=
|
||||||
|
"Buttons button type">excelFlash</code></a> and <a href="//datatables.net/reference/button/pdfFlash"><code class="button" title=
|
||||||
|
"Buttons button type">pdfFlash</code></a> buttons.</p>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html"></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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'excelFlash',
|
||||||
|
filename: 'Data export'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfFlash',
|
||||||
|
filename: 'Data export'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.flash.js">../../js/buttons.flash.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 language-css"></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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
875
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/hidden.html
vendored
Normal file
875
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/hidden.html
vendored
Normal file
@ -0,0 +1,875 @@
|
|||||||
|
<!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>Buttons example - Hidden initialisation</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/buttons.dataTables.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">
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/dataTables.buttons.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../js/buttons.flash.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').wrap('<div id="hide" style="display:none"/>');
|
||||||
|
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'copyFlash',
|
||||||
|
'csvFlash',
|
||||||
|
'excelFlash',
|
||||||
|
'pdfFlash'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
$('#vis').one( 'click', function () {
|
||||||
|
$('#hide').css( 'display', 'block' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
$('#resize').on( 'click', function () {
|
||||||
|
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Hidden initialisation</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>When Flash buttons are created the Flash movie clip inside of them (which provides the export action) is automatically sized to fit the button. However, if the
|
||||||
|
table is initialised while hidden the buttons will have zero height and width. As a result, when the table is made visible the Flash movies must be resized to fit
|
||||||
|
the buttons. This is done using the <a href="//datatables.net/reference/api/buttons.resize()"><code class="api" title=
|
||||||
|
"Buttons API method">buttons.resize()</code></a> method (note that this method is only available when the Flash export buttons plug-in for Buttons is
|
||||||
|
installed).</p>
|
||||||
|
<p>This example shows a table that is initially hidden. If you make it visible and click the export buttons nothing will happen. Click the <em>Resize buttons</em>
|
||||||
|
option and the export buttons will start to operate.</p>
|
||||||
|
<p>A resize is often required when the table is hidden in a tab when initialised - for example if using Bootstrap tabs you might use:</p>
|
||||||
|
<pre><code class="multiline language-js">$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||||
|
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
|
||||||
|
})
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="demo-html">
|
||||||
|
<button id="vis">Make table visible</button><button id="resize">Resize buttons</button>
|
||||||
|
</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>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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 language-js">$(document).ready(function() {
|
||||||
|
$('#example').wrap('<div id="hide" style="display:none"/>');
|
||||||
|
|
||||||
|
$('#example').DataTable( {
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: [
|
||||||
|
'copyFlash',
|
||||||
|
'csvFlash',
|
||||||
|
'excelFlash',
|
||||||
|
'pdfFlash'
|
||||||
|
]
|
||||||
|
} );
|
||||||
|
|
||||||
|
$('#vis').one( 'click', function () {
|
||||||
|
$('#hide').css( 'display', 'block' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
$('#resize').on( 'click', function () {
|
||||||
|
$.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();
|
||||||
|
} );
|
||||||
|
} );</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="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/dataTables.buttons.js">../../js/dataTables.buttons.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../../js/buttons.flash.js">../../js/buttons.flash.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 language-css">button {
|
||||||
|
margin: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
}</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/buttons.dataTables.css">../../css/buttons.dataTables.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="../initialisation/index.html">Basic initialisation</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/simple.html">Basic initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/export.html">File export</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/custom.html">Custom button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/className.html">Class names</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/keys.html">Keyboard activation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections.html">Collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-sub.html">Multi-level collections</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/collections-autoClose.html">Auto close collection</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/plugins.html">Plug-ins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/new.html">`new` initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/multiple.html">Multiple button groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../initialisation/pageLength.html">Page length</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../html5/index.html">HTML 5 data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../html5/simple.html">HTML5 export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/columns.html">Column selectors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-orthogonal.html">Format output data - orthogonal data</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/outputFormat-function.html">Format output data - export options</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelTextBold.html">Excel - Bold text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelCellShading.html">Excel - Cell background</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/excelBorder.html">Excel - Customise borders</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfMessage.html">PDF - message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfPage.html">PDF - page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfImage.html">PDF - image</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/pdfOpen.html">PDF - open in new window</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../html5/customFile.html">Custom file (JSON)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="./index.html">Flash data export</a></h3>
|
||||||
|
<ul class="toc active">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="./hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./swfPath.html">SWF file location</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../column_visibility/index.html">Column visibility</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/simple.html">Basic column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/layout.html">Multi-column layout</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/text.html">Internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnText.html">Customisation of column button text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/restore.html">Restore column visibility</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columns.html">Select columns</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnsToggle.html">Visibility toggle buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/columnGroups.html">Column groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../column_visibility/stateSave.html">State saving</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../print/index.html">Print</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../print/simple.html">Print button</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/message.html">Custom message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/columns.html">Export options - column selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/select.html">Export options - row selector</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/autoPrint.html">Disable auto print</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../print/customisation.html">Customisation of the print view window</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../api/index.html">API</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../api/enable.html">Enable / disable</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/text.html">Dynamic text</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/addRemove.html">Adding and removing buttons dynamically</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../api/group.html">Group selection</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="toc-group">
|
||||||
|
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap.html">Bootstrap 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/foundation.html">Foundation styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/semanticui.html">Semantic UI styling</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../styling/icons.html">Icons</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/index.html
vendored
Normal file
75
helpdesk/static/helpdesk/vendor/datatables/extensions/Buttons/examples/flash/index.html
vendored
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!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="../../../../examples/resources/syntax/shCore.js">
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||||
|
</script>
|
||||||
|
<title>Buttons examples - Flash export buttons</title>
|
||||||
|
</head>
|
||||||
|
<body class="dt-example">
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h1>Buttons example <span>Flash export buttons</span></h1>
|
||||||
|
<div class="info">
|
||||||
|
<p>The Flash export buttons provide an option for legacy browsers (IE9-) to create and save files on the client-side, without any server interaction required.</p>
|
||||||
|
<p>The HTML5 button types are preferred over the Flash buttons as they do not require Adobe Flash and are generally more configurable, however, not all browsers
|
||||||
|
provide the functionality required for those buttons.</p>
|
||||||
|
<p>If making use of these buttons in browsers which do not have Flash installed and enabled these buttons will not appear on the end user's page (no errors will be
|
||||||
|
generated).</p>
|
||||||
|
<p>The examples in this section explore the options available for the Flash export buttons.</p>
|
||||||
|
</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">Flash data export</a></h3>
|
||||||
|
<ul class="toc">
|
||||||
|
<li>
|
||||||
|
<a href="./simple.html">Flash export buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./tsv.html">Tab separated values</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./filename.html">File name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./copyi18n.html">Copy button internationalisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfMessage.html">PDF message</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./pdfPage.html">Page size and orientation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./hidden.html">Hidden initialisation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./swfPath.html">SWF file location</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/extensions">extensions</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-2017<br>
|
||||||
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user