Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • ReneRam 21 posts 186 karma points
    Nov 16, 2021 @ 10:36
    ReneRam
    0

    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é

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Nov 16, 2021 @ 11:59
    Bjarne Fyrstenborg
    1

    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.

  • ReneRam 21 posts 186 karma points
    Nov 16, 2021 @ 16:21
    ReneRam
    0

    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.

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Nov 16, 2021 @ 17:28
    Bjarne Fyrstenborg
    0

    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.

  • ReneRam 21 posts 186 karma points
    Nov 24, 2021 @ 08:24
    ReneRam
    100

    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

Please Sign in or register to post replies

Write your reply to:

Draft