Copied to clipboard

Flag this post as spam?

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


  • Adriano Fabri 459 posts 1602 karma points
    Jun 04, 2018 @ 11:58
    Adriano Fabri
    0

    How to use the umbPagination directive

    Hi to all. I have big problems using the umbraco pagination directive.

    In my package have a table with the list of DB logs. Now I'm trying to to use the umbPagination directive to page this list.

    I followed the official guide founded at the following link (https://our.umbraco.org/apidocs/ui/#/api/umbraco.directives.directive:umbPagination).

    The result is that the page navigation buttons are correctly displayed but the log's list isn't paged. All logs are shown in the first page.

    What I wrong?

    This is my view:

    <table id="FHLogTable" class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th class="text-center">Id</th>
                <th class="text-center">Date</th>
            <tr>
        </thead>
        <tbody>
            <tr ng-click="openDetailsModal(logItem, filteredLogs)" ng-repeat="logItem in filteredLogs = (logs.ListDBLogs | filter:q) | orderBy:sortKey:reverse" current-page="vm.pagination.pageNumber">
                <td class="text-center">{{ logItem.LogId }}</td>
                <td class="text-center">{{ logItem.LogDate | date: 'dd/MM/yyyy HH:mm:ss' }}</td>
            <tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <umb-pagination 
                        ng-if="filteredLogs.length > 0 && !$scope.showLoader"
                        page-size="vm.pagination.pageSize"
                        page-number="vm.pagination.pageNumber"
                        total-pages="vm.pagination.totalPages"
                        on-next="vm.nextPage"
                        on-prev="vm.prevPage"
                        on-go-to-page="vm.goToPage">
                    </umb-pagination>
               </td>
           </tr>
       </tfoot>
    </table>
    

    With this code, the pagination buttons are correctly shown but the table is not paged.

    What can I do to show the logs as a paged list?

    Thanks Adriano

  • Adriano Fabri 459 posts 1602 karma points
    Jun 14, 2018 @ 09:45
    Adriano Fabri
    0

    I tried also to change the classic table as umb-table...but I have the same result

    <div class="umb-table">
        <div class="umb-table-head">
            <div class="umb-table-row">
                <div class="umb-table-cell">Id</div>
                <div class="umb-table-cell">Date</localize></div>
            </div>
        </div>
        <div class="umb-table-body">
            <div class="umb-table-row" ng-click="openDetailsModal(logItem, filteredLogs)" ng-repeat="logItem in filteredLogs = (logs.ListDBLogs | filter:q) | orderBy:sortKey:reverse" current-page="vm.pagination.pageNumber" style="font-size: 0.8rem;">
                <div class="umb-table-cell">{{ logItem.LogId }}</div>
                <div class="umb-table-cell">{{ logItem.LogDate | date: 'dd/MM/yyyy' }}<br />{{ logItem.LogDate | date: 'HH:mm:ss' }}</div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center">
        <umb-pagination 
            ng-if="filteredLogs.length > 0 && !$scope.showLoader"
            page-number="vm.pagination.pageNumber"
            total-pages="vm.pagination.totalPages"
            on-next="vm.nextPage"
            on-prev="vm.prevPage"
            on-go-to-page="vm.goToPage">
        </umb-pagination>
    </div>
    
  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Jun 14, 2018 @ 11:03
    Dan Diplo
    1

    There's an example of using it in my Audit Log Viewer package you may be able to find handy:

    https://github.com/DanDiplo/Umbraco.AuditLogViewer

    Examples

    Angular View

    Angular Controller

    C# Controller

  • Adriano Fabri 459 posts 1602 karma points
    Jun 14, 2018 @ 12:54
    Adriano Fabri
    0

    Thank you Dan, I saw your code but I don't understand what I'm doing wrong.

    It seems that my code is correct.

    I am going crazy!!!

    If I give you (tell me how) the actual angular controller and view, you can help me to understand where is the problem?

    Thank you

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Jun 14, 2018 @ 13:44
    Dan Diplo
    100

    The actual pagination is done in the SQL, which uses the db.Page

    eg. db.Page<LogEntry>(request.PageNumber, request.ItemsPerPage, query);

    https://github.com/DanDiplo/Umbraco.AuditLogViewer/blob/master/Diplo.AuditLogViewer/Services/LogService.cs

  • Adriano Fabri 459 posts 1602 karma points
    Jun 19, 2018 @ 12:19
    Adriano Fabri
    0

    Wonderful...now the DB Logs viewer works like a charm :-) Thank you very much.

    Now I'm trying to do the same with the Trace logs viewer...but for now I have the right pagination's buttons, but the log list is not paged.

    I'm trying to use PagedResult...but it isn't working.

    I'm working to solve it.

Please Sign in or register to post replies

Write your reply to:

Draft