jquery datatables

ReneRam 21 posts 186 karma points

Nov 16, 2021 @ 10:36

Using Umbraco And Getting Started

Umbraco 8

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é

Copy Link

Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Nov 16, 2021 @ 11:59

Hi René

You can use either UmbracoSurfaceController or UmbracoApiController 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-L82

The 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.

Copy Link

ReneRam 21 posts 186 karma points

Nov 16, 2021 @ 16:21

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.

Copy Link

Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Nov 16, 2021 @ 17:28

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.

Copy Link

ReneRam 21 posts 186 karma points

Nov 24, 2021 @ 08:24

For anyone needing the solution, I ended up with the following.

My json file was of the following type:

   {
      "nome":"...",
      "numero":"...",
      "proprietario":"...",
      "durata":"...",
      "file_link_1":"...",
      "file_link_2":"..."
   },
   {
      "nome":"...",
      "numero":"...",
      "proprietario":"...",
      "durata":"...",
      "file_link_1":"...",
      "file_link_2":"..."
   },
   {...

after adding the Master template:

<link href="~/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">



<script src="~/scripts/jquery.dataTables.min.js"></script>

in the css:

/*#region DATATABLES*/
    .dataTables_wrapper .dataTables_filter input {
        max-width:180px;
    }

    .dataTables_wrapper table thead tr th.small {
        font-weight:bold;
    }
/*#endregion*/

in my external script:

$(function () {
    $('.datatables').each(function () {
        var $this = $(this);
        var $table = $this.find('table');
        var url = $this.data('url');

        var columns = [], columnDefs = [];

        var $thead = $table.find('thead');

        var i = 0;
        $thead.find('tr th').each(function () {
            var $th = $(this);
            var col = { "data": $th.data('col') };

            var thType = $th.data('col-type');

            console.log(thType);

            switch (thType) {
                case "link":
                    var baseLinkUrl = $th.data('link-base-url');
                    var colDef = {
                        "targets": i, "render": function (data, type, full, meta) {
                            return '<a href="' + baseLinkUrl + data + '" target="_BLANK">Download</a>';
                        }
                    }

                    columnDefs.push(colDef);

                    break;
                default:

                    break;
            }

            columns.push(col);

            i++;
        });

        $table.DataTable({
            ajax: {
                url: url,
                dataSrc: ''
            },
            language: {
                url: '/scripts/dataTables.italian.json'
            },
            columns: columns,
            columnDefs: columnDefs
        });
    });

and finally in the Razor View:

<div class="datatables" data-url="/mlc/mlc.json">
    <table class="table">
        <thead>
        <tr>
            <th data-col="nome" scope="col">Nome della Nave/Name of ship</th>
            <th data-col="numero" scope="col">Numero IMO/IMO Number</th>
                <th data-col="proprietario" scope="col">Nome Proprietario/Name of the shipowner</th>
                <th data-col="durata" scope="col">Durata della garanzia/Duration of security</th>
                <th class="small" data-col="file_link_2" data-col-type="link" data-link-base-url="/mlc/" scope="col">MLC Regola 4.2 - Standard A4.2.1 (responsabilità dell'armatore) MLC Regulation 4.2 - Standard A4.2.1 (shipowner liability)</th>
                <th class="small" data-col="file_link_1" data-col-type="link" data-link-base-url="/mlc/" scope="col">MLC Regola 2.5 - Standard A2.5.2 (rimpatrio) MLC regulation 2.5 - Standard A2.5.2 (repatriation)</th>
            </tr>
            </thead>
        </table>
    </div>

Obtaining:

stabndard jquery datatable with paging and search

Copy Link

is working on a reply...

Flag this post as spam?

jquery datatables