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 323 posts 1071 karma points
    20 days ago
    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 323 posts 1071 karma points
    1 week ago
    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 1291 posts 4808 karma points MVP 2x c-trib
    1 week ago
    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 323 posts 1071 karma points
    1 week ago
    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 1291 posts 4808 karma points MVP 2x c-trib
    1 week ago
    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 323 posts 1071 karma points
    5 days ago
    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