1
0
mirror of https://github.com/pierre42100/ComunicWeb synced 2025-07-12 22:22:54 +00:00

First commit

This commit is contained in:
Pierre
2017-01-04 19:14:27 +01:00
parent 665fbbbb6a
commit d8e5c85b58
3051 changed files with 441706 additions and 0 deletions
assets
adminLTE
bootstrap
dist
plugins
bootstrap-slider
bootstrap-wysihtml5
chartjs
ckeditor
CHANGES.mdLICENSE.mdREADME.md
adapters
build-config.jsckeditor.jsconfig.jscontents.css
lang
plugins
samples
skins
styles.js
colorpicker
datatables
dataTables.bootstrap.cssdataTables.bootstrap.jsdataTables.bootstrap.min.js
extensions
AutoFill
ColReorder
ColVis
FixedColumns
FixedHeader
KeyTable
Responsive
Scroller
TableTools
images
jquery.dataTables.cssjquery.dataTables.jsjquery.dataTables.min.cssjquery.dataTables.min.jsjquery.dataTables_themeroller.css
datepicker
daterangepicker
fastclick
flot
font-awesome
.gitignore.npmignoreCONTRIBUTING.mdGemfileGemfile.lockHELP-US-OUT.txtREADME.md_config.ymlbower.jsoncomponent.jsoncomposer.json
css
fonts
less
package.json
scss
src
3.2.1
CNAMEMakefile
assets
css
font-awesome.zip
font-awesome
ico
img
js
less
cheatsheet
community
design.html
examples
get-started
icon
adjust
adn
align-center
align-justify
align-left
align-right
ambulance
anchor
android
angle-down
angle-left
angle-right
angle-up
apple
archive
arrow-down
arrow-left
arrow-right
arrow-up
asterisk
backward
ban-circle
bar-chart
barcode
beaker
beer
bell-alt
bell
bitbucket-sign
bitbucket
bold
bolt
book
bookmark-empty
bookmark
briefcase
btc
bug
building
bullhorn
bullseye
calendar-empty
calendar
camera-retro
camera
caret-down
caret-left
caret-right
caret-up
certificate
check-empty
check-minus
check-sign
check
chevron-down
chevron-left
chevron-right
chevron-sign-down
chevron-sign-left
chevron-sign-right
chevron-sign-up
chevron-up
circle-arrow-down
circle-arrow-left
circle-arrow-right
circle-arrow-up
circle-blank
circle
cloud-download
cloud-upload
cloud
cny
code-fork
code
coffee
cog
cogs
collapse-alt
collapse-top
collapse
columns
comment-alt
comment
comments-alt
comments
compass
copy
credit-card
crop
css3
cut
dashboard
desktop
double-angle-down
double-angle-left
double-angle-right
double-angle-up
download-alt
download
dribbble
dropbox
edit-sign
edit
eject
ellipsis-horizontal
ellipsis-vertical
envelope-alt
envelope
eraser
eur
exchange
exclamation-sign
exclamation
expand-alt
expand
external-link-sign
external-link
eye-close
eye-open
facebook-sign
facebook
facetime-video
fast-backward
fast-forward
female
fighter-jet
file-alt
file-text-alt
file-text
file
film
filter
fire-extinguisher
fire
flag-alt
flag-checkered
flag
flickr
folder-close-alt
folder-close
folder-open-alt
folder-open
font
food
forward
foursquare
frown
fullscreen
gamepad
gbp
gift
github-alt
github-sign
github
gittip
glass
globe
google-plus-sign
google-plus
group
h-sign
hand-down
hand-left
hand-right
hand-up
hdd
headphones
heart-empty
heart
home
hospital
html5
inbox
indent-left
indent-right
info-sign
info
inr
instagram
italic
jpy
key
keyboard
krw
laptop
leaf
legal
lemon
level-down
level-up
lightbulb
link
linkedin-sign
linkedin
linux
list-alt
list-ol
list-ul
list
location-arrow
lock
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
magic
magnet
mail-reply-all
male
map-marker
maxcdn
medkit
meh
microphone-off
microphone
minus-sign-alt
minus-sign
minus
mobile-phone
money
moon
move
music
off
ok-circle
ok-sign
ok
paper-clip
paste
pause
pencil
phone-sign
phone
picture
pinterest-sign
pinterest
plane
play-circle
play-sign
play
plus-sign-alt
plus-sign
plus
print
pushpin
puzzle-piece
qrcode
question-sign
question
quote-left
quote-right
random
refresh
remove-circle
remove-sign
remove
renren
reorder
repeat
reply-all
reply
resize-full
resize-horizontal
resize-small
resize-vertical
retweet
road
rocket
rss-sign
rss
save
screenshot
search
share-alt
share-sign
share
shield
shopping-cart
sign-blank
signal
signin
signout
sitemap
skype
smile
sort-by-alphabet-alt
sort-by-alphabet
sort-by-attributes-alt
sort-by-attributes
sort-by-order-alt
sort-by-order
sort-down
sort-up
sort
spinner
stackexchange
star-empty
star-half-empty
star-half
star
step-backward
step-forward
stethoscope
stop
strikethrough
subscript
suitcase
sun
superscript
table
tablet
tag
tags
tasks
terminal
text-height
text-width
th-large
th-list
th
thumbs-down-alt
thumbs-down
thumbs-up-alt
thumbs-up
ticket
time
tint
trash
trello
trophy
truck
tumblr-sign
tumblr
twitter-sign
twitter
umbrella
underline
undo
unlink
unlock-alt
unlock
upload-alt
upload
usd
user-md
user
vk
volume-down
volume-off
volume-up
warning-sign
weibo
windows
wrench
xing-sign
xing
youtube-play
youtube-sign
youtube
zoom-in
zoom-out
icons.yml
icons
index.html
license
test
whats-new
CNAMEMakefileREADME.md-nobuild
_includes
_layouts
_plugins
assets
css
font-awesome
ico
img
js
less
cheatsheet.htmlcommunity.htmldesign.htmlexamples.htmlget-started.htmlglyphicons-test.htmlicons.htmlicons.ymlindex.htmllicense.htmltest-2.3.2.htmltest.htmlthanks.htmlwhats-new.html
fullcalendar
googleFonts
iCheck
input-mask
ionicons
.gitignoreLICENSEbower.json
builder
cheatsheet.htmlcomponent.jsoncomposer.json
css
fonts
less
png
512
alert-circled.pngalert.pngandroid-add-contact.pngandroid-add.pngandroid-alarm.pngandroid-archive.pngandroid-arrow-back.pngandroid-arrow-down-left.pngandroid-arrow-down-right.pngandroid-arrow-forward.pngandroid-arrow-up-left.pngandroid-arrow-up-right.pngandroid-battery.pngandroid-book.pngandroid-calendar.pngandroid-call.pngandroid-camera.pngandroid-chat.pngandroid-checkmark.pngandroid-clock.pngandroid-close.pngandroid-contact.pngandroid-contacts.pngandroid-data.pngandroid-developer.pngandroid-display.pngandroid-download.pngandroid-drawer.pngandroid-dropdown.pngandroid-earth.pngandroid-folder.pngandroid-forums.pngandroid-friends.pngandroid-hand.pngandroid-image.pngandroid-inbox.pngandroid-information.pngandroid-keypad.pngandroid-lightbulb.pngandroid-locate.pngandroid-location.pngandroid-mail.pngandroid-microphone.pngandroid-mixer.pngandroid-more.pngandroid-note.pngandroid-playstore.pngandroid-printer.pngandroid-promotion.pngandroid-reminder.pngandroid-remove.pngandroid-search.pngandroid-send.pngandroid-settings.pngandroid-share.pngandroid-social-user.pngandroid-social.pngandroid-sort.pngandroid-stair-drawer.pngandroid-star.pngandroid-stopwatch.pngandroid-storage.pngandroid-system-back.pngandroid-system-home.pngandroid-system-windows.pngandroid-timer.pngandroid-trash.pngandroid-user-menu.pngandroid-volume.pngandroid-wifi.pngaperture.pngarchive.pngarrow-down-a.pngarrow-down-b.pngarrow-down-c.pngarrow-expand.pngarrow-graph-down-left.pngarrow-graph-down-right.pngarrow-graph-up-left.pngarrow-graph-up-right.pngarrow-left-a.pngarrow-left-b.pngarrow-left-c.pngarrow-move.pngarrow-resize.pngarrow-return-left.pngarrow-return-right.pngarrow-right-a.pngarrow-right-b.pngarrow-right-c.pngarrow-shrink.pngarrow-swap.pngarrow-up-a.pngarrow-up-b.pngarrow-up-c.pngasterisk.pngat.pngbag.pngbattery-charging.pngbattery-empty.pngbattery-full.pngbattery-half.pngbattery-low.pngbeaker.pngbeer.pngbluetooth.pngbonfire.pngbookmark.pngbriefcase.pngbug.pngcalculator.pngcalendar.pngcamera.pngcard.pngcash.pngchatbox-working.pngchatbox.pngchatboxes.pngchatbubble-working.pngchatbubble.pngchatbubbles.pngcheckmark-circled.pngcheckmark-round.pngcheckmark.pngchevron-down.pngchevron-left.pngchevron-right.pngchevron-up.pngclipboard.pngclock.pngclose-circled.pngclose-round.pngclose.pngclosed-captioning.pngcloud.pngcode-download.pngcode-working.pngcode.pngcoffee.pngcompass.pngcompose.pngconnection-bars.pngcontrast.pngcube.pngdisc.pngdocument-text.pngdocument.pngdrag.pngearth.pngedit.pngegg.pngeject.pngemail.pngeye-disabled.pngeye.pngfemale.pngfiling.pngfilm-marker.pngfireball.pngflag.pngflame.pngflash-off.pngflash.pngflask.pngfolder.pngfork-repo.pngfork.pngforward.pngfunnel.pnggame-controller-a.pnggame-controller-b.pnggear-a.pnggear-b.pnggrid.pnghammer.pnghappy.pngheadphone.pngheart-broken.pngheart.pnghelp-buoy.pnghelp-circled.pnghelp.pnghome.pngicecream.pngicon-social-google-plus-outline.pngicon-social-google-plus.pngimage.pngimages.pnginformation-circled.pnginformation.pngionic.pngios7-alarm-outline.pngios7-alarm.pngios7-albums-outline.pngios7-albums.pngios7-americanfootball-outline.pngios7-americanfootball.pngios7-analytics-outline.pngios7-analytics.pngios7-arrow-back.pngios7-arrow-down.pngios7-arrow-forward.pngios7-arrow-left.pngios7-arrow-right.pngios7-arrow-thin-down.pngios7-arrow-thin-left.pngios7-arrow-thin-right.pngios7-arrow-thin-up.pngios7-arrow-up.pngios7-at-outline.pngios7-at.pngios7-barcode-outline.pngios7-barcode.pngios7-baseball-outline.pngios7-baseball.pngios7-basketball-outline.pngios7-basketball.pngios7-bell-outline.pngios7-bell.pngios7-bolt-outline.pngios7-bolt.pngios7-bookmarks-outline.pngios7-bookmarks.pngios7-box-outline.pngios7-box.pngios7-briefcase-outline.pngios7-briefcase.pngios7-browsers-outline.pngios7-browsers.pngios7-calculator-outline.pngios7-calculator.pngios7-calendar-outline.pngios7-calendar.pngios7-camera-outline.pngios7-camera.pngios7-cart-outline.pngios7-cart.pngios7-chatboxes-outline.pngios7-chatboxes.pngios7-chatbubble-outline.pngios7-chatbubble.pngios7-checkmark-empty.pngios7-checkmark-outline.pngios7-checkmark.pngios7-circle-filled.pngios7-circle-outline.pngios7-clock-outline.pngios7-clock.pngios7-close-empty.pngios7-close-outline.pngios7-close.pngios7-cloud-download-outline.pngios7-cloud-download.pngios7-cloud-outline.pngios7-cloud-upload-outline.pngios7-cloud-upload.pngios7-cloud.pngios7-cloudy-night-outline.pngios7-cloudy-night.pngios7-cloudy-outline.pngios7-cloudy.pngios7-cog-outline.pngios7-cog.pngios7-compose-outline.pngios7-compose.pngios7-contact-outline.pngios7-contact.pngios7-copy-outline.pngios7-copy.pngios7-download-outline.pngios7-download.pngios7-drag.pngios7-email-outline.pngios7-email.pngios7-expand.pngios7-eye-outline.pngios7-eye.pngios7-fastforward-outline.pngios7-fastforward.pngios7-filing-outline.pngios7-filing.pngios7-film-outline.pngios7-film.pngios7-flag-outline.pngios7-flag.pngios7-folder-outline.pngios7-folder.pngios7-football-outline.pngios7-football.pngios7-gear-outline.pngios7-gear.pngios7-glasses-outline.pngios7-glasses.pngios7-heart-outline.pngios7-heart.pngios7-help-empty.pngios7-help-outline.pngios7-help.pngios7-home-outline.pngios7-home.pngios7-infinite-outline.pngios7-infinite.pngios7-information-empty.pngios7-information-outline.pngios7-information.pngios7-ionic-outline.pngios7-keypad-outline.pngios7-keypad.pngios7-lightbulb-outline.pngios7-lightbulb.pngios7-location-outline.pngios7-location.pngios7-locked-outline.pngios7-locked.pngios7-loop-strong.pngios7-loop.pngios7-medkit-outline.pngios7-medkit.pngios7-mic-off.pngios7-mic-outline.pngios7-mic.pngios7-minus-empty.pngios7-minus-outline.pngios7-minus.pngios7-monitor-outline.pngios7-monitor.pngios7-moon-outline.pngios7-moon.pngios7-more-outline.pngios7-more.pngios7-musical-note.pngios7-musical-notes.pngios7-navigate-outline.pngios7-navigate.pngios7-paper-outline.pngios7-paper.pngios7-paperplane-outline.pngios7-paperplane.pngios7-partlysunny-outline.pngios7-partlysunny.pngios7-pause-outline.pngios7-pause.pngios7-paw-outline.pngios7-paw.pngios7-people-outline.pngios7-people.pngios7-person-outline.pngios7-person.pngios7-personadd-outline.pngios7-personadd.pngios7-photos-outline.pngios7-photos.pngios7-pie-outline.pngios7-pie.pngios7-play-outline.pngios7-play.pngios7-plus-empty.pngios7-plus-outline.pngios7-plus.pngios7-pricetag-outline.pngios7-pricetag.pngios7-pricetags-outline.pngios7-pricetags.pngios7-printer-outline.pngios7-printer.pngios7-pulse-strong.pngios7-pulse.pngios7-rainy-outline.pngios7-rainy.pngios7-recording-outline.pngios7-recording.pngios7-redo-outline.pngios7-redo.pngios7-refresh-empty.pngios7-refresh-outline.pngios7-refresh.pngios7-reload.pngios7-reverse-camera-outline.pngios7-reverse-camera.pngios7-rewind-outline.pngios7-rewind.pngios7-search-strong.pngios7-search.pngios7-settings-strong.pngios7-settings.pngios7-shrink.pngios7-skipbackward-outline.pngios7-skipbackward.pngios7-skipforward-outline.pngios7-skipforward.pngios7-snowy.pngios7-speedometer-outline.pngios7-speedometer.pngios7-star-half.pngios7-star-outline.pngios7-star.pngios7-stopwatch-outline.pngios7-stopwatch.pngios7-sunny-outline.pngios7-sunny.pngios7-telephone-outline.pngios7-telephone.pngios7-tennisball-outline.pngios7-tennisball.pngios7-thunderstorm-outline.pngios7-thunderstorm.pngios7-time-outline.pngios7-time.pngios7-timer-outline.pngios7-timer.pngios7-toggle-outline.pngios7-toggle.pngios7-trash-outline.pngios7-trash.pngios7-undo-outline.pngios7-undo.pngios7-unlocked-outline.pngios7-unlocked.pngios7-upload-outline.pngios7-upload.pngios7-videocam-outline.pngios7-videocam.pngios7-volume-high.pngios7-volume-low.pngios7-wineglass-outline.pngios7-wineglass.pngios7-world-outline.pngios7-world.pngipad.pngiphone.pngipod.pngjet.pngkey.pngknife.pnglaptop.pngleaf.pnglevels.pnglightbulb.pnglink.pngload-a.pngload-b.pngload-c.pngload-d.pnglocation.pnglocked.pnglog-in.pnglog-out.pngloop.pngmagnet.pngmale.pngman.pngmap.pngmedkit.pngmerge.pngmic-a.pngmic-b.pngmic-c.pngminus-circled.pngminus-round.pngminus.pngmodel-s.pngmonitor.pngmore.pngmouse.pngmusic-note.pngnavicon-round.pngnavicon.pngnavigate.pngnetwork.pngno-smoking.pngnuclear.pngoutlet.pngpaper-airplane.pngpaperclip.pngpause.pngperson-add.pngperson-stalker.pngperson.pngpie-graph.pngpin.pngpinpoint.pngpizza.pngplane.pngplanet.pngplay.pngplaystation.pngplus-circled.pngplus-round.pngplus.pngpodium.pngpound.pngpower.pngpricetag.pngpricetags.pngprinter.pngpull-request.pngqr-scanner.pngquote.pngradio-waves.pngrecord.pngrefresh.pngreply-all.pngreply.pngribbon-a.pngribbon-b.pngsad.pngscissors.pngsearch.pngsettings.pngshare.pngshuffle.pngskip-backward.pngskip-forward.pngsocial-android-outline.pngsocial-android.pngsocial-apple-outline.pngsocial-apple.pngsocial-bitcoin-outline.pngsocial-bitcoin.pngsocial-buffer-outline.pngsocial-buffer.pngsocial-designernews-outline.pngsocial-designernews.pngsocial-dribbble-outline.pngsocial-dribbble.pngsocial-dropbox-outline.pngsocial-dropbox.pngsocial-facebook-outline.pngsocial-facebook.pngsocial-foursquare-outline.pngsocial-foursquare.pngsocial-freebsd-devil.pngsocial-github-outline.pngsocial-github.pngsocial-google-outline.pngsocial-google.pngsocial-googleplus-outline.pngsocial-googleplus.pngsocial-hackernews-outline.pngsocial-hackernews.pngsocial-instagram-outline.pngsocial-instagram.pngsocial-linkedin-outline.pngsocial-linkedin.pngsocial-pinterest-outline.pngsocial-pinterest.pngsocial-reddit-outline.pngsocial-reddit.pngsocial-rss-outline.pngsocial-rss.pngsocial-skype-outline.pngsocial-skype.pngsocial-tumblr-outline.pngsocial-tumblr.pngsocial-tux.pngsocial-twitter-outline.pngsocial-twitter.pngsocial-usd-outline.pngsocial-usd.pngsocial-vimeo-outline.pngsocial-vimeo.pngsocial-windows-outline.pngsocial-windows.pngsocial-wordpress-outline.pngsocial-wordpress.pngsocial-yahoo-outline.pngsocial-yahoo.pngsocial-youtube-outline.pngsocial-youtube.pngspeakerphone.pngspeedometer.pngspoon.pngstar.pngstats-bars.pngsteam.pngstop.pngthermometer.pngthumbsdown.pngthumbsup.pngtoggle-filled.pngtoggle.pngtrash-a.pngtrash-b.pngtrophy.pngumbrella.pnguniversity.pngunlocked.pngupload.pngusb.pngvideocamera.pngvolume-high.pngvolume-low.pngvolume-medium.pngvolume-mute.pngwand.pngwaterdrop.pngwifi.pngwineglass.pngwoman.pngwrench.pngxbox.png
readme.md
scss
src
alert-circled.svgalert.svgandroid-add-circle.svgandroid-add.svgandroid-alarm-clock.svgandroid-alert.svgandroid-apps.svgandroid-archive.svgandroid-arrow-back.svgandroid-arrow-down.svgandroid-arrow-dropdown-circle.svgandroid-arrow-dropdown.svgandroid-arrow-dropleft-circle.svgandroid-arrow-dropleft.svgandroid-arrow-dropright-circle.svgandroid-arrow-dropright.svgandroid-arrow-dropup-circle.svgandroid-arrow-dropup.svgandroid-arrow-forward.svgandroid-arrow-up.svgandroid-attach.svgandroid-bar.svgandroid-bicycle.svgandroid-boat.svgandroid-bookmark.svgandroid-bulb.svgandroid-bus.svgandroid-calendar.svgandroid-call.svgandroid-camera.svgandroid-cancel.svgandroid-car.svgandroid-cart.svgandroid-chat.svgandroid-checkbox-blank.svgandroid-checkbox-outline-blank.svgandroid-checkbox-outline.svgandroid-checkbox.svgandroid-checkmark-circle.svgandroid-clipboard.svgandroid-close.svgandroid-cloud-circle.svgandroid-cloud-done.svgandroid-cloud-outline.svgandroid-cloud.svgandroid-color-palette.svgandroid-compass.svgandroid-contact.svgandroid-contacts.svgandroid-contract.svgandroid-create.svgandroid-delete.svgandroid-desktop.svgandroid-document.svgandroid-done-all.svgandroid-done.svgandroid-download.svgandroid-drafts.svgandroid-exit.svgandroid-expand.svgandroid-favorite-outline.svgandroid-favorite.svgandroid-film.svgandroid-folder-open.svgandroid-folder.svgandroid-funnel.svgandroid-globe.svgandroid-hand.svgandroid-hangout.svgandroid-happy.svgandroid-home.svgandroid-image.svgandroid-laptop.svgandroid-list.svgandroid-locate.svgandroid-lock.svgandroid-mail.svgandroid-map.svgandroid-menu.svgandroid-microphone-off.svgandroid-microphone.svgandroid-more-horizontal.svgandroid-more-vertical.svgandroid-navigate.svgandroid-notifications-none.svgandroid-notifications-off.svgandroid-notifications.svgandroid-open.svgandroid-options.svgandroid-people.svgandroid-person-add.svgandroid-person.svgandroid-phone-landscape.svgandroid-phone-portrait.svgandroid-pin.svgandroid-plane.svgandroid-playstore.svgandroid-print.svgandroid-radio-button-off.svgandroid-radio-button-on.svgandroid-refresh.svgandroid-remove-circle.svgandroid-remove.svgandroid-restaurant.svgandroid-sad.svgandroid-search.svgandroid-send.svgandroid-settings.svgandroid-share-alt.svgandroid-share.svgandroid-star-half.svgandroid-star-outline.svgandroid-star.svgandroid-stopwatch.svgandroid-subway.svgandroid-sunny.svgandroid-sync.svgandroid-textsms.svgandroid-time.svgandroid-train.svgandroid-unlock.svgandroid-upload.svgandroid-volume-down.svgandroid-volume-mute.svgandroid-volume-off.svgandroid-volume-up.svgandroid-walk.svgandroid-warning.svgandroid-watch.svgandroid-wifi.svgaperture.svgarchive.svgarrow-down-a.svgarrow-down-b.svgarrow-down-c.svgarrow-expand.svgarrow-graph-down-left.svgarrow-graph-down-right.svgarrow-graph-up-left.svgarrow-graph-up-right.svgarrow-left-a.svgarrow-left-b.svgarrow-left-c.svgarrow-move.svgarrow-resize.svgarrow-return-left.svgarrow-return-right.svgarrow-right-a.svgarrow-right-b.svgarrow-right-c.svgarrow-shrink.svgarrow-swap.svgarrow-up-a.svgarrow-up-b.svgarrow-up-c.svgasterisk.svgat.svgbackspace-outline.svgbackspace.svgbag.svgbattery-charging.svgbattery-empty.svgbattery-full.svgbattery-half.svgbattery-low.svgbeaker.svgbeer.svgbluetooth.svgbonfire.svgbookmark.svgbowtie.svgbriefcase.svgbug.svgcalculator.svgcalendar.svgcamera.svgcard.svgcash.svgchatbox-working.svgchatbox.svgchatboxes.svgchatbubble-working.svgchatbubble.svgchatbubbles.svgcheckmark-circled.svgcheckmark-round.svgcheckmark.svgchevron-down.svgchevron-left.svgchevron-right.svgchevron-up.svgclipboard.svgclock.svgclose-circled.svgclose-round.svgclose.svgclosed-captioning.svgcloud.svgcode-download.svgcode-working.svgcode.svgcoffee.svgcompass.svgcompose.svgconnection-bars.svgcontrast.svgcrop.svgcube.svgdisc.svgdocument-text.svgdocument.svgdrag.svgearth.svgeasel.svgedit.svgegg.svgeject.svgemail-unread.svgemail.svgerlenmeyer-flask-bubbles.svgerlenmeyer-flask.svgeye-disabled.svgeye.svgfemale.svgfiling.svgfilm-marker.svgfireball.svgflag.svgflame.svgflash-off.svgflash.svgfolder.svgfork-repo.svgfork.svgforward.svgfunnel.svggear-a.svggear-b.svggrid.svghammer.svghappy-outline.svghappy.svgheadphone.svgheart-broken.svgheart.svghelp-buoy.svghelp-circled.svghelp.svghome.svgicecream.svgimage.svgimages.svginformation-circled.svginformation.svgionic.svgios-alarm-outline.svgios-alarm.svgios-albums-outline.svgios-albums.svgios-americanfootball-outline.svgios-americanfootball.svgios-analytics-outline.svgios-analytics.svgios-arrow-back.svgios-arrow-down.svgios-arrow-forward.svgios-arrow-left.svgios-arrow-right.svgios-arrow-thin-down.svgios-arrow-thin-left.svgios-arrow-thin-right.svgios-arrow-thin-up.svgios-arrow-up.svgios-at-outline.svgios-at.svgios-barcode-outline.svgios-barcode.svgios-baseball-outline.svgios-baseball.svgios-basketball-outline.svgios-basketball.svgios-bell-outline.svgios-bell.svgios-body-outline.svgios-body.svgios-bolt-outline.svgios-bolt.svgios-book-outline.svgios-book.svgios-bookmarks-outline.svgios-bookmarks.svgios-box-outline.svgios-box.svgios-briefcase-outline.svgios-briefcase.svgios-browsers-outline.svgios-browsers.svgios-calculator-outline.svgios-calculator.svgios-calendar-outline.svgios-calendar.svgios-camera-outline.svgios-camera.svgios-cart-outline.svgios-cart.svgios-chatboxes-outline.svgios-chatboxes.svgios-chatbubble-outline.svgios-chatbubble.svgios-checkmark-empty.svgios-checkmark-outline.svgios-checkmark.svgios-circle-filled.svgios-circle-outline.svgios-clock-outline.svgios-clock.svgios-close-empty.svgios-close-outline.svgios-close.svgios-cloud-download-outline.svgios-cloud-download.svgios-cloud-outline.svgios-cloud-upload-outline.svgios-cloud-upload.svgios-cloud.svgios-cloudy-night-outline.svgios-cloudy-night.svgios-cloudy-outline.svgios-cloudy.svgios-cog-outline.svgios-cog.svgios-color-filter-outline.svgios-color-filter.svgios-color-wand-outline.svgios-color-wand.svgios-compose-outline.svgios-compose.svgios-contact-outline.svgios-contact.svgios-copy-outline.svgios-copy.svgios-crop-strong.svgios-crop.svgios-download-outline.svgios-download.svgios-drag.svgios-email-outline.svgios-email.svgios-eye-outline.svgios-eye.svgios-fastforward-outline.svgios-fastforward.svgios-filing-outline.svgios-filing.svgios-film-outline.svgios-film.svgios-flag-outline.svgios-flag.svgios-flame-outline.svgios-flame.svgios-flask-outline.svgios-flask.svgios-flower-outline.svgios-flower.svgios-folder-outline.svgios-folder.svgios-football-outline.svgios-football.svgios-game-controller-a-outline.svgios-game-controller-a.svgios-game-controller-b-outline.svgios-game-controller-b.svgios-gear-outline.svgios-gear.svgios-glasses-outline.svgios-glasses.svgios-grid-view-outline.svgios-grid-view.svgios-heart-outline.svgios-heart.svgios-help-empty.svgios-help-outline.svgios-help.svgios-home-outline.svgios-home.svgios-infinite-outline.svgios-infinite.svgios-information-empty.svgios-information-outline.svgios-information.svgios-ionic-outline.svgios-keypad-outline.svgios-keypad.svgios-lightbulb-outline.svgios-lightbulb.svgios-list-outline.svgios-list.svgios-location-outline.svgios-location.svgios-locked-outline.svgios-locked.svgios-loop-strong.svgios-loop.svgios-medical-outline.svgios-medical.svgios-medkit-outline.svgios-medkit.svgios-mic-off.svgios-mic-outline.svgios-mic.svgios-minus-empty.svgios-minus-outline.svgios-minus.svgios-monitor-outline.svgios-monitor.svgios-moon-outline.svgios-moon.svgios-more-outline.svgios-more.svgios-musical-note.svgios-musical-notes.svgios-navigate-outline.svgios-navigate.svgios-nutrition-outline.svgios-nutrition.svgios-paper-outline.svgios-paper.svgios-paperplane-outline.svgios-paperplane.svgios-partlysunny-outline.svgios-partlysunny.svgios-pause-outline.svgios-pause.svgios-paw-outline.svgios-paw.svgios-people-outline.svgios-people.svgios-person-outline.svgios-person.svgios-personadd-outline.svgios-personadd.svgios-photos-outline.svgios-photos.svgios-pie-outline.svgios-pie.svgios-pint-outline.svgios-pint.svgios-play-outline.svgios-play.svgios-plus-empty.svgios-plus-outline.svgios-plus.svgios-pricetag-outline.svgios-pricetag.svgios-pricetags-outline.svgios-pricetags.svgios-printer-outline.svgios-printer.svgios-pulse-strong.svgios-pulse.svgios-rainy-outline.svgios-rainy.svgios-recording-outline.svgios-recording.svgios-redo-outline.svgios-redo.svgios-refresh-empty.svgios-refresh-outline.svgios-refresh.svgios-reload.svgios-reverse-camera-outline.svgios-reverse-camera.svgios-rewind-outline.svgios-rewind.svgios-rose-outline.svgios-rose.svgios-search-strong.svgios-search.svgios-settings-strong.svgios-settings.svgios-shuffle-strong.svgios-shuffle.svgios-skipbackward-outline.svgios-skipbackward.svgios-skipforward-outline.svgios-skipforward.svgios-snowy.svgios-speedometer-outline.svgios-speedometer.svgios-star-half.svgios-star-outline.svgios-star.svgios-stopwatch-outline.svgios-stopwatch.svgios-sunny-outline.svgios-sunny.svgios-telephone-outline.svgios-telephone.svgios-tennisball-outline.svgios-tennisball.svgios-thunderstorm-outline.svgios-thunderstorm.svgios-time-outline.svgios-time.svgios-timer-outline.svgios-timer.svgios-toggle-outline.svgios-toggle.svgios-trash-outline.svgios-trash.svgios-undo-outline.svgios-undo.svgios-unlocked-outline.svgios-unlocked.svgios-upload-outline.svgios-upload.svgios-videocam-outline.svgios-videocam.svgios-volume-high.svgios-volume-low.svgios-wineglass-outline.svgios-wineglass.svgios-world-outline.svgios-world.svgipad.svgiphone.svgipod.svgjet.svgkey.svgknife.svglaptop.svgleaf.svglevels.svglightbulb.svglink.svgload-a.svgload-b.svgload-c.svgload-d.svglocation.svglock-combination.svglocked.svglog-in.svglog-out.svgloop.svgmagnet.svgmale.svgman.svgmap.svgmedkit.svgmerge.svgmic-a.svgmic-b.svgmic-c.svgminus-circled.svgminus-round.svgminus.svgmodel-s.svgmonitor.svgmore.svgmouse.svgmusic-note.svgnavicon-round.svgnavicon.svgnavigate.svgnetwork.svgno-smoking.svgnuclear.svgoutlet.svgpaintbrush.svgpaintbucket.svgpaper-airplane.svgpaperclip.svgpause.svgperson-add.svgperson-stalker.svgperson.svgpie-graph.svgpin.svgpinpoint.svgpizza.svgplane.svgplanet.svgplay.svgplaystation.svgplus-circled.svgplus-round.svgplus.svgpodium.svgpound.svgpower.svgpricetag.svgpricetags.svgprinter.svgpull-request.svgqr-scanner.svgquote.svgradio-waves.svgrecord.svgrefresh.svgreply-all.svgreply.svgribbon-a.svgribbon-b.svgsad-outline.svgsad.svgscissors.svgsearch.svgsettings.svgshare.svgshuffle.svgskip-backward.svgskip-forward.svgsocial-android-outline.svgsocial-android.svgsocial-angular-outline.svgsocial-angular.svgsocial-apple-outline.svgsocial-apple.svgsocial-bitcoin-outline.svgsocial-bitcoin.svgsocial-buffer-outline.svgsocial-buffer.svgsocial-chrome-outline.svgsocial-chrome.svgsocial-codepen-outline.svgsocial-codepen.svgsocial-css3-outline.svgsocial-css3.svgsocial-designernews-outline.svgsocial-designernews.svgsocial-dribbble-outline.svgsocial-dribbble.svgsocial-dropbox-outline.svgsocial-dropbox.svgsocial-euro-outline.svgsocial-euro.svgsocial-facebook-outline.svgsocial-facebook.svgsocial-foursquare-outline.svgsocial-foursquare.svgsocial-freebsd-devil.svgsocial-github-outline.svgsocial-github.svgsocial-google-outline.svgsocial-google.svgsocial-googleplus-outline.svgsocial-googleplus.svgsocial-hackernews-outline.svgsocial-hackernews.svgsocial-html5-outline.svgsocial-html5.svgsocial-instagram-outline.svgsocial-instagram.svgsocial-javascript-outline.svgsocial-javascript.svgsocial-linkedin-outline.svgsocial-linkedin.svgsocial-markdown.svgsocial-nodejs.svgsocial-octocat.svgsocial-pinterest-outline.svgsocial-pinterest.svgsocial-python.svgsocial-reddit-outline.svgsocial-reddit.svgsocial-rss-outline.svgsocial-rss.svgsocial-sass.svgsocial-skype-outline.svgsocial-skype.svgsocial-snapchat-outline.svgsocial-snapchat.svgsocial-tumblr-outline.svgsocial-tumblr.svgsocial-tux.svgsocial-twitch-outline.svgsocial-twitch.svgsocial-twitter-outline.svgsocial-twitter.svgsocial-usd-outline.svgsocial-usd.svgsocial-vimeo-outline.svgsocial-vimeo.svgsocial-whatsapp-outline.svgsocial-whatsapp.svgsocial-windows-outline.svgsocial-windows.svgsocial-wordpress-outline.svgsocial-wordpress.svgsocial-yahoo-outline.svgsocial-yahoo.svgsocial-yen-outline.svgsocial-yen.svgsocial-youtube-outline.svgsocial-youtube.svgsoup-can-outline.svgsoup-can.svgspeakerphone.svgspeedometer.svgspoon.svgstar.svgstats-bars.svgsteam.svgstop.svgthermometer.svgthumbsdown.svgthumbsup.svgtoggle-filled.svgtoggle.svgtransgender.svgtrash-a.svgtrash-b.svgtrophy.svgtshirt-outline.svgtshirt.svgumbrella.svguniversity.svgunlocked.svgupload.svgusb.svgvideocamera.svgvolume-high.svgvolume-low.svgvolume-medium.svgvolume-mute.svgwand.svgwaterdrop.svgwifi.svgwineglass.svgwoman.svgwrench.svgxbox.svg
ionslider
jQuery
jQueryUI
jquery-ui
jvectormap
knob
moment.js
morris
pace
raphael
select2
slimScroll
sparkline
timepicker
js
corePage
index.php

