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.
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.
|Tiger Nixon||System Architect||Edinburgh||61||2011/04/25||$320,800|
|Ashton Cox||Junior Technical Author||San Francisco||66||2009/01/12||$86,000|
|Brielle Williamson||Integration Specialist||New York||61||2012/12/02||$372,000|
|Herrod Chandler||Sales Assistant||San Francisco||59||2012/08/06||$137,500|
|Rhona Davidson||Integration Specialist||Tokyo||55||2010/10/14||$327,900|
|Sonya Frost||Software Engineer||Edinburgh||23||2008/12/13||$103,600|
|Jena Gaines||Office Manager||London||30||2008/12/19||$90,560|
|Quinn Flynn||Support Lead||Edinburgh||22||2013/03/03||$342,000|
|Charde Marshall||Regional Director||San Francisco||36||2008/10/16||$470,600|
|Haley Kennedy||Senior Marketing Designer||London||43||2012/12/18||$313,500|
|Tatyana Fitzpatrick||Regional Director||London||19||2010/03/17||$385,750|
|Michael Silva||Marketing Designer||London||66||2012/11/27||$198,500|
|Paul Byrd||Chief Financial Officer (CFO)||New York||64||2010/06/09||$725,000|
|Gloria Little||Systems Administrator||New York||59||2009/04/10||$237,500|
|Bradley Greer||Software Engineer||London||41||2012/10/13||$132,000|
|Dai Rios||Personnel Lead||Edinburgh||35||2012/09/26||$217,500|
|Jenette Caldwell||Development Lead||New York||30||2011/09/03||$345,000|
|Yuri Berry||Chief Marketing Officer (CMO)||New York||40||2009/06/25||$675,000|
|Caesar Vance||Pre-Sales Support||New York||21||2011/12/12||$106,450|
|Doris Wilder||Sales Assistant||Sidney||23||2010/09/20||$85,600|
|Angelica Ramos||Chief Executive Officer (CEO)||London||47||2009/10/09||$1,200,000|
|Jennifer Chang||Regional Director||Singapore||28||2010/11/14||$357,650|
|Brenden Wagner||Software Engineer||San Francisco||28||2011/06/07||$206,850|
|Fiona Green||Chief Operating Officer (COO)||San Francisco||48||2010/03/11||$850,000|
|Shou Itou||Regional Marketing||Tokyo||20||2011/08/14||$163,000|
|Michelle House||Integration Specialist||Sidney||37||2011/06/02||$95,400|
|Prescott Bartlett||Technical Author||London||27||2011/05/07||$145,000|
|Gavin Cortez||Team Leader||San Francisco||22||2008/10/26||$235,500|
|Martena Mccray||Post-Sales support||Edinburgh||46||2011/03/09||$324,050|
|Unity Butler||Marketing Designer||San Francisco||47||2009/12/09||$85,675|
|Howard Hatfield||Office Manager||San Francisco||51||2008/12/16||$164,500|
|Hope Fuentes||Secretary||San Francisco||41||2010/02/12||$109,850|
|Vivian Harrell||Financial Controller||San Francisco||62||2009/02/14||$452,500|
|Timothy Mooney||Office Manager||London||37||2008/12/11||$136,200|
|Jackson Bradshaw||Director||New York||65||2008/09/26||$645,750|
|Olivia Liang||Support Engineer||Singapore||64||2011/02/03||$234,500|
|Bruno Nash||Software Engineer||London||38||2011/05/03||$163,500|
|Sakura Yamamoto||Support Engineer||Tokyo||37||2009/08/19||$139,575|
|Thor Walton||Developer||New York||61||2013/08/11||$98,540|
|Finn Camacho||Support Engineer||San Francisco||47||2009/07/07||$87,500|
|Serge Baldwin||Data Coordinator||Singapore||64||2012/04/09||$138,575|
|Zenaida Frank||Software Engineer||New York||63||2010/01/04||$125,250|
|Zorita Serrano||Software Engineer||San Francisco||56||2012/06/01||$115,000|
|Cara Stevens||Sales Assistant||New York||46||2011/12/06||$145,600|
|Hermione Butler||Regional Director||London||47||2011/03/21||$356,250|
|Lael Greer||Systems Administrator||London||21||2009/02/27||$103,500|
|Jonas Alexander||Developer||San Francisco||30||2010/07/14||$86,500|
|Shad Decker||Regional Director||Edinburgh||51||2008/11/13||$183,000|
|Donna Snider||Customer Support||New York||27||2011/01/25||$112,000|
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.