On the DataTables blog you will find news, announcements and tutorials about DataTables and its suite of extensions. New posts are published monthly, with additional news items in between.
A question that comes up relatively frequently in the forums is "how do I deep link into a DataTable?" This is usually asked in the context of SEO where you want to ensure that all of the data in the table is indexable, but it can also be appropriate in applications where you want to show a table with a specific search term pre-set.
Typically the answer to such a question is to use the initialisation parameters to set whatever option is required from the search string, but it is such a common thing to want to do, it is sensible that we generalise it. To that end, here I present a short script that can be used to extract parameters from a search string and use them to populate a DataTable.
Let's see it in action first - follow the links below to observe the behaviour on the demonstration table:
- Start at page 2
- Set a search term ("software")
- Set a default order on the second column
- Reset - no options.
|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|
When you are working with a software library, you want it to fit into your site and design - not have it force you to its way of thinking. This philosophy is deeply engrained into both DataTables and Editor, as shown by their ability to be styled by various popular CSS frameworks. Editor in particular is designed from the ground up to be flexible and fit into your applications.
The default mode of editing a form in Editor is with a modal window (also sometime referred to as a lightbox). This can be a useful interface paradigm for the end user as it provides separation between the data access and data writing - it quite literally looks like different layers. The downside is that because the form overlays the rest of the page you can loose the context of the data you are editing. This isn't always an issue, but in complex applications it can be useful for the user to refer to other data points when editing a row.
To that end, one common question for Editor is, if it has the ability to show its form in a dedicated area on the page, not in a modal, but rather alongside other content. Absolutely, this is possible! An example is shown below. In this post I'll describe how this example was put together.
Select a row
to edit or delete
By its fundamental nature DataTables operates with repeating data. As developers we naturally want to be able to access and work with that data, processing each item one at a time or manipulating them in some way. This we term iterating or looping over the items. DataTables has a number of built in iteration methods, but if you are new to the DataTables API, it isn't always necessarily obvious which method you should use.
In this post I want to take some time delve into the API and explain the iterators that are built into DataTables and when it is best to use each one. I'll also discuss if there are any penalties for using each iterator (hint - yes, there is usually a trade-off between ease of use and performance).
There are three main iterators in DataTables:
cells().every()- grouped together as they all share the same basic behaviour.