@ -0,0 +1,38 @@
# AutoFill
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. Key features include:
* Click and drag cell content insertion
* Automatic incrementing of numeric information
* Enable and disable on any column
* Detailed callback functions for customisation
* Support for both DataTables and browser window scrolling
# Installation
To use AutoFill, first download DataTables ( http://datatables.net/download ) and place the unzipped AutoFill package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
# Basic usage
AutoFill is initialised using the `$.fn.dataTable.AutoFill` constructor. For example:
```js
$(document).ready( function () {
var table = $('#example').dataTable();
new $.fn.dataTable.AutoFill( table );
} );
```
# Documentation / support
* Documentation: http://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

@ -0,0 +1,24 @@
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* AutoFill styles
*/
div.AutoFill_filler {
display: none;
position: absolute;
height: 14px;
width: 14px;
background: url(../images/filler.png) no-repeat center center;
z-index: 1002;
}
div.AutoFill_border {
display: none;
position: absolute;
background-color: #0063dc;
z-index: 1001;
box-shadow: 0px 0px 5px #76b4ff;
-moz-box-shadow: 0px 0px 5px #76b4ff;
-webkit-box-shadow: 0px 0px 5px #76b4ff;
}

@ -0,0 +1 @@
div.AutoFill_filler{display:none;position:absolute;height:14px;width:14px;background:url(../images/filler.png) no-repeat center center;z-index:1002}div.AutoFill_border{display:none;position:absolute;background-color:#0063dc;z-index:1001;box-shadow:0px 0px 5px #76b4ff;-moz-box-shadow:0px 0px 5px #76b4ff;-webkit-box-shadow:0px 0px 5px #76b4ff}

@ -0,0 +1,644 @@
<!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 options</title>
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table, {
"columnDefs": [
{ enable: false, targets: [-1, -2] },
{ increment: false, targets: 3 }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>Column options</span></h1>
<div class="info">
<p>Columns can be enabled (which they are by default) and disabled from providing the end user with
AutoFill abilities by using either <code>columns</code> or <code>columnDefs</code> and the
<code>enable</code> option. These two arrays work in exactly the same way <a href=
"http://datatables.net/ref/columns">as in DataTables</a>.</p>
<p>This example shows how disabling columns counting from the right hand side of the table can be
achieved. In this case, the last three columns.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').dataTable();
new $.fn.dataTable.AutoFill( table, {
&quot;columnDefs&quot;: [
{ enable: false, targets: [-1, -2] },
{ increment: false, targets: 3 }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li class="active"><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,652 @@
<!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 - Complete callback</title>
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table, {
complete: function ( altered ) {
var last = altered[ altered.length-1 ];
alert(
altered.length+' cells were altered in this auto-fill. The '+
'value of the last cell altered was: '+last.oldValue+' and is '+
'now '+last.newValue
);
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>Complete callback</span></h1>
<div class="info">
<p>AutoFill provides a number of customisable callback functions so you can tailor it's actions to
exactly what you need. This example shows the use of the <code>complete</code> callback function which
is executed at the end of an auto-fill drag, providing information about the cells that were
altered.</p>
<p>For a complete description of the <code>complete</code> callback, please refer to the <a href=
"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').dataTable();
new $.fn.dataTable.AutoFill( table, {
complete: function ( altered ) {
var last = altered[ altered.length-1 ];
alert(
altered.length+' cells were altered in this auto-fill. The '+
'value of the last cell altered was: '+last.oldValue+' and is '+
'now '+last.newValue
);
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li class="active"><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,641 @@
<!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 - Horizontal and vertical fill</title>
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table, {
mode: 'both'
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>Horizontal and vertical fill</span></h1>
<div class="info">
<p>By default AutoFill will allow the fill to operate only on a single column at a time (i.e.
vertically). However, it has the ability to provide the fill either horizontally, over both axis or
limited to just one axis depending on the direction of the drag. This option is provided by the
<code>mode</code> sanitisation option.</p>
<p>In this case it is set to <code>both</code> (i.e. both horizontal and vertical axis) to provide the
filler along a row, rather than a column.</p>
<p>For the full range of options and syntax for <code>mode</code> please refer to the <a href=
"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.AutoFill( table, {
mode: 'both'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li class="active"><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,641 @@
<!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 - Horizontal fill</title>
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table, {
mode: 'x'
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>Horizontal fill</span></h1>
<div class="info">
<p>By default AutoFill will allow the fill to operate only on a single column at a time (i.e.
vertically). However, it has the ability to provide the fill either horizontally, over both axis or
limited to just one axis depending on the direction of the drag. This option is provided by the
<code>mode</code> sanitisation option.</p>
<p>In this case it is set to <code>x</code> (i.e. horizontal axis) to provide the filler along a row,
rather than a column.</p>
<p>For the full range of options and syntax for <code>mode</code> please refer to the <a href=
"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.AutoFill( table, {
mode: 'x'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li class="active"><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
<title>AutoFill examples - AutoFill examples</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>AutoFill examples</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>Thanks to <a href="http://www.phoniax.no/">Phoniax AS</a> for their sponsorship of this plug-in for
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">Examples</a></h3>
<ul class="toc">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,638 @@
<!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/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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: 200,
scrollCollapse: false,
paginate: false
} );
new $.fn.dataTable.AutoFill( table );
} );
</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>
<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 brush: js;">$(document).ready(function() {
var table = $('#example').dataTable( {
scrollY: 200,
scrollCollapse: false,
paginate: false
} );
new $.fn.dataTable.AutoFill( table );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li class="active"><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,631 @@
<!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/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table );
} );
</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 <code>$.fn.dataTable.AutoFill</code> function as shown in the
example below. It requires one parameter, the DataTable instance that AutoFill is to operate on, and
optionally a second configuration parameter, which is shown in the other AutoFill examples.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.AutoFill( table );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li class="active"><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,660 @@
<!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 - Step callback</title>
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../js/dataTables.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();
new $.fn.dataTable.AutoFill( table, {
columnDefs: [ {
targets: -1,
step: function ( cell, read, last, i, x, y ) {
var val = parseInt( (last || read).replace(/[$,]/g, ''), 10 );
val += (x<0 || y<0 ? -100 : 100); // - if going back up, + if going down
// Format for the currency column
return '$'+val.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ',' );
}
} ]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>AutoFill example <span>Step callback</span></h1>
<div class="info">
<p>By default, AutoFill will increment cells that contain numbers by a single digit for each cell that
is iterated over (try the <em>Age</em> column below for example). This behaviour can be disabled
completely using the <code>increment</code> column option, but it can also be modified to suit your
requirements through use of the <code>step</code> column callback function.</p>
<p>The <code>step</code> callback is executed for each cell in the auto-fill set and gives complete
control over how data is incremented. The example below shows the step function being used on the
<em>Salary</em> column to increment by 100, rather than 1 for each cell.</p>
<p>For a complete description of the <code>step</code> callback, please refer to the <a href=
"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
</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 brush: js;">$(document).ready(function() {
var table = $('#example').dataTable();
new $.fn.dataTable.AutoFill( table, {
columnDefs: [ {
targets: -1,
step: function ( cell, read, last, i, x, y ) {
var val = parseInt( (last || read).replace(/[$,]/g, ''), 10 );
val += (x&lt;0 || y&lt;0 ? -100 : 100); // - if going back up, + if going down
// Format for the currency column
return '$'+val.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ',' );
}
} ]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
<li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
<li><a href="../js/dataTables.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 brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Examples</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Basic initialisation</a></li>
<li><a href="./columns.html">Column options</a></li>
<li><a href="./scrolling.html">Scrolling DataTable</a></li>
<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
<li><a href="./complete-callback.html">Complete callback</a></li>
<li class="active"><a href="./step-callback.html">Step callback</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

Binary file not shown.

After

(image error) Size: 1.0 KiB

@ -0,0 +1,855 @@
/*! AutoFill 1.2.1
* ©2008-2014 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary AutoFill
* @description Add Excel like click and drag auto-fill options to DataTables
* @version 1.2.1
* @file dataTables.autoFill.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2010-2014 SpryMedia Ltd.
*
* This source file is free software, available under the following license:
* MIT license - http://datatables.net/license/mit
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
*
* For details please refer to: http://www.datatables.net
*/
(function( window, document, undefined ) {
var factory = function( $, DataTable ) {
"use strict";
/**
* AutoFill provides Excel like auto-fill features for a DataTable
*
* @class AutoFill
* @constructor
* @param {object} oTD DataTables settings object
* @param {object} oConfig Configuration object for AutoFill
*/
var AutoFill = function( oDT, oConfig )
{
/* Sanity check that we are a new instance */
if ( ! (this instanceof AutoFill) ) {
throw( "Warning: AutoFill must be initialised with the keyword 'new'" );
}
if ( ! $.fn.dataTableExt.fnVersionCheck('1.7.0') ) {
throw( "Warning: AutoFill requires DataTables 1.7 or greater");
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public class variables
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
this.c = {};
/**
* @namespace Settings object which contains customisable information for AutoFill instance
*/
this.s = {
/**
* @namespace Cached information about the little dragging icon (the filler)
*/
"filler": {
"height": 0,
"width": 0
},
/**
* @namespace Cached information about the border display
*/
"border": {
"width": 2
},
/**
* @namespace Store for live information for the current drag
*/
"drag": {
"startX": -1,
"startY": -1,
"startTd": null,
"endTd": null,
"dragging": false
},
/**
* @namespace Data cache for information that we need for scrolling the screen when we near
* the edges
*/
"screen": {
"interval": null,
"y": 0,
"height": 0,
"scrollTop": 0
},
/**
* @namespace Data cache for the position of the DataTables scrolling element (when scrolling
* is enabled)
*/
"scroller": {
"top": 0,
"bottom": 0
},
/**
* @namespace Information stored for each column. An array of objects
*/
"columns": []
};
/**
* @namespace Common and useful DOM elements for the class instance
*/
this.dom = {
"table": null,
"filler": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"borderLeft": null,
"currentTarget": null
};
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public class methods
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Retreieve the settings object from an instance
* @method fnSettings
* @returns {object} AutoFill settings object
*/
this.fnSettings = function () {
return this.s;
};
/* Constructor logic */
this._fnInit( oDT, oConfig );
return this;
};
AutoFill.prototype = {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Private methods (they are of course public in JS, but recommended as private)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Initialisation
* @method _fnInit
* @param {object} dt DataTables settings object
* @param {object} config Configuration object for AutoFill
* @returns void
*/
"_fnInit": function ( dt, config )
{
var
that = this,
i, iLen;
// Use DataTables API to get the settings allowing selectors, instances
// etc to be used, or for backwards compatibility get from the old
// fnSettings method
this.s.dt = DataTable.Api ?
new DataTable.Api( dt ).settings()[0] :
dt.fnSettings();
this.s.init = config || {};
this.dom.table = this.s.dt.nTable;
$.extend( true, this.c, AutoFill.defaults, config );
/* Add and configure the columns */
this._initColumns();
/* Auto Fill click and drag icon */
var filler = $('<div/>', {
'class': 'AutoFill_filler'
} )
.appendTo( 'body' );
this.dom.filler = filler[0];
// Get the height / width of the click element
this.s.filler.height = filler.height();
this.s.filler.width = filler.width();
filler[0].style.display = "none";
/* Border display - one div for each side. We can't just use a single
* one with a border, as we want the events to effectively pass through
* the transparent bit of the box
*/
var border;
var appender = document.body;
if ( that.s.dt.oScroll.sY !== "" ) {
that.s.dt.nTable.parentNode.style.position = "relative";
appender = that.s.dt.nTable.parentNode;
}
border = $('<div/>', {
"class": "AutoFill_border"
} );
this.dom.borderTop = border.clone().appendTo( appender )[0];
this.dom.borderRight = border.clone().appendTo( appender )[0];
this.dom.borderBottom = border.clone().appendTo( appender )[0];
this.dom.borderLeft = border.clone().appendTo( appender )[0];
/* Events */
filler.on( 'mousedown.DTAF', function (e) {
this.onselectstart = function() { return false; };
that._fnFillerDragStart.call( that, e );
return false;
} );
$('tbody', this.dom.table).on(
'mouseover.DTAF mouseout.DTAF',
'>tr>td, >tr>th',
function (e) {
that._fnFillerDisplay.call( that, e );
}
);
$(this.dom.table).on( 'destroy.dt.DTAF', function () {
filler.off( 'mousedown.DTAF' ).remove();
$('tbody', this.dom.table).off( 'mouseover.DTAF mouseout.DTAF' );
} );
},
_initColumns: function ( )
{
var that = this;
var i, ien;
var dt = this.s.dt;
var config = this.s.init;
for ( i=0, ien=dt.aoColumns.length ; i<ien ; i++ ) {
this.s.columns[i] = $.extend( true, {}, AutoFill.defaults.column );
}
dt.oApi._fnApplyColumnDefs(
dt,
config.aoColumnDefs || config.columnDefs,
config.aoColumns || config.columns,
function (colIdx, def) {
that._fnColumnOptions( colIdx, def );
}
);
// For columns which don't have read, write, step functions defined,
// use the default ones
for ( i=0, ien=dt.aoColumns.length ; i<ien ; i++ ) {
var column = this.s.columns[i];
if ( ! column.read ) {
column.read = this._fnReadCell;
}
if ( ! column.write ) {
column.read = this._fnWriteCell;
}
if ( ! column.step ) {
column.read = this._fnStep;
}
}
},
"_fnColumnOptions": function ( i, opts )
{
var column = this.s.columns[ i ];
var set = function ( outProp, inProp ) {
if ( opts[ inProp[0] ] !== undefined ) {
column[ outProp ] = opts[ inProp[0] ];
}
if ( opts[ inProp[1] ] !== undefined ) {
column[ outProp ] = opts[ inProp[1] ];
}
};
// Compatibility with the old Hungarian style of notation
set( 'enable', ['bEnable', 'enable'] );
set( 'read', ['fnRead', 'read'] );
set( 'write', ['fnWrite', 'write'] );
set( 'step', ['fnStep', 'step'] );
set( 'increment', ['bIncrement', 'increment'] );
},
/**
* Find out the coordinates of a given TD cell in a table
* @method _fnTargetCoords
* @param {Node} nTd
* @returns {Object} x and y properties, for the position of the cell in the tables DOM
*/
"_fnTargetCoords": function ( nTd )
{
var nTr = $(nTd).parents('tr')[0];
var position = this.s.dt.oInstance.fnGetPosition( nTd );
return {
"x": $('td', nTr).index(nTd),
"y": $('tr', nTr.parentNode).index(nTr),
"row": position[0],
"column": position[2]
};
},
/**
* Display the border around one or more cells (from start to end)
* @method _fnUpdateBorder
* @param {Node} nStart Starting cell
* @param {Node} nEnd Ending cell
* @returns void
*/
"_fnUpdateBorder": function ( nStart, nEnd )
{
var
border = this.s.border.width,
offsetStart = $(nStart).offset(),
offsetEnd = $(nEnd).offset(),
x1 = offsetStart.left - border,
x2 = offsetEnd.left + $(nEnd).outerWidth(),
y1 = offsetStart.top - border,
y2 = offsetEnd.top + $(nEnd).outerHeight(),
width = offsetEnd.left + $(nEnd).outerWidth() - offsetStart.left + (2*border),
height = offsetEnd.top + $(nEnd).outerHeight() - offsetStart.top + (2*border),
oStyle;
// Recalculate start and end (when dragging "backwards")
if( offsetStart.left > offsetEnd.left) {
x1 = offsetEnd.left - border;
x2 = offsetStart.left + $(nStart).outerWidth();
width = offsetStart.left + $(nStart).outerWidth() - offsetEnd.left + (2*border);
}
if ( this.s.dt.oScroll.sY !== "" )
{
/* The border elements are inside the DT scroller - so position relative to that */
var
offsetScroll = $(this.s.dt.nTable.parentNode).offset(),
scrollTop = $(this.s.dt.nTable.parentNode).scrollTop(),
scrollLeft = $(this.s.dt.nTable.parentNode).scrollLeft();
x1 -= offsetScroll.left - scrollLeft;
x2 -= offsetScroll.left - scrollLeft;
y1 -= offsetScroll.top - scrollTop;
y2 -= offsetScroll.top - scrollTop;
}
/* Top */
oStyle = this.dom.borderTop.style;
oStyle.top = y1+"px";
oStyle.left = x1+"px";
oStyle.height = this.s.border.width+"px";
oStyle.width = width+"px";
/* Bottom */
oStyle = this.dom.borderBottom.style;
oStyle.top = y2+"px";
oStyle.left = x1+"px";
oStyle.height = this.s.border.width+"px";
oStyle.width = width+"px";
/* Left */
oStyle = this.dom.borderLeft.style;
oStyle.top = y1+"px";
oStyle.left = x1+"px";
oStyle.height = height+"px";
oStyle.width = this.s.border.width+"px";
/* Right */
oStyle = this.dom.borderRight.style;
oStyle.top = y1+"px";
oStyle.left = x2+"px";
oStyle.height = height+"px";
oStyle.width = this.s.border.width+"px";
},
/**
* Mouse down event handler for starting a drag
* @method _fnFillerDragStart
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDragStart": function (e)
{
var that = this;
var startingTd = this.dom.currentTarget;
this.s.drag.dragging = true;
that.dom.borderTop.style.display = "block";
that.dom.borderRight.style.display = "block";
that.dom.borderBottom.style.display = "block";
that.dom.borderLeft.style.display = "block";
var coords = this._fnTargetCoords( startingTd );
this.s.drag.startX = coords.x;
this.s.drag.startY = coords.y;
this.s.drag.startTd = startingTd;
this.s.drag.endTd = startingTd;
this._fnUpdateBorder( startingTd, startingTd );
$(document).bind('mousemove.AutoFill', function (e) {
that._fnFillerDragMove.call( that, e );
} );
$(document).bind('mouseup.AutoFill', function (e) {
that._fnFillerFinish.call( that, e );
} );
/* Scrolling information cache */
this.s.screen.y = e.pageY;
this.s.screen.height = $(window).height();
this.s.screen.scrollTop = $(document).scrollTop();
if ( this.s.dt.oScroll.sY !== "" )
{
this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
}
/* Scrolling handler - we set an interval (which is cancelled on mouse up) which will fire
* regularly and see if we need to do any scrolling
*/
this.s.screen.interval = setInterval( function () {
var iScrollTop = $(document).scrollTop();
var iScrollDelta = iScrollTop - that.s.screen.scrollTop;
that.s.screen.y += iScrollDelta;
if ( that.s.screen.height - that.s.screen.y + iScrollTop < 50 )
{
$('html, body').animate( {
"scrollTop": iScrollTop + 50
}, 240, 'linear' );
}
else if ( that.s.screen.y - iScrollTop < 50 )
{
$('html, body').animate( {
"scrollTop": iScrollTop - 50
}, 240, 'linear' );
}
if ( that.s.dt.oScroll.sY !== "" )
{
if ( that.s.screen.y > that.s.scroller.bottom - 50 )
{
$(that.s.dt.nTable.parentNode).animate( {
"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() + 50
}, 240, 'linear' );
}
else if ( that.s.screen.y < that.s.scroller.top + 50 )
{
$(that.s.dt.nTable.parentNode).animate( {
"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() - 50
}, 240, 'linear' );
}
}
}, 250 );
},
/**
* Mouse move event handler for during a move. See if we want to update the display based on the
* new cursor position
* @method _fnFillerDragMove
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDragMove": function (e)
{
if ( e.target && e.target.nodeName.toUpperCase() == "TD" &&
e.target != this.s.drag.endTd )
{
var coords = this._fnTargetCoords( e.target );
if ( this.c.mode == "y" && coords.x != this.s.drag.startX )
{
e.target = $('tbody>tr:eq('+coords.y+')>td:eq('+this.s.drag.startX+')', this.dom.table)[0];
}
if ( this.c.mode == "x" && coords.y != this.s.drag.startY )
{
e.target = $('tbody>tr:eq('+this.s.drag.startY+')>td:eq('+coords.x+')', this.dom.table)[0];
}
if ( this.c.mode == "either")
{
if(coords.x != this.s.drag.startX )
{
e.target = $('tbody>tr:eq('+this.s.drag.startY+')>td:eq('+coords.x+')', this.dom.table)[0];
}
else if ( coords.y != this.s.drag.startY ) {
e.target = $('tbody>tr:eq('+coords.y+')>td:eq('+this.s.drag.startX+')', this.dom.table)[0];
}
}
// update coords
if ( this.c.mode !== "both" ) {
coords = this._fnTargetCoords( e.target );
}
var drag = this.s.drag;
drag.endTd = e.target;
if ( coords.y >= this.s.drag.startY ) {
this._fnUpdateBorder( drag.startTd, drag.endTd );
}
else {
this._fnUpdateBorder( drag.endTd, drag.startTd );
}
this._fnFillerPosition( e.target );
}
/* Update the screen information so we can perform scrolling */
this.s.screen.y = e.pageY;
this.s.screen.scrollTop = $(document).scrollTop();
if ( this.s.dt.oScroll.sY !== "" )
{
this.s.scroller.scrollTop = $(this.s.dt.nTable.parentNode).scrollTop();
this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
}
},
/**
* Mouse release handler - end the drag and take action to update the cells with the needed values
* @method _fnFillerFinish
* @param {Object} e Event object
* @returns void
*/
"_fnFillerFinish": function (e)
{
var that = this, i, iLen, j;
$(document).unbind('mousemove.AutoFill mouseup.AutoFill');
this.dom.borderTop.style.display = "none";
this.dom.borderRight.style.display = "none";
this.dom.borderBottom.style.display = "none";
this.dom.borderLeft.style.display = "none";
this.s.drag.dragging = false;
clearInterval( this.s.screen.interval );
var cells = [];
var table = this.dom.table;
var coordsStart = this._fnTargetCoords( this.s.drag.startTd );
var coordsEnd = this._fnTargetCoords( this.s.drag.endTd );
var columnIndex = function ( visIdx ) {
return that.s.dt.oApi._fnVisibleToColumnIndex( that.s.dt, visIdx );
};
// xxx - urgh - there must be a way of reducing this...
if ( coordsStart.y <= coordsEnd.y ) {
for ( i=coordsStart.y ; i<=coordsEnd.y ; i++ ) {
if ( coordsStart.x <= coordsEnd.x ) {
for ( j=coordsStart.x ; j<=coordsEnd.x ; j++ ) {
cells.push( {
node: $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
x: j - coordsStart.x,
y: i - coordsStart.y,
colIdx: columnIndex( j )
} );
}
}
else {
for ( j=coordsStart.x ; j>=coordsEnd.x ; j-- ) {
cells.push( {
node: $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
x: j - coordsStart.x,
y: i - coordsStart.y,
colIdx: columnIndex( j )
} );
}
}
}
}
else {
for ( i=coordsStart.y ; i>=coordsEnd.y ; i-- ) {
if ( coordsStart.x <= coordsEnd.x ) {
for ( j=coordsStart.x ; j<=coordsEnd.x ; j++ ) {
cells.push( {
node: $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
x: j - coordsStart.x,
y: i - coordsStart.y,
colIdx: columnIndex( j )
} );
}
}
else {
for ( j=coordsStart.x ; j>=coordsEnd.x ; j-- ) {
cells.push( {
node: $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
x: coordsStart.x - j,
y: coordsStart.y - i,
colIdx: columnIndex( j )
} );
}
}
}
}
// An auto-fill requires 2 or more cells
if ( cells.length <= 1 ) {
return;
}
var edited = [];
var previous;
for ( i=0, iLen=cells.length ; i<iLen ; i++ ) {
var cell = cells[i];
var column = this.s.columns[ cell.colIdx ];
var read = column.read.call( column, cell.node );
var stepValue = column.step.call( column, cell.node, read, previous, i, cell.x, cell.y );
column.write.call( column, cell.node, stepValue );
previous = stepValue;
edited.push( {
cell: cell,
colIdx: cell.colIdx,
newValue: stepValue,
oldValue: read
} );
}
if ( this.c.complete !== null ) {
this.c.complete.call( this, edited );
}
// In 1.10 we can do a static draw
if ( DataTable.Api ) {
new DataTable.Api( this.s.dt ).draw( false );
}
else {
this.s.dt.oInstance.fnDraw();
}
},
/**
* Display the drag handle on mouse over cell
* @method _fnFillerDisplay
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDisplay": function (e)
{
var filler = this.dom.filler;
/* Don't display automatically when dragging */
if ( this.s.drag.dragging)
{
return;
}
/* Check that we are allowed to AutoFill this column or not */
var nTd = (e.target.nodeName.toLowerCase() == 'td') ? e.target : $(e.target).parents('td')[0];
var iX = this._fnTargetCoords(nTd).column;
if ( !this.s.columns[iX].enable )
{
filler.style.display = "none";
return;
}
if (e.type == 'mouseover')
{
this.dom.currentTarget = nTd;
this._fnFillerPosition( nTd );
filler.style.display = "block";
}
else if ( !e.relatedTarget || !e.relatedTarget.className.match(/AutoFill/) )
{
filler.style.display = "none";
}
},
/**
* Position the filler icon over a cell
* @method _fnFillerPosition
* @param {Node} nTd Cell to position filler icon over
* @returns void
*/
"_fnFillerPosition": function ( nTd )
{
var offset = $(nTd).offset();
var filler = this.dom.filler;
filler.style.top = (offset.top - (this.s.filler.height / 2)-1 + $(nTd).outerHeight())+"px";
filler.style.left = (offset.left - (this.s.filler.width / 2)-1 + $(nTd).outerWidth())+"px";
}
};
// Alias for access
DataTable.AutoFill = AutoFill;
DataTable.AutoFill = AutoFill;
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Constants
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* AutoFill version
* @constant version
* @type String
* @default See code
*/
AutoFill.version = "1.2.1";
/**
* AutoFill defaults
* @namespace
*/
AutoFill.defaults = {
/**
* Mode for dragging (restrict to y-axis only, x-axis only, either one or none):
*
* * `y` - y-axis only (default)
* * `x` - x-axis only
* * `either` - either one, but not both axis at the same time
* * `both` - multiple cells allowed
*
* @type {string}
* @default `y`
*/
mode: 'y',
complete: null,
/**
* Column definition defaults
* @namespace
*/
column: {
/**
* If AutoFill should be enabled on this column
*
* @type {boolean}
* @default true
*/
enable: true,
/**
* Allow automatic increment / decrement on this column if a number
* is found.
*
* @type {boolean}
* @default true
*/
increment: true,
/**
* Cell read function
*
* Default function will simply read the value from the HTML of the
* cell.
*
* @type {function}
* @param {node} cell `th` / `td` element to read the value from
* @return {string} Data that has been read
*/
read: function ( cell ) {
return $(cell).html();
},
/**
* Cell write function
*
* Default function will simply write to the HTML and tell the DataTable
* to update.
*
* @type {function}
* @param {node} cell `th` / `td` element to write the value to
* @return {string} Data two write
*/
write: function ( cell, val ) {
var table = $(cell).parents('table');
if ( DataTable.Api ) {
// 1.10
table.DataTable().cell( cell ).data( val );
}
else {
// 1.9
var dt = table.dataTable();
var pos = dt.fnGetPosition( cell );
dt.fnUpdate( val, pos[0], pos[2], false );
}
},
/**
* Step function. This provides the ability to customise how the values
* are incremented.
*
* @param {node} cell `th` / `td` element that is being operated upon
* @param {string} read Cell value from `read` function
* @param {string} last Value of the previous cell
* @param {integer} i Loop counter
* @param {integer} x Cell x-position in the current auto-fill. The
* starting cell is coordinate 0 regardless of its physical position
* in the DataTable.
* @param {integer} y Cell y-position in the current auto-fill. The
* starting cell is coordinate 0 regardless of its physical position
* in the DataTable.
* @return {string} Value to write
*/
step: function ( cell, read, last, i, x, y ) {
// Increment a number if it is found
var re = /(\-?\d+)/;
var match = this.increment && last ? last.match(re) : null;
if ( match ) {
return last.replace( re, parseInt(match[1],10) + (x<0 || y<0 ? -1 : 1) );
}
return last === undefined ?
read :
last;
}
}
};
return AutoFill;
};
// 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 && !jQuery.fn.dataTable.AutoFill ) {
// Otherwise simply initialise as normal, stopping multiple evaluation
factory( jQuery, jQuery.fn.dataTable );
}
}(window, document));

@ -0,0 +1,22 @@
/*!
AutoFill 1.2.1
©2008-2014 SpryMedia Ltd - datatables.net/license
*/
(function(o,j,m){var l=function(c,k){var h=function(d,b){if(!(this instanceof h))throw"Warning: AutoFill must be initialised with the keyword 'new'";if(!c.fn.dataTableExt.fnVersionCheck("1.7.0"))throw"Warning: AutoFill requires DataTables 1.7 or greater";this.c={};this.s={filler:{height:0,width:0},border:{width:2},drag:{startX:-1,startY:-1,startTd:null,endTd:null,dragging:!1},screen:{interval:null,y:0,height:0,scrollTop:0},scroller:{top:0,bottom:0},columns:[]};this.dom={table:null,filler:null,borderTop:null,
borderRight:null,borderBottom:null,borderLeft:null,currentTarget:null};this.fnSettings=function(){return this.s};this._fnInit(d,b);return this};h.prototype={_fnInit:function(d,b){var a=this;this.s.dt=k.Api?(new k.Api(d)).settings()[0]:d.fnSettings();this.s.init=b||{};this.dom.table=this.s.dt.nTable;c.extend(!0,this.c,h.defaults,b);this._initColumns();var e=c("<div/>",{"class":"AutoFill_filler"}).appendTo("body");this.dom.filler=e[0];this.s.filler.height=e.height();this.s.filler.width=e.width();e[0].style.display=
"none";var g,f=j.body;""!==a.s.dt.oScroll.sY&&(a.s.dt.nTable.parentNode.style.position="relative",f=a.s.dt.nTable.parentNode);g=c("<div/>",{"class":"AutoFill_border"});this.dom.borderTop=g.clone().appendTo(f)[0];this.dom.borderRight=g.clone().appendTo(f)[0];this.dom.borderBottom=g.clone().appendTo(f)[0];this.dom.borderLeft=g.clone().appendTo(f)[0];e.on("mousedown.DTAF",function(b){this.onselectstart=function(){return false};a._fnFillerDragStart.call(a,b);return false});c("tbody",this.dom.table).on("mouseover.DTAF mouseout.DTAF",
">tr>td, >tr>th",function(b){a._fnFillerDisplay.call(a,b)});c(this.dom.table).on("destroy.dt.DTAF",function(){e.off("mousedown.DTAF").remove();c("tbody",this.dom.table).off("mouseover.DTAF mouseout.DTAF")})},_initColumns:function(){var d=this,b,a,e=this.s.dt,g=this.s.init;b=0;for(a=e.aoColumns.length;b<a;b++)this.s.columns[b]=c.extend(!0,{},h.defaults.column);e.oApi._fnApplyColumnDefs(e,g.aoColumnDefs||g.columnDefs,g.aoColumns||g.columns,function(a,b){d._fnColumnOptions(a,b)});b=0;for(a=e.aoColumns.length;b<
a;b++)if(e=this.s.columns[b],e.read||(e.read=this._fnReadCell),e.write||(e.read=this._fnWriteCell),!e.step)e.read=this._fnStep},_fnColumnOptions:function(d,b){var a=this.s.columns[d],c=function(c,d){b[d[0]]!==m&&(a[c]=b[d[0]]);b[d[1]]!==m&&(a[c]=b[d[1]])};c("enable",["bEnable","enable"]);c("read",["fnRead","read"]);c("write",["fnWrite","write"]);c("step",["fnStep","step"]);c("increment",["bIncrement","increment"])},_fnTargetCoords:function(d){var b=c(d).parents("tr")[0],a=this.s.dt.oInstance.fnGetPosition(d);
return{x:c("td",b).index(d),y:c("tr",b.parentNode).index(b),row:a[0],column:a[2]}},_fnUpdateBorder:function(d,b){var a=this.s.border.width,e=c(d).offset(),g=c(b).offset(),f=e.left-a,i=g.left+c(b).outerWidth(),n=e.top-a,h=g.top+c(b).outerHeight(),j=g.left+c(b).outerWidth()-e.left+2*a,k=g.top+c(b).outerHeight()-e.top+2*a;e.left>g.left&&(f=g.left-a,i=e.left+c(d).outerWidth(),j=e.left+c(d).outerWidth()-g.left+2*a);""!==this.s.dt.oScroll.sY&&(a=c(this.s.dt.nTable.parentNode).offset(),e=c(this.s.dt.nTable.parentNode).scrollTop(),
g=c(this.s.dt.nTable.parentNode).scrollLeft(),f-=a.left-g,i-=a.left-g,n-=a.top-e,h-=a.top-e);a=this.dom.borderTop.style;a.top=n+"px";a.left=f+"px";a.height=this.s.border.width+"px";a.width=j+"px";a=this.dom.borderBottom.style;a.top=h+"px";a.left=f+"px";a.height=this.s.border.width+"px";a.width=j+"px";a=this.dom.borderLeft.style;a.top=n+"px";a.left=f+"px";a.height=k+"px";a.width=this.s.border.width+"px";a=this.dom.borderRight.style;a.top=n+"px";a.left=i+"px";a.height=k+"px";a.width=this.s.border.width+
"px"},_fnFillerDragStart:function(d){var b=this,a=this.dom.currentTarget;this.s.drag.dragging=!0;b.dom.borderTop.style.display="block";b.dom.borderRight.style.display="block";b.dom.borderBottom.style.display="block";b.dom.borderLeft.style.display="block";var e=this._fnTargetCoords(a);this.s.drag.startX=e.x;this.s.drag.startY=e.y;this.s.drag.startTd=a;this.s.drag.endTd=a;this._fnUpdateBorder(a,a);c(j).bind("mousemove.AutoFill",function(a){b._fnFillerDragMove.call(b,a)});c(j).bind("mouseup.AutoFill",
function(a){b._fnFillerFinish.call(b,a)});this.s.screen.y=d.pageY;this.s.screen.height=c(o).height();this.s.screen.scrollTop=c(j).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.top=c(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=this.s.scroller.top+c(this.s.dt.nTable.parentNode).height());this.s.screen.interval=setInterval(function(){var a=c(j).scrollTop();b.s.screen.y=b.s.screen.y+(a-b.s.screen.scrollTop);b.s.screen.height-b.s.screen.y+a<50?c("html, body").animate({scrollTop:a+
50},240,"linear"):b.s.screen.y-a<50&&c("html, body").animate({scrollTop:a-50},240,"linear");b.s.dt.oScroll.sY!==""&&(b.s.screen.y>b.s.scroller.bottom-50?c(b.s.dt.nTable.parentNode).animate({scrollTop:c(b.s.dt.nTable.parentNode).scrollTop()+50},240,"linear"):b.s.screen.y<b.s.scroller.top+50&&c(b.s.dt.nTable.parentNode).animate({scrollTop:c(b.s.dt.nTable.parentNode).scrollTop()-50},240,"linear"))},250)},_fnFillerDragMove:function(d){if(d.target&&"TD"==d.target.nodeName.toUpperCase()&&d.target!=this.s.drag.endTd){var b=
this._fnTargetCoords(d.target);"y"==this.c.mode&&b.x!=this.s.drag.startX&&(d.target=c("tbody>tr:eq("+b.y+")>td:eq("+this.s.drag.startX+")",this.dom.table)[0]);"x"==this.c.mode&&b.y!=this.s.drag.startY&&(d.target=c("tbody>tr:eq("+this.s.drag.startY+")>td:eq("+b.x+")",this.dom.table)[0]);"either"==this.c.mode&&(b.x!=this.s.drag.startX?d.target=c("tbody>tr:eq("+this.s.drag.startY+")>td:eq("+b.x+")",this.dom.table)[0]:b.y!=this.s.drag.startY&&(d.target=c("tbody>tr:eq("+b.y+")>td:eq("+this.s.drag.startX+
")",this.dom.table)[0]));"both"!==this.c.mode&&(b=this._fnTargetCoords(d.target));var a=this.s.drag;a.endTd=d.target;b.y>=this.s.drag.startY?this._fnUpdateBorder(a.startTd,a.endTd):this._fnUpdateBorder(a.endTd,a.startTd);this._fnFillerPosition(d.target)}this.s.screen.y=d.pageY;this.s.screen.scrollTop=c(j).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.scrollTop=c(this.s.dt.nTable.parentNode).scrollTop(),this.s.scroller.top=c(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=
this.s.scroller.top+c(this.s.dt.nTable.parentNode).height())},_fnFillerFinish:function(){var d=this,b,a;c(j).unbind("mousemove.AutoFill mouseup.AutoFill");this.dom.borderTop.style.display="none";this.dom.borderRight.style.display="none";this.dom.borderBottom.style.display="none";this.dom.borderLeft.style.display="none";this.s.drag.dragging=!1;clearInterval(this.s.screen.interval);var e=[],g=this.dom.table,f=this._fnTargetCoords(this.s.drag.startTd),i=this._fnTargetCoords(this.s.drag.endTd),h=function(a){return d.s.dt.oApi._fnVisibleToColumnIndex(d.s.dt,
a)};if(f.y<=i.y)for(b=f.y;b<=i.y;b++)if(f.x<=i.x)for(a=f.x;a<=i.x;a++)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(a=f.x;a>=i.x;a--)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(b=f.y;b>=i.y;b--)if(f.x<=i.x)for(a=f.x;a<=i.x;a++)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(a=f.x;a>=i.x;a--)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:f.x-a,y:f.y-
b,colIdx:h(a)});if(!(1>=e.length)){var g=[],m;b=0;for(a=e.length;b<a;b++){var f=e[b],i=this.s.columns[f.colIdx],h=i.read.call(i,f.node),l=i.step.call(i,f.node,h,m,b,f.x,f.y);i.write.call(i,f.node,l);m=l;g.push({cell:f,colIdx:f.colIdx,newValue:l,oldValue:h})}null!==this.c.complete&&this.c.complete.call(this,g);k.Api?(new k.Api(this.s.dt)).draw(!1):this.s.dt.oInstance.fnDraw()}},_fnFillerDisplay:function(d){var b=this.dom.filler;if(!this.s.drag.dragging){var a="td"==d.target.nodeName.toLowerCase()?
d.target:c(d.target).parents("td")[0],e=this._fnTargetCoords(a).column;if(this.s.columns[e].enable)if("mouseover"==d.type)this.dom.currentTarget=a,this._fnFillerPosition(a),b.style.display="block";else{if(!d.relatedTarget||!d.relatedTarget.className.match(/AutoFill/))b.style.display="none"}else b.style.display="none"}},_fnFillerPosition:function(d){var b=c(d).offset(),a=this.dom.filler;a.style.top=b.top-this.s.filler.height/2-1+c(d).outerHeight()+"px";a.style.left=b.left-this.s.filler.width/2-1+c(d).outerWidth()+
"px"}};k.AutoFill=h;k.AutoFill=h;h.version="1.2.1";h.defaults={mode:"y",complete:null,column:{enable:!0,increment:!0,read:function(d){return c(d).html()},write:function(d,b){var a=c(d).parents("table");if(k.Api)a.DataTable().cell(d).data(b);else{var a=a.dataTable(),e=a.fnGetPosition(d);a.fnUpdate(b,e[0],e[2],!1)}},step:function(c,b,a,e,g,f){c=/(\-?\d+)/;return(e=this.increment&&a?a.match(c):null)?a.replace(c,parseInt(e[1],10)+(0>g||0>f?-1:1)):a===m?b:a}}};return h};"function"===typeof define&&define.amd?
define(["jquery","datatables"],l):"object"===typeof exports?l(require("jquery"),require("datatables")):jQuery&&!jQuery.fn.dataTable.AutoFill&&l(jQuery,jQuery.fn.dataTable)})(window,document);