Improved Paginator

UI/Cells/ApprovalStatusCellTemplate.html

@@ -1,6 +1,5 @@
 <ul>
     {{#each this}}
     <li>{{this}}</li>
-    {{debug}}
     {{/each}}
 </ul>

UI/Content/Backgrid/paginator.less

@@ -7,12 +7,20 @@
   border-top            : none;
   .box-sizing(border-box);
   .border-radius(0 0 4px 4px);
+  position: relative;
+
+  .total-records {
+    display    : inline-block;
+    height     : 30px;
+    padding    : 0;
+    line-height: 30px;
+    font-size  : 13px;
+    position   : absolute;
+    right      : 0;
+  }
 
   ul {
     display  : inline-block;
-    *display : inline;
-    margin   : 5px 0;
-    *zoom    : 1;
 
     li {
       display : inline;
@@ -31,10 +39,12 @@
       }
     }
     .active {
-      i, span {
+      span {
         background-color : #f5f5f5;
         color            : #999999;
         cursor           : default;
+        width            : inherit;
+        padding          : 0px 2px;
       }
     }
 

UI/Handlebars/Helpers/Numbers.js

@@ -12,4 +12,8 @@ define(
             return FormatHelpers.pad(input, 2);
         });
 
+        Handlebars.registerHelper('Number', function (input) {
+            return FormatHelpers.Number(input);
+        });
+
     });

UI/Shared/FormatHelpers.js

@@ -33,6 +33,14 @@ define(
                 z = z || '0';
                 n = n + '';
                 return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+            },
+
+            Number: function (input) {
+                if (!input) {
+                    return '';
+                }
+
+                return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
             }
         }
     });

UI/Shared/Grid/Pager.js

@@ -30,6 +30,8 @@ define(
                     return;
                 }
 
+                target.closest('li i').addClass('icon-spinner icon-spin');
+
                 var label = target.attr('data-action');
                 var ffLabels = this.fastForwardHandleLabels;
 
@@ -84,7 +86,8 @@ define(
                             label       : i + 1,
                             title       : 'No. ' + (i + 1),
                             className   : currentPage === i ? 'active' :undefined,
-                            pageNumber: i + 1
+                            pageNumber  : i + 1,
+                            lastPage    : lastPage + 1
                         });
                     }
                 }
@@ -134,7 +137,8 @@ define(
                 var templateFunction = Marionette.TemplateCache.get(this.template);
 
                 this.$el.html(templateFunction({
-                    handles: this.makeHandles()
+                    handles: this.makeHandles(),
+                    state: this.collection.state
                 }));
 
                 this.delegateEvents();

UI/Shared/Grid/PagerTemplate.html

@@ -1,11 +1,15 @@
 <ul>
     {{#each handles}}
-        <li {{#if className}}class="{{className}}"{{/if}}>
+        <li {{#if className}}class="{{className}}"{{/if}} >
             {{#if pageNumber}}
-                <span>{{label}}</span>
+                <span>{{pageNumber}} / {{lastPage}}</span>
             {{else}}
             <i class="pager-btn clickable {{label}}" data-action="{{action}}"/>
             {{/if}}
         </li>
     {{/each}}
 </ul>
+
+        <span class="total-records">
+            Total Records: {{Number state.totalRecords}}
+        </span>