Blog

9th Sep 2014

Permanent inline checkboxes

The primary interaction methods used with Editor is its main lightbox input form, the bubble editor or inline editing, but it is also quite possible to construct your own form controls that make use of Editor through its extensive API.

I have recently been asked if it is possible to have checkboxes permanently shown in a table that would show the status of a boolean field and will update that field when toggled with a single click. Using Editor's inline editing option a checkbox can be inserted into the table with a single click and calling the inline()E method, but another click would be needed to change the value and submit the form. Fast, but when you have data where boolean state toggling is common a single click update can improve the interaction of your app.

In this post I show how Editor's API can be used to trigger data updates thorugh the constructions of a table that has a column of checkboxes and will immediately write to the database when toggled. Furthermore, the full row (including the boolean status) will remain editable through the standard Editor editing options.

The code developed in this post can be see running live on the Editor examples site.

Continue reading...

2nd Sep 2014

Alphabet input search - Part II

Continuing a three part series of posts exploring the DataTables custom search options, API and feature plug-ins, this second post extends the alphabet search control introduced in part I of this series to give quick visual feedback to the end user for search terms. This visual information will indicate how many records are in the table for each search option. This is done through use of the DataTables API and displaying an information element using jQuery.

The table, with the alphabet search developed in this post, is shown below.

NamePositionOfficeAgeStart dateSalary
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 AssistantSidney232010/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 SpecialistSidney372011/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

Continue reading...

26th Aug 2014

Alphabet input search - Part I

Search is a core feature of DataTables - in fact it was the first feature that was implemented in the code, way back in 2007 as it was key to what DataTables was designed to do: let users find information in complex data sets quickly and easily. DataTables' search options have come along way since that initial work and provide a range of options through the search()DT method and among others.

Often, however, you will wish to customise the search options of DataTables to match your own needs. This might be as simple as providing a custom input that fits in perfectly with your site's general UX, or you might want to use a complex search algorithm.

To meet this need, DataTables provides a custom search API which can be used to perform whatever search logic you wish. In this three part series of posts I will introduce this API, showing how to use it and provide custom search functions that match your specific needs. As a working example an alphabet search bar will be developed as part of this series showing you how various aspects of the DataTables plug-in system work.

  • Part I (this post): Introducing customer search and showing a clickable alphabet filter
  • Part II: Add user information showing the number of search results for each option in the filter
  • Part III: Creating a feature plug-in for DataTables incorporating the previously developed code for reuse flexibility.

Continue reading...

Historic blog posts