DataTables
Editor
Manual
Download
Show site navigation

Blog

On the DataTables blog you will find news, announcements and tutorials about DataTables and its suite of extensions. New posts are published (usually!) monthly, with additional news items in between.

21st Jun 2019
By Colin Marks -

Scroll To Top

By default, the paging controls of a DataTable (the Next, Previous and page number buttons) are placed beneath the table. If you have a large number of rows which won't fit on a single page, when the page is changed, the user has to scroll up to the top to see the first few rows. In this blog post I introduce a very simple feature plug-in called scrollToTop which, when enabled will automatically scroll to the head of the table whenever the page is changed.

An example is shown below. Scroll down to the paging button and click one to see it in action.

NamePositionOfficeSalary
Tiger NixonSystem ArchitectEdinburgh$320,800
Garrett WintersAccountantTokyo$170,750
Ashton CoxJunior Technical AuthorSan Francisco$86,000
Cedric KellySenior Javascript DeveloperEdinburgh$433,060
Airi SatouAccountantTokyo$162,700
Brielle WilliamsonIntegration SpecialistNew York$372,000
Herrod ChandlerSales AssistantSan Francisco$137,500
Rhona DavidsonIntegration SpecialistTokyo$327,900
Colleen HurstJavascript DeveloperSan Francisco$205,500
Sonya FrostSoftware EngineerEdinburgh$103,600
Jena GainesOffice ManagerLondon$90,560
Quinn FlynnSupport LeadEdinburgh$342,000
Charde MarshallRegional DirectorSan Francisco$470,600
Haley KennedySenior Marketing DesignerLondon$313,500
Tatyana FitzpatrickRegional DirectorLondon$385,750
Michael SilvaMarketing DesignerLondon$198,500
Paul ByrdChief Financial Officer (CFO)New York$725,000
Gloria LittleSystems AdministratorNew York$237,500
Bradley GreerSoftware EngineerLondon$132,000
Dai RiosPersonnel LeadEdinburgh$217,500
Jenette CaldwellDevelopment LeadNew York$345,000
Yuri BerryChief Marketing Officer (CMO)New York$675,000
Caesar VancePre-Sales SupportNew York$106,450
Doris WilderSales AssistantSidney$85,600
Angelica RamosChief Executive Officer (CEO)London$1,200,000
Gavin JoyceDeveloperEdinburgh$92,575
Jennifer ChangRegional DirectorSingapore$357,650
Brenden WagnerSoftware EngineerSan Francisco$206,850
Fiona GreenChief Operating Officer (COO)San Francisco$850,000
Shou ItouRegional MarketingTokyo$163,000
Michelle HouseIntegration SpecialistSidney$95,400
Suki BurksDeveloperLondon$114,500
Prescott BartlettTechnical AuthorLondon$145,000
Gavin CortezTeam LeaderSan Francisco$235,500
Martena MccrayPost-Sales supportEdinburgh$324,050
Unity ButlerMarketing DesignerSan Francisco$85,675
Howard HatfieldOffice ManagerSan Francisco$164,500
Hope FuentesSecretarySan Francisco$109,850
Vivian HarrellFinancial ControllerSan Francisco$452,500
Timothy MooneyOffice ManagerLondon$136,200
Jackson BradshawDirectorNew York$645,750
Olivia LiangSupport EngineerSingapore$234,500
Bruno NashSoftware EngineerLondon$163,500
Sakura YamamotoSupport EngineerTokyo$139,575
Thor WaltonDeveloperNew York$98,540
Finn CamachoSupport EngineerSan Francisco$87,500
Serge BaldwinData CoordinatorSingapore$138,575
Zenaida FrankSoftware EngineerNew York$125,250
Zorita SerranoSoftware EngineerSan Francisco$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh$75,650
Cara StevensSales AssistantNew York$145,600
Hermione ButlerRegional DirectorLondon$356,250
Lael GreerSystems AdministratorLondon$103,500
Jonas AlexanderDeveloperSan Francisco$86,500
Shad DeckerRegional DirectorEdinburgh$183,000
Michael BruceJavascript DeveloperSingapore$183,000
Donna SniderCustomer SupportNew York$112,000

Continue reading...

15th Apr 2019
By Allan Jardine -

Refreshing data before editing

A web-based CRUD system such as Editor is by its very nature concurrent - i.e. multiple users could be updating data at the same time. Those users might be in the same office, or they might be on opposite sides of the world, but one thing you don't want to happen is for one user to make updates to a row, then have another user undo those changes by submitting information without realising it has changed already.

Ultimately the best solution for this is to update the data in the table in real-time - that is a complex topic and something we will be exploring in future (stay tuned!), but in this post I would like to introduce a mechanism that can be used with minimal code effort and no disruption in an existing code base: refreshing the data for the row(s) to be edited when the user triggers editing on a row.

To do this, we'll develop a new Button that can perform this action before triggering editing, in a reusable component. The result is shown below (note that this looks very similar to standard editing in Editor, but an Ajax request is used to refresh the data when clicking Edit. A second browser window showing this page can be used to create your own form of concurrency, updating the data from one in the other:

Name Position Office Salary
Name Position Office Salary

Continue reading...

15th Feb 2019
By Colin Marks -

Installing Editor in WordPress

There's been several forum questions recently asking how to configure DataTables or Editor within a WordPress website. This blog post provides a simple demonstration to quickly get DataTables and Editor working on your page. In this demonstration we show how to install DataTables in WordPress using two different methods:

  • Direct script inclusion for fine grained control
  • TablePress - a WordPress plug-in by Tobias Bäthge for a fully integrated DataTables / WordPress editing environment.

We also discuss how to install and configure Editor using direct inclusion.

Continue reading...

Historic blog posts

Page navigation

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2019 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.