Fork me on GitHub
Reply New Topic
2019/3/8 15:02:56
#1
Offline
Quite a regular

Adding data table plugin to improve tables

Hello!  I'm trying to customize the standard   icms_ipf_view_Table Actually, in order to use DataTable jquery Plugin I overwrote my system_persistabletable_display.html file in order to be able to use the plugin. (https://datatables.net/

For small tables it works like a charm, but when you have slightly bigger ones (around 1k records), data is being fetched completely and then Datatable is redendered. The downside is that it becomes really slow untill all loading is completed.  

I've also tried to keep the tree selector where I can have limits for 10, 15 etc records, but then I cannot access more data than selected for some reason.  I have other, larger tables where I can see thing getting too slow then. 

Reading the documentation I came up to defer loading, json rendering and background loading methods, but I don't know how to apply thoses changes inside impresscms in order to have it running.

Some links I read:  https://datatables.net/examples/server_side/defer_loading.html http://datatables.net/release-datatables/extras/Scroller/large_js_source.html https://datatables.net/faqs/#speed Any thought on how to optimize this loading process? 

Thanks!


_________________
PerspectivaNET Web Solutions

2019/3/9 8:34:32
#2
Offline
Webmaster

Re: Adding data table plugin to improve tables

Datatables integration would be great, so please do a PR for 2.0 once you have something that works

The problem that you are experiencing is that the data is managed in 2 worlds : the javascript world and the PHP world. The javascript world (datatables.js) works with the data that you give it. In a simple situation, the basic configuration of datatables works fine : you feed it all the data, and everything is managed inside the datatables implementation, on the client browser.

As you found out, that is limited to small datasets. Once you get into the few hundreds, the browser slows down considerably. The trick is to plugin PHP functionality to replace some of the functions that datatables does in the browser, and shift the workload as much as possible to the server. Sorting and such as well, because if you load only 15 elements inside of datatables, in its standard configuration, it will only work with those 15 lines, giving very funny results, that will be plain wrong

in my opinion, you will need to write an integration for the loading, updating, sorting, searching of data from datatables within ImpressCMS. Once you have that, the sky will be the limit


_________________

Me on Ohloh


2019/3/13 18:13:15
#3
Offline
Home away from home

Re: Adding data table plugin to improve tables

This may be related to something I was just hashing over for page speed optimization. Google's Page Speed Insights suggests changing the parsing and execution of scripts and stylesheets and putting them only just before they are needed. Placing script tags and stylesheet tags in the header of a page actually stops page rendering until they are downloaded and parsed. See this info page from Google.

I'm experimenting with making all the javascripts 'defered' to start with. Some of this can be done in the theme, and some of it has to happen in the core - the $icms_module_header adds scripts and stylesheets like linkexternal.js and all the jQuery script files.

Anybody know of any reason NOT to defer their execution until the end of the page rendering?


_________________

Steve Twitter: @skenow Facebook: Steve Kenow


2019/3/15 15:44:12
#4
Offline
Webmaster

Re: Adding data table plugin to improve tables

I looked around, and stumbled upon this page : https://bitsofco.de/async-vs-defer/ where the author explains a bit what the different options are, and when you can use what.

Putting scripts at the end of the page to make the browser take them into account last is an option. But that will not always offer the biggest speed improvement, because you will still be loading the files one after the other. If the script in question has no dependencies, you could use the "async" keyword, to indicate to the browser that it can load the javascript file in parallel with parsing and downloading the HTML.

In the end, lesser files to download, even if they are bigger, is also an optimization. So you could also consider using tools like webpack, to reduce the size and the number of files you include in your page as an extra optimisation.


_________________

Me on Ohloh


2019/3/17 15:02:36
#5
Offline
Webmaster

Re: Adding data table plugin to improve tables

Hi @Eyekeeper, is there any place where we could check out your datatables integration? I would love to add it into the ImpressCMS 2.0 betas


_________________

Me on Ohloh


Reply New Topic extras
 Previous Topic   Next Topic
You can view topic.
You can start a new topic.
You can reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You cannot vote in polls.
You cannot attach files to posts.
You can post without approval.

Recent Posts