Hello to evebody.
I'm in the need of inserting a jquery datatable inside a partial view, the table has more 1250 rows and would need paging, sorting and search provided by the jquery datatable plugin.
Does anyone have a working sample. I havn't found any documentation niether in Umbraco or in the datatables plugin website.
Thanks Bjarne,
I don't need to call any ajax, it's an archive of old data, I have to create a static table with data from a simple json file that I can present the to the user and let him download a pdf file stored in the Media folder.
You could try populatating the datatable with all JSON entries, but I am not sure how DataTables performs with thousand records.. it render all DOM table rows, but hide the ones not on current page.
jquery datatables
Hello to evebody. I'm in the need of inserting a jquery datatable inside a partial view, the table has more 1250 rows and would need paging, sorting and search provided by the jquery datatable plugin. Does anyone have a working sample. I havn't found any documentation niether in Umbraco or in the datatables plugin website.
Thanks René
Hi René
You can use either
UmbracoSurfaceController
orUmbracoApiController
to serve the data from server side.Either use you own paged model or you could use
PagedResult
from Umbraco core, e.g. see this example from Vendr demo store: https://github.com/vendrhub/vendr-demo-store/blob/v1/main/src/Vendr.DemoStore/Web/Controllers/ProductSurfaceController.cs#L45-L82The DataTables isn't Umbraco specific, so you just need to fetch the JSON data and populate the data to DataTables.
There are plenty of examples here: https://datatables.net/examples/index
We a smaller amount of data you could fetch all data and configurate the paging in configuration of DataTables.
However with a larger dataset, you need to fetch the data via Ajax: https://datatables.net/examples/ajax/
You can fetch the JSON data from the Surface or ApiController as string arrays: https://datatables.net/examples/ajax/simple.html
or as array of objects: https://datatables.net/examples/ajax/objects.html
I would recommended the latter one as it is easier to add, remove or adjust properties later and maybe also use same dataset in other contexts.
Thanks Bjarne, I don't need to call any ajax, it's an archive of old data, I have to create a static table with data from a simple json file that I can present the to the user and let him download a pdf file stored in the Media folder.
You could try populatating the datatable with all JSON entries, but I am not sure how DataTables performs with thousand records.. it render all DOM table rows, but hide the ones not on current page.
For anyone needing the solution, I ended up with the following.
My json file was of the following type:
after adding the Master template:
in the css:
in my external script:
and finally in the Razor View:
Obtaining:
is working on a reply...