diff --git a/src/apps/core/i18n/en-US.json b/src/apps/core/i18n/en-US.json
index 1336a580c..bd9fda4ed 100644
--- a/src/apps/core/i18n/en-US.json
+++ b/src/apps/core/i18n/en-US.json
@@ -715,5 +715,16 @@
"__version": "v4.0",
"clipboard": {
"successCopy": "Successfully Copied to Clipboard!"
+ },
+
+ "__comment": "UI-2516: allow users to display more entities",
+ "__version": "v4.0",
+ "tablePageSize": {
+ "show": "Show",
+ "entries": "entries",
+ "ten": "10",
+ "twentyFive": "25",
+ "fifty": "50",
+ "hundred": "100"
}
}
diff --git a/src/apps/core/style/app.scss b/src/apps/core/style/app.scss
index 96da545cd..0c5f417ca 100644
--- a/src/apps/core/style/app.scss
+++ b/src/apps/core/style/app.scss
@@ -629,4 +629,23 @@ body,
.backend-pagination.full .full-load,
.backend-pagination .partial-load {
display: inline-block
+}
+
+/* Page Size Table */
+.table-page-size {
+ float: right;
+ display: inline-block;
+ margin-top: 11px;
+ margin-right: 50px;
+}
+
+.table-page-size select {
+ width: 60px;
+ margin: 0 5px 3px;
+}
+
+/* hacky class to use the same style as footable labels */
+.table-page-size span.label {
+ float: none !important;
+ margin-right: 0 !important;
}
\ No newline at end of file
diff --git a/src/apps/core/views/monster-table-pageSize.html b/src/apps/core/views/monster-table-pageSize.html
new file mode 100644
index 000000000..ee761715e
--- /dev/null
+++ b/src/apps/core/views/monster-table-pageSize.html
@@ -0,0 +1,12 @@
+
+ {{i18n.tablePageSize.show}}
+
+ {{i18n.tablePageSize.entries}}
+
\ No newline at end of file
diff --git a/src/css/lib/custom/footable-add.css b/src/css/lib/custom/footable-add.css
index 7c698def7..193ded85e 100644
--- a/src/css/lib/custom/footable-add.css
+++ b/src/css/lib/custom/footable-add.css
@@ -57,7 +57,7 @@ table.footable.monster-table .footable-paging ul.pagination {
float: right;
}
-table.footable.monster-table > tfoot > tr.footable-paging > td > span.label {
+table.footable.monster-table > tfoot > tr.footable-paging > td span.label {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #333;
float: right;
diff --git a/src/js/lib/monster.ui.js b/src/js/lib/monster.ui.js
index 0c945537a..44d8925c7 100644
--- a/src/js/lib/monster.ui.js
+++ b/src/js/lib/monster.ui.js
@@ -2164,6 +2164,25 @@ define(function(require){
container.find('tbody').append(rows);
});
},
+ addPageSizeComponent = function(container, table, pPageSize) {
+ var pageSize = pPageSize || finalOptions.paging.size || 10,
+ pageSizeTemplate = $(monster.template(monster.apps.core, 'monster-table-pageSize', { pageSize: pageSize })),
+ footableInstance;
+
+ pageSizeTemplate.find('select').on('change', function() {
+ pageSize = parseInt($(this).val());
+ footableInstance = footable.get('#'+table.attr('id'));
+
+ footableInstance.pageSize(pageSize);
+
+ addPageSizeComponent(container, table, pageSize);
+
+ // This is useful so when we use the "load more" button, it uses the right page size we just set
+ finalOptions.paging.size = pageSize;
+ });
+
+ container.find('.footable-paging td').append(pageSizeTemplate);
+ },
filters = {
paginate: false
};
@@ -2201,6 +2220,8 @@ define(function(require){
var newTable = container.footable(finalOptions),
backendTemplate = $(monster.template(monster.apps.core, 'monster-table-backendPagination', { isFull: isAllDataLoaded }));
+ addPageSizeComponent(container, newTable);
+
monster.ui.tooltips(backendTemplate);
container.find('.footable-filtering th form').prepend(backendTemplate);
@@ -2236,13 +2257,17 @@ define(function(require){
finalOptions.getData(filters, function(rows, data) {
addRowsToBody([ rows ]);
- container.footable(finalOptions);
+ var table = container.footable(finalOptions);
+
+ addPageSizeComponent(container, table);
finalOptions.afterInitialized && finalOptions.afterInitialized();
});
}
else {
- container.footable(finalOptions);
+ var table = container.footable(finalOptions);
+
+ addPageSizeComponent(container, table);
finalOptions.afterInitialized && finalOptions.afterInitialized();
}
diff --git a/src/js/main.js b/src/js/main.js
index 986702cc9..64ac791aa 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -74,6 +74,9 @@ require.config({
'plugins': ['jquery'],
'kazoosdk': ['jquery'],
'touch-punch': ['jqueryui'],
+ 'footable': {
+ 'exports': 'FooTable'
+ },
'underscore': {
'exports': '_'
},