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.
Hi everyone, I’m Sandy and I’ve been working on DataTables with the rest of the team since the start of the Summer. I am currently studying Computer and Electronic Systems at the University of Strathclyde. I’m just about to start my third year of studying and am really enjoying my time both there and here at DataTables. My first project was to develop a optimised CDN delivery server (the subject of this blog post) and I have recently moved on to developing the much anticipated SearchPane extension (more about which in a future post)!
With the continued need to improve the performance of the datatables package as a whole, it was decided that there was also a need to upgrade the CDN distribution. Before such a task was undertaken, a decision was made to analyse the current statistics on the current use of the CDN and how it is being used. The data analysed here is being used internally to optimise the new CDN server for real world usage. We found the results interesting so are publishing this post purely to provide information for the interest of the DataTables community rather than anything practical.
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.
|Tiger Nixon||System Architect||Edinburgh||$320,800|
|Ashton Cox||Junior Technical Author||San Francisco||$86,000|
|Brielle Williamson||Integration Specialist||New York||$372,000|
|Herrod Chandler||Sales Assistant||San Francisco||$137,500|
|Rhona Davidson||Integration Specialist||Tokyo||$327,900|
|Sonya Frost||Software Engineer||Edinburgh||$103,600|
|Jena Gaines||Office Manager||London||$90,560|
|Quinn Flynn||Support Lead||Edinburgh||$342,000|
|Charde Marshall||Regional Director||San Francisco||$470,600|
|Haley Kennedy||Senior Marketing Designer||London||$313,500|
|Tatyana Fitzpatrick||Regional Director||London||$385,750|
|Michael Silva||Marketing Designer||London||$198,500|
|Paul Byrd||Chief Financial Officer (CFO)||New York||$725,000|
|Gloria Little||Systems Administrator||New York||$237,500|
|Bradley Greer||Software Engineer||London||$132,000|
|Dai Rios||Personnel Lead||Edinburgh||$217,500|
|Jenette Caldwell||Development Lead||New York||$345,000|
|Yuri Berry||Chief Marketing Officer (CMO)||New York||$675,000|
|Caesar Vance||Pre-Sales Support||New York||$106,450|
|Doris Wilder||Sales Assistant||Sidney||$85,600|
|Angelica Ramos||Chief Executive Officer (CEO)||London||$1,200,000|
|Jennifer Chang||Regional Director||Singapore||$357,650|
|Brenden Wagner||Software Engineer||San Francisco||$206,850|
|Fiona Green||Chief Operating Officer (COO)||San Francisco||$850,000|
|Shou Itou||Regional Marketing||Tokyo||$163,000|
|Michelle House||Integration Specialist||Sidney||$95,400|
|Prescott Bartlett||Technical Author||London||$145,000|
|Gavin Cortez||Team Leader||San Francisco||$235,500|
|Martena Mccray||Post-Sales support||Edinburgh||$324,050|
|Unity Butler||Marketing Designer||San Francisco||$85,675|
|Howard Hatfield||Office Manager||San Francisco||$164,500|
|Hope Fuentes||Secretary||San Francisco||$109,850|
|Vivian Harrell||Financial Controller||San Francisco||$452,500|
|Timothy Mooney||Office Manager||London||$136,200|
|Jackson Bradshaw||Director||New York||$645,750|
|Olivia Liang||Support Engineer||Singapore||$234,500|
|Bruno Nash||Software Engineer||London||$163,500|
|Sakura Yamamoto||Support Engineer||Tokyo||$139,575|
|Thor Walton||Developer||New York||$98,540|
|Finn Camacho||Support Engineer||San Francisco||$87,500|
|Serge Baldwin||Data Coordinator||Singapore||$138,575|
|Zenaida Frank||Software Engineer||New York||$125,250|
|Zorita Serrano||Software Engineer||San Francisco||$115,000|
|Cara Stevens||Sales Assistant||New York||$145,600|
|Hermione Butler||Regional Director||London||$356,250|
|Lael Greer||Systems Administrator||London||$103,500|
|Jonas Alexander||Developer||San Francisco||$86,500|
|Shad Decker||Regional Director||Edinburgh||$183,000|
|Donna Snider||Customer Support||New York||$112,000|
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: