Skip to content

A
atlas
Commit 83fbe467 by kevalbhatt
Options

ATLAS-3007 UI : Add go to page and page limit option for local pagination

parent 2a3b8830
Showing with 82 additions and 30 deletions
dashboardv2/public/js/templates/common/TableLayout_tmpl.html
...@@ -45,7 +45,17 @@ ...@@ -45,7 +45,17 @@
<div class="row clearfix banded pagination-box"> <div class="row clearfix banded pagination-box">
<div class="col-sm-offset-4 col-sm-8"> <div class="col-sm-offset-4 col-sm-8">
<div class="inline-content-fr"> <div class="inline-content-fr">
<div data-id="r_pagination" class="inline"></div> <div data-id="r_pagination" data-id="paginationDiv" class="inline"></div>
{{#if includeGotoPage}}
<div class="inline col-sm-4" data-id="paginationDiv" style="display:none">
<div class="input-group" data-id="goToPageDiv">
<input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button>
</span>
</div>
</div>
{{/if}}
{{#if includePageSize}} {{#if includePageSize}}
<div class="inline"> <div class="inline">
<div class="inline-content"> <div class="inline-content">
......
dashboardv2/public/js/utils/TableLayout.js
...@@ -24,13 +24,15 @@ define(['require', ...@@ -24,13 +24,15 @@ define(['require',
'hbs!tmpl/common/TableLayout_tmpl', 'hbs!tmpl/common/TableLayout_tmpl',
'utils/Messages', 'utils/Messages',
'utils/Utils', 'utils/Utils',
'utils/Globals',
'utils/CommonViewFunction',
'backgrid-filter', 'backgrid-filter',
'backgrid-paginator', 'backgrid-paginator',
'backgrid-sizeable', 'backgrid-sizeable',
'backgrid-orderable', 'backgrid-orderable',
'backgrid-select-all', 'backgrid-select-all',
'backgrid-columnmanager' 'backgrid-columnmanager'
], function(require, Backbone, FSTablelayoutTmpl, Messages, Utils) { ], function(require, Backbone, FSTablelayoutTmpl, Messages, Utils, Globals, CommonViewFunction) {
'use strict'; 'use strict';
var FSTableLayout = Backbone.Marionette.LayoutView.extend( var FSTableLayout = Backbone.Marionette.LayoutView.extend(
...@@ -125,12 +127,16 @@ define(['require', ...@@ -125,12 +127,16 @@ define(['require',
includeAtlasPagination: false, includeAtlasPagination: false,
includeAtlasPageSize: false,
includeFilter: false, includeFilter: false,
includeHeaderSearch: false, includeHeaderSearch: false,
includePageSize: false, includePageSize: false,
includeGotoPage: false,
includeFooterRecords: true, includeFooterRecords: true,
includeColumnManager: false, includeColumnManager: false,
...@@ -147,6 +153,7 @@ define(['require', ...@@ -147,6 +153,7 @@ define(['require',
var events = {}, var events = {},
that = this; that = this;
events['change ' + this.ui.selectPageSize] = 'onPageSizeChange'; events['change ' + this.ui.selectPageSize] = 'onPageSizeChange';
events['change ' + this.ui.showPage] = 'changePageLimit';
events["click " + this.ui.nextData] = "onClicknextData"; events["click " + this.ui.nextData] = "onClicknextData";
events["click " + this.ui.previousData] = "onClickpreviousData"; events["click " + this.ui.previousData] = "onClickpreviousData";
events["click " + this.ui.gotoPagebtn] = 'gotoPagebtn'; events["click " + this.ui.gotoPagebtn] = 'gotoPagebtn';
...@@ -174,15 +181,9 @@ define(['require', ...@@ -174,15 +181,9 @@ define(['require',
initialize: function(options) { initialize: function(options) {
this.limit = 25; this.limit = 25;
this.offset = 0; this.offset = 0;
_.extend(this, _.pick(options, 'collection', 'columns', 'includePagination', 'includeHeaderSearch', 'includeFilter', 'includePageSize', _.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts'));
'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeTableLoader', 'includeAtlasPagination', 'atlasPaginationOpts')); _.extend(this, options.atlasPaginationOpts);
_.extend(this, this.atlasPaginationOpts);
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
_.extend(this.filterOpts, options.filterOpts);
_.extend(this.paginatorOpts, options.paginatorOpts);
_.extend(this.controlOpts, options.controlOpts);
_.extend(this.columnOpts, options.columnOpts);
this.bindEvents(); this.bindEvents();
}, },
...@@ -197,6 +198,9 @@ define(['require', ...@@ -197,6 +198,9 @@ define(['require',
this.listenTo(this.collection, 'reset', function(collection, options) { this.listenTo(this.collection, 'reset', function(collection, options) {
this.$('div[data-id="r_tableSpinner"]').removeClass('show'); this.$('div[data-id="r_tableSpinner"]').removeClass('show');
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
this.ui.gotoPagebtn.prop("disabled", true);
if (this.includePagination) { if (this.includePagination) {
this.renderPagination(); this.renderPagination();
} }
...@@ -204,7 +208,7 @@ define(['require', ...@@ -204,7 +208,7 @@ define(['require',
this.renderFooterRecords(this.collection.state); this.renderFooterRecords(this.collection.state);
} }
if (this.includeAtlasPagination) { if (this.includeAtlasPagination) {
this.renderAtlasPagination(options); this.renderAtlasPagination(collection, options);
} }
}, this); }, this);
...@@ -261,14 +265,24 @@ define(['require', ...@@ -261,14 +265,24 @@ define(['require',
if (this.includeColumnManager) { if (this.includeColumnManager) {
this.renderColumnManager(); this.renderColumnManager();
} }
var pageSizeEl = null;
if (this.includePageSize) { if (this.includePageSize) {
this.ui.selectPageSize.select2({ pageSizeEl = this.ui.selectPageSize;
} else if (this.includeAtlasPageSize) {
pageSizeEl = this.ui.showPage;
}
if (pageSizeEl) {
pageSizeEl.select2({
data: _.sortBy(_.union([25, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], [this.collection.state.pageSize])), data: _.sortBy(_.union([25, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], [this.collection.state.pageSize])),
tags: true, tags: true,
dropdownCssClass: "number-input", dropdownCssClass: "number-input",
multiple: false multiple: false
}); });
this.ui.selectPageSize.val(this.collection.state.pageSize).trigger('change', { "skipViewChange": true }); var val = this.collection.state.pageSize;
if (this.value && this.value.pageLimit) {
val = this.limit;
}
pageSizeEl.val(val).trigger('change', { "skipViewChange": true });
} }
}, },
...@@ -305,6 +319,7 @@ define(['require', ...@@ -305,6 +319,7 @@ define(['require',
this.rPagination.show(new Backgrid.Extension.Paginator(options)); this.rPagination.show(new Backgrid.Extension.Paginator(options));
} else if (this.regions.rPagination) { } else if (this.regions.rPagination) {
this.$('div[data-id="r_pagination"]').show(new Backgrid.Extension.Paginator(options)); this.$('div[data-id="r_pagination"]').show(new Backgrid.Extension.Paginator(options));
this.showHideGoToPage();
} }
}, },
...@@ -392,6 +407,14 @@ define(['require', ...@@ -392,6 +407,14 @@ define(['require',
} }
}, },
showHideGoToPage: function() {
if (this.collection.state.pageSize > this.collection.fullCollection.length) {
this.ui.paginationDiv.hide();
} else {
this.ui.paginationDiv.show();
}
},
/** /**
* show/hide filter of the grid * show/hide filter of the grid
*/ */
...@@ -423,6 +446,9 @@ define(['require', ...@@ -423,6 +446,9 @@ define(['require',
* ColumnManager for the table * ColumnManager for the table
*/ */
renderColumnManager: function() { renderColumnManager: function() {
if (!this.columns) {
return;
}
var that = this, var that = this,
$el = this.columnOpts.el || this.$("[data-id='control']"), $el = this.columnOpts.el || this.$("[data-id='control']"),
colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts.opts), colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts.opts),
...@@ -446,7 +472,6 @@ define(['require', ...@@ -446,7 +472,6 @@ define(['require',
that.collection.trigger("state-changed"); that.collection.trigger("state-changed");
}); });
}, },
renderSizeAbleColumns: function() { renderSizeAbleColumns: function() {
// Add sizeable columns // Add sizeable columns
var that = this, var that = this,
...@@ -507,11 +532,17 @@ define(['require', ...@@ -507,11 +532,17 @@ define(['require',
onPageSizeChange: function(e, options) { onPageSizeChange: function(e, options) {
if (!options || !options.skipViewChange) { if (!options || !options.skipViewChange) {
var pagesize = $(e.currentTarget).val(); var pagesize = $(e.currentTarget).val();
if (pagesize == 0) {
this.ui.selectPageSize.data('select2').$container.addClass('has-error');
return;
} else {
this.ui.selectPageSize.data('select2').$container.removeClass('has-error');
}
this.collection.state.pageSize = parseInt(pagesize, 10); this.collection.state.pageSize = parseInt(pagesize, 10);
this.collection.state.currentPage = this.collection.state.firstPage; this.collection.state.currentPage = this.collection.state.firstPage;
this.showHideGoToPage();
if (this.collection.mode == "client") { if (this.collection.mode == "client") {
this.collection.reset(this.collection.toJSON()); this.collection.fullCollection.reset(this.collection.fullCollection.toJSON());
} else { } else {
this.collection.fetch({ this.collection.fetch({
sort: false, sort: false,
...@@ -521,6 +552,9 @@ define(['require', ...@@ -521,6 +552,9 @@ define(['require',
} }
} }
}, },
/**
atlasNextBtn
**/
onClicknextData: function() { onClicknextData: function() {
this.offset = this.offset + this.limit; this.offset = this.offset + this.limit;
_.extend(this.collection.queryParams, { _.extend(this.collection.queryParams, {
...@@ -532,14 +566,15 @@ define(['require', ...@@ -532,14 +566,15 @@ define(['require',
this.triggerUrl(); this.triggerUrl();
} }
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
if (this.fetchCollection) { if (this.fetchCollection) {
this.fetchCollection({ this.fetchCollection({
next: true next: true
}); });
} }
}, },
/**
atlasPrevBtn
**/
onClickpreviousData: function() { onClickpreviousData: function() {
this.offset = this.offset - this.limit; this.offset = this.offset - this.limit;
if (this.offset <= -1) { if (this.offset <= -1) {
...@@ -554,15 +589,15 @@ define(['require', ...@@ -554,15 +589,15 @@ define(['require',
this.triggerUrl(); this.triggerUrl();
} }
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
if (this.fetchCollection) { if (this.fetchCollection) {
this.fetchCollection({ this.fetchCollection({
previous: true previous: true
}); });
} }
}, },
// TODO : Need to add pageLimit for atlasPagination /**
atlasPageLimit
**/
changePageLimit: function(e, obj) { changePageLimit: function(e, obj) {
if (!obj || (obj && !obj.skipViewChange)) { if (!obj || (obj && !obj.skipViewChange)) {
var limit = parseInt(this.ui.showPage.val()); var limit = parseInt(this.ui.showPage.val());
...@@ -581,16 +616,22 @@ define(['require', ...@@ -581,16 +616,22 @@ define(['require',
this.triggerUrl(); this.triggerUrl();
} }
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
_.extend(this.collection.queryParams, { limit: this.limit, offset: this.offset }); _.extend(this.collection.queryParams, { limit: this.limit, offset: this.offset });
this.fetchCollection(); this.fetchCollection();
} }
}, },
/**
atlasGotoBtn & Local Goto Btn
**/
gotoPagebtn: function(e) { gotoPagebtn: function(e) {
var that = this; var that = this;
var goToPage = parseInt(this.ui.gotoPage.val()); var goToPage = parseInt(this.ui.gotoPage.val());
if (!(_.isNaN(goToPage) || goToPage <= -1)) { if (!(_.isNaN(goToPage) || goToPage <= -1)) {
if (this.collection.mode == "client") {
return this.collection.getPage((goToPage - 1), {
reset: true
});
} else {
this.offset = (goToPage - 1) * this.limit; this.offset = (goToPage - 1) * this.limit;
if (this.offset <= -1) { if (this.offset <= -1) {
this.offset = 0; this.offset = 0;
...@@ -614,6 +655,7 @@ define(['require', ...@@ -614,6 +655,7 @@ define(['require',
} }
} }
} }
}
}); });
return FSTableLayout; return FSTableLayout;
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
...@@ -79,7 +79,8 @@ define(['require', ...@@ -79,7 +79,8 @@ define(['require',
collection: this.schemaCollection, collection: this.schemaCollection,
includeFilter: false, includeFilter: false,
includePagination: true, includePagination: true,
includePageSize: false, includePageSize: true,
includeGotoPage: true,
includeFooterRecords: true, includeFooterRecords: true,
includeOrderAbleColumns: false, includeOrderAbleColumns: false,
gridOpts: { gridOpts: {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
...@@ -375,6 +375,9 @@ define(['require', ...@@ -375,6 +375,9 @@ define(['require',
if (that.isDestroyed) { if (that.isDestroyed) {
return; return;
} }
that.ui.gotoPage.val('');
that.ui.gotoPage.parent().removeClass('has-error');
that.ui.gotoPagebtn.prop("disabled", true);
Globals.searchApiCallRef = undefined; Globals.searchApiCallRef = undefined;
var isFirstPage = that.offset === 0, var isFirstPage = that.offset === 0,
dataLength = 0, dataLength = 0,
...@@ -1006,8 +1009,6 @@ define(['require', ...@@ -1006,8 +1009,6 @@ define(['require',
this.value.pageOffset = this.offset; this.value.pageOffset = this.offset;
this.triggerUrl(); this.triggerUrl();
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
this.fetchCollection(null, { this.fetchCollection(null, {
next: true next: true
}); });
...@@ -1024,8 +1025,6 @@ define(['require', ...@@ -1024,8 +1025,6 @@ define(['require',
this.value.pageOffset = this.offset; this.value.pageOffset = this.offset;
this.triggerUrl(); this.triggerUrl();
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
this.fetchCollection(null, { this.fetchCollection(null, {
previous: true previous: true
}); });
...@@ -1074,8 +1073,6 @@ define(['require', ...@@ -1074,8 +1073,6 @@ define(['require',
this.value.pageOffset = this.offset; this.value.pageOffset = this.offset;
this.triggerUrl(); this.triggerUrl();
} }
this.ui.gotoPage.val('');
this.ui.gotoPage.parent().removeClass('has-error');
_.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset }); _.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset });
this.fetchCollection(); this.fetchCollection();
} }
......
dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
...@@ -86,6 +86,8 @@ define(['require', ...@@ -86,6 +86,8 @@ define(['require',
includePagination: true, includePagination: true,
includePageSize: false, includePageSize: false,
includeFooterRecords: true, includeFooterRecords: true,
includePageSize: true,
includeGotoPage: true,
gridOpts: { gridOpts: {
className: "table table-hover backgrid table-quickMenu", className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!' emptyText: 'No records found!'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment