DataTables example - Scroll - vertical (2024)

This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination fordisplaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work justfine with pagination enabled as well!).

To enable y-scrolling simply set the scrollY parameter to be whatever you want the container wrapper's height to be (any CSS measurement isacceptable, or just a number which is treated as pixels).

Note also that the scrollCollapse option is enabled in this example. This will have the container match the height of the rows shownin the table if that height is smaller than that given height by the scrollY.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011-04-25$320,800
Garrett WintersAccountantTokyo632011-07-25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009-01-12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012-03-29$433,060
Airi SatouAccountantTokyo332008-11-28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012-12-02$372,000
Herrod ChandlerSales AssistantSan Francisco592012-08-06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010-10-14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009-09-15$205,500
Sonya FrostSoftware EngineerEdinburgh232008-12-13$103,600
Jena GainesOffice ManagerLondon302008-12-19$90,560
Quinn FlynnSupport LeadEdinburgh222013-03-03$342,000
Charde MarshallRegional DirectorSan Francisco362008-10-16$470,600
Haley KennedySenior Marketing DesignerLondon432012-12-18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010-03-17$385,750
Michael SilvaMarketing DesignerLondon662012-11-27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010-06-09$725,000
Gloria LittleSystems AdministratorNew York592009-04-10$237,500
Bradley GreerSoftware EngineerLondon412012-10-13$132,000
Dai RiosPersonnel LeadEdinburgh352012-09-26$217,500
Jenette CaldwellDevelopment LeadNew York302011-09-03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009-06-25$675,000
Caesar VancePre-Sales SupportNew York212011-12-12$106,450
Doris WilderSales AssistantSydney232010-09-20$85,600
Angelica RamosChief Executive Officer (CEO)London472009-10-09$1,200,000
Gavin JoyceDeveloperEdinburgh422010-12-22$92,575
Jennifer ChangRegional DirectorSingapore282010-11-14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011-06-07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010-03-11$850,000
Shou ItouRegional MarketingTokyo202011-08-14$163,000
Michelle HouseIntegration SpecialistSydney372011-06-02$95,400
Suki BurksDeveloperLondon532009-10-22$114,500
Prescott BartlettTechnical AuthorLondon272011-05-07$145,000
Gavin CortezTeam LeaderSan Francisco222008-10-26$235,500
Martena MccrayPost-Sales supportEdinburgh462011-03-09$324,050
Unity ButlerMarketing DesignerSan Francisco472009-12-09$85,675
Howard HatfieldOffice ManagerSan Francisco512008-12-16$164,500
Hope FuentesSecretarySan Francisco412010-02-12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009-02-14$452,500
Timothy MooneyOffice ManagerLondon372008-12-11$136,200
Jackson BradshawDirectorNew York652008-09-26$645,750
Olivia LiangSupport EngineerSingapore642011-02-03$234,500
Bruno NashSoftware EngineerLondon382011-05-03$163,500
Sakura YamamotoSupport EngineerTokyo372009-08-19$139,575
Thor WaltonDeveloperNew York612013-08-11$98,540
Finn CamachoSupport EngineerSan Francisco472009-07-07$87,500
Serge BaldwinData CoordinatorSingapore642012-04-09$138,575
Zenaida FrankSoftware EngineerNew York632010-01-04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012-06-01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013-02-01$75,650
Cara StevensSales AssistantNew York462011-12-06$145,600
Hermione ButlerRegional DirectorLondon472011-03-21$356,250
Lael GreerSystems AdministratorLondon212009-02-27$103,500
Jonas AlexanderDeveloperSan Francisco302010-07-14$86,500
Shad DeckerRegional DirectorEdinburgh512008-11-13$183,000
Michael BruceJavascript DeveloperSingapore292011-06-27$183,000
Donna SniderCustomer SupportNew York272011-01-25$112,000
NamePositionOfficeAgeStart dateSalary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script
  • Comments

The Javascript shown below is used to initialise the table shown in this example:

$('#example').DataTable({paging: false,scrollCollapse: true,scrollY: '200px'});

new DataTable('#example', {paging: false,scrollCollapse: true,scrollY: '200px'});

In addition to the above code, the following Javascript library files are loaded for use in this example:

    The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

    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. Theadditional CSS used is shown below:

    The following CSS library files are loaded for use in this example to provide the styling of the table:

      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 isloaded.

      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 the protocol described in the DataTablesdocumentation.

      Other examples

      Basic initialisation

      • Zero configuration
      • Feature enable / disable
      • Default ordering (sorting)
      • Multi-column ordering
      • Multiple tables
      • Hidden columns
      • Complex headers (rowspan and colspan)
      • Flexible table width
      • State saving
      • Alternative pagination
      • Data rendering
      • Scroll - vertical
      • Scroll - vertical, dynamic height
      • Scroll - horizontal
      • Scroll - horizontal and vertical

      Advanced initialisation

      • DOM / jQuery events
      • DataTables events
      • Column rendering
      • Enter Key to Search
      • Page length options
      • Complex headers with column visibility
      • Read HTML to data objects
      • HTML5 data-* attributes - cell data
      • HTML5 data-* attributes - table options
      • Setting defaults
      • Row created callback
      • Row grouping
      • Footer callback
      • Order direction sequence control
      • DOM element return from renderer

      Data sources

      • HTML (DOM) sourced data
      • Ajax sourced data
      • Javascript sourced data
      • Server-side processing

      Language and Internationalisation

      • Language - display data type
      • Auto-locale display
      • Locale based number display
      • Language - auto render
      • Language options
      • Language - Comma decimal place
      • Right-to-left language support
      • Remote language file
      • Remote language file + local definitions

      DateTime

      • ISO8601 detection
      • Auto-locale display (Moment.js)
      • Auto-locale display (Luxon)
      • Date rendering (Moment.js)
      • Date rendering (Luxon)
      • Format transform (Moment.js)
      • Format transform (Luxon)
      • Ordering formatted dates (Moment.js)
      • Ordering formatted dates (Luxon)

      Plug-ins

      • API plug-in methods
      • Ordering plug-ins (with type detection)
      • Ordering plug-ins (no type detection)
      • Custom filtering - range search
      • Live DOM ordering

      Styling

      • Base style
      • Base style - no styling classes
      • Base style - cell borders
      • Base style - compact
      • Base style - hover
      • Base style - order-column
      • Base style - row borders
      • Base style - stripe
      • Bootstrap 3
      • Bootstrap 4
      • Bootstrap 5
      • Foundation
      • Fomantic-UI (formally Semantic-UI)
      • Bulma
      • jQuery UI ThemeRoller
      • Material Design (Tech. preview)
      • Tailwind CSS (Tech. preview)
      • UIKit 3 (Tech. preview)

      Layout

      • Table controls positioning
      • Table controls positioning with options
      • Grid layout
      • Element IDs and classes
      • Multiple table control elements
      • Custom controls - nodes
      • Custom controls - defined by functions
      • Custom controls - plug-ins
      • Legacy dom option

      API

      • Add rows
      • Individual column searching (text inputs)
      • Individual column searching (select inputs)
      • Highlighting rows and columns
      • Child rows (show extra / detailed information)
      • Child rows with StateSave
      • Row selection (multiple rows)
      • Row selection and deletion (single row)
      • Form inputs
      • Index column
      • Show / hide columns dynamically
      • Using API in callbacks
      • Scrolling and Bootstrap tabs
      • Search API (regular expressions)
      • HighCharts Integration

      Ajax

      • Ajax data source (arrays)
      • Ajax data source (objects)
      • Nested object data (objects)
      • Nested object data (arrays)
      • Orthogonal data
      • Generated content for a column
      • Custom data source property
      • Flat array data source
      • Deferred rendering feature

      Server-side

      • Server-side processing
      • Custom HTTP variables
      • POST data
      • Return key to search
      • Automatic addition of row ID attributes
      • Object data source
      • Row details
      • JSONP data source for remote domains
      • Deferred loading of data
      • Pipelining data to reduce Ajax calls for paging
      DataTables example - Scroll - vertical (2024)

      References

      Top Articles
      Latest Posts
      Recommended Articles
      Article information

      Author: Jerrold Considine

      Last Updated:

      Views: 6286

      Rating: 4.8 / 5 (58 voted)

      Reviews: 89% of readers found this page helpful

      Author information

      Name: Jerrold Considine

      Birthday: 1993-11-03

      Address: Suite 447 3463 Marybelle Circles, New Marlin, AL 20765

      Phone: +5816749283868

      Job: Sales Executive

      Hobby: Air sports, Sand art, Electronics, LARPing, Baseball, Book restoration, Puzzles

      Introduction: My name is Jerrold Considine, I am a combative, cheerful, encouraging, happy, enthusiastic, funny, kind person who loves writing and wants to share my knowledge and understanding with you.