Atlas-4114:UI:Atlas UI : Atlas Entity Audit UI changes for Sorting fixed

Signed-off-by: Nikhil Bonte <nbonte@apache.org>
diff --git a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
index f32dff8..c8d8a50 100644
--- a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
@@ -22,27 +22,5 @@
     </div>
     <div class="auditTable" style="display: none">
         <div id="r_auditTableLayoutView"></div>
-        <div class="pagination-box row">
-            <div class="col-sm-4">
-                <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
-            </div>
-            <div class="col-sm-8 backgrid-paginator">
-                <ul>
-                    <li>
-                        <button type="button" data-id="previousAuditData" title="Previous" disabled=true>
-                            <i class="fa fa-angle-left" aria-hidden="true"></i>
-                        </button>
-                    </li>
-                    <li class="active">
-                        <a href="javascript:void(0)" data-id="activePage"></a>
-                    </li>
-                    <li>
-                        <button type="button" data-id="nextAuditData" title="Next">
-                            <i class="fa fa-angle-right" aria-hidden="true"></i>
-                        </button>
-                    </li>
-                </ul>
-            </div>
-        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/utils/TableLayout.js b/dashboardv2/public/js/utils/TableLayout.js
index 377abca..174d443 100644
--- a/dashboardv2/public/js/utils/TableLayout.js
+++ b/dashboardv2/public/js/utils/TableLayout.js
@@ -201,6 +201,12 @@
                 _.extend(this, options.atlasPaginationOpts);
                 _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
                 _.extend(this.sortOpts, options.sortOpts);
+                if (this.isApiSorting) {
+                    //after audit sorting pagination values
+                    if (this.offset === 0) {
+                        this.limit = this.count || this.limit;
+                    }
+                }
                 if (this.includeAtlasTableSorting) {
                     var oldSortingRef = this.collection.setSorting;
                     this.collection.setSorting = function() {
@@ -298,9 +304,13 @@
                 which in turn removes chevrons from every 'sortable' header-cells*/
                 this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
                     // backgrid:sorted fullCollection trigger required for icon chage
-                    this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
-                    if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
-                        this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
+                    if (this.isApiSorting) {
+                        column.set("direction", direction);
+                    } else {
+                        this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
+                        if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
+                            this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
+                        }
                     }
                 }, this);
                 this.listenTo(this, "grid:refresh", function() {
@@ -376,7 +386,7 @@
                 });
                 if (this.showDefaultTableSorted) {
                     this.grid.render();
-                    if (this.collection.fullCollection.length > 1) {
+                    if (this.collection.fullCollection.length > 1 || this.isApiSorting) {
                         this.grid.sort(this.sortOpts.sortColumn, this.sortOpts.sortDirection);
                     }
                     this.rTableList.show(this.grid);
@@ -472,6 +482,11 @@
                     this.pageTo = this.pageTo - this.limit;
                     this.pageFrom = (this.pageTo - this.limit) + 1;
                 }
+                if (this.isApiSorting && !this.pageTo && !this.pageFrom) {
+                    this.limit = this.count;
+                    this.pageTo = (this.offset + this.limit);
+                    this.pageFrom = this.offset + 1;
+                }
                 this.ui.pageRecordText.html("Showing  <u>" + this.collection.length + " records</u> From " + this.pageFrom + " - " + this.pageTo);
                 this.activePage = Math.round(this.pageTo / this.limit);
                 this.ui.activePage.attr('title', "Page " + this.activePage);
diff --git a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
index ce49f01..d5e453c 100644
--- a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
+++ b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
@@ -39,17 +39,10 @@
             },
 
             /** ui selector cache */
-            ui: {
-                previousAuditData: "[data-id='previousAuditData']",
-                nextAuditData: "[data-id='nextAuditData']",
-                pageRecordText: "[data-id='pageRecordText']",
-                activePage: "[data-id='activePage']"
-            },
+            ui: {},
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.nextAuditData] = "onClickNextAuditData";
-                events["click " + this.ui.previousAuditData] = "onClickPreviousAuditData";
                 return events;
             },
             /**
@@ -59,7 +52,8 @@
             initialize: function(options) {
                 _.extend(this, _.pick(options, 'guid', 'entity', 'entityName', 'attributeDefs'));
                 this.entityCollection = new VEntityList();
-                this.limit = 26;
+                this.limit = 25;
+                this.offset = 0;
                 this.entityCollection.url = UrlLinks.entityCollectionaudit(this.guid);
                 this.entityCollection.modelAttrName = "events";
                 this.entityModel = new this.entityCollection.model();
@@ -68,97 +62,74 @@
                     collection: this.entityCollection,
                     includeFilter: false,
                     includePagination: false,
-                    includePageSize: false,
-                    includeAtlasTableSorting: true,
+                    includeAtlasPagination: true,
+                    includeAtlasPageSize: true,
+                    includeTableLoader: true,
+                    includeAtlasTableSorting: false,
+                    showDefaultTableSorted: true,
+                    columnSorting: false,
                     includeFooterRecords: false,
                     gridOpts: {
                         className: "table table-hover backgrid table-quickMenu",
                         emptyText: 'No records found!'
                     },
+                    sortOpts: {
+                        sortColumn: "timestamp",
+                        sortDirection: "descending"
+                    },
+                    isApiSorting: true,
+                    atlasPaginationOpts: this.getPaginationOptions(),
                     filterOpts: {},
                     paginatorOpts: {}
                 };
                 this.currPage = 1;
+                this.fromSort = false;
             },
             onRender: function() {
-                $.extend(this.entityCollection.queryParams, { count: this.limit });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    nextClick: false,
-                    previous: this.ui.previousAuditData
-                });
+                $.extend(this.entityCollection.queryParams, { offset: this.offset, count: this.limit, sortKey: null, order: "sortOrder", sortBy: "timestamp", sortOrder: "desc" });
+                this.fetchAuditCollection();
+                this.renderTableLayoutView();
+            },
+            fetchAuditCollection: function() {
+                this.commonTableOptions['atlasPaginationOpts'] = this.getPaginationOptions();
+                this.fetchCollection();
                 this.entityCollection.comparator = function(model) {
                     return -model.get('timestamp');
                 }
             },
             bindEvents: function() {},
-            getToOffset: function() {
-                return ((this.limit - 1) * this.currPage);
+            getPaginationOptions: function() {
+                return {
+                    count: this.getPageCount(),
+                    offset: this.entityCollection.queryParams.offset || this.offset,
+                    fetchCollection: this.fetchCollection.bind(this)
+                };
             },
-            getFromOffset: function(toOffset) {
-                // +2 because of toOffset is alrady in minus and limit is +1;
-                return ((toOffset - this.limit) + 2);
-            },
-            renderOffset: function(options) {
-                var entityLength;
-                if (options.nextClick) {
-                    options.previous.removeAttr("disabled");
-                    if (this.entityCollection.length != 0) {
-                        this.currPage++;
-
-                    }
-                } else if (options.previousClick) {
-                    options.next.removeAttr("disabled");
-                    if (this.currPage > 1 && this.entityCollection.models.length) {
-                        this.currPage--;
-                    }
-                }
-                if (this.entityCollection.models.length === this.limit) {
-                    // Because we have 1 extra record.
-                    entityLength = this.entityCollection.models.length - 1;
-                } else {
-                    entityLength = this.entityCollection.models.length
-                }
-                this.ui.activePage.attr('title', "Page " + this.currPage);
-                this.ui.activePage.text(this.currPage);
-                var toOffset = this.getToOffset();
-                this.ui.pageRecordText.html("Showing  <u>" + entityLength + " records</u> From " + this.getFromOffset(toOffset) + " - " + toOffset);
+            getPageCount: function() {
+                return (this.entityCollection.queryParams.limit || this.entityCollection.queryParams.count) || this.limit;
             },
             fetchCollection: function(options) {
                 var that = this;
                 this.$('.fontLoader').show();
                 this.$('.tableOverlay').show();
-                if (that.entityCollection.models.length > 1) {
-                    if (options.nextClick) {
-                        this.pervOld.push(that.entityCollection.first().get('eventKey'));
-                    }
-                }
+                //api needs only sortOrder,count,offset, sortBy queryparams & removed extra queryparams limit,sort_by, order
+                this.entityCollection.queryParams.count = this.getPageCount();
+                this.entityCollection.queryParams = _.omit(this.entityCollection.queryParams, 'limit');
                 this.entityCollection.fetch({
-                    success: function() {
-                        if (!(that.ui.pageRecordText instanceof jQuery)) {
-                            return;
+                    success: function(dataOrCollection, response) {
+                        that.entityCollection.state.pageSize = that.getPageCount();
+                        if (!that.fromSort) {
+                            that.entityCollection.fullCollection.reset(response, $.extend(options));
                         }
-                        if (that.entityCollection.models.length < that.limit) {
-                            options.previous.attr('disabled', true);
-                            options.next.attr('disabled', true);
-                        }
-                        that.renderOffset(options);
-                        that.entityCollection.sort();
-                        if (that.entityCollection.models.length) {
-                            if (that.entityCollection && (that.entityCollection.models.length < that.limit && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) {
-                                options.next.attr('disabled', true);
-                                options.previous.removeAttr("disabled");
-                            } else {
-                                that.next = that.entityCollection.last().get('eventKey');
-                                if (that.pervOld.length === 0) {
-                                    options.previous.attr('disabled', true);
-                                }
-                            }
-                        }
-                        that.renderTableLayoutView();
+                    },
+                    complete: function() {
                         that.$('.fontLoader').hide();
                         that.$('.tableOverlay').hide();
-                        that.$('.auditTable').show(); // Only for first time table show because we never hide after first render.
+                        that.$('.auditTable').show();
+                        if (that.fromSort) {
+                            that.fromSort = !that.fromSort;
+                            that.renderTableLayoutView();
+                        }
                     },
                     silent: true
                 });
@@ -170,15 +141,38 @@
                     that.RAuditTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
                         columns: cols
                     })));
-                    if (!(that.entityCollection.models.length < that.limit)) {
-                        that.RAuditTableLayoutView.$el.find('table tr').last().hide();
+
+                });
+            },
+            backgridHeaderClickHandel: function() {
+                var that = this;
+                return Backgrid.HeaderCell.extend({
+                    onClick: function(e) {
+                        e.preventDefault();
+                        var column = this.column,
+                            direction = "ascending",
+                            columnName = column.get("name").toLocaleLowerCase();
+                        if (column.get("direction") === "ascending") direction = "descending";
+                        column.set("direction", direction);
+                        var options = {
+                            sortBy: columnName,
+                            sortOrder: (direction === "ascending") ? "asc" : "desc",
+                            offset: that.entityCollection.queryParams.offset || that.offset,
+                            count: that.getPageCount()
+                        };
+                        that.commonTableOptions['sortOpts'] = {
+                            sortColumn: columnName,
+                            sortDirection: (direction === "ascending") ? "ascending" : "descending"
+                        };
+                        $.extend(that.entityCollection.queryParams, options);
+                        that.fromSort = true;
+                        that.fetchAuditCollection();
                     }
                 });
             },
             getAuditTableColumns: function() {
                 var that = this;
                 return this.entityCollection.constructor.getTableCols({
-
                     tool: {
                         label: "",
                         cell: "html",
@@ -200,18 +194,19 @@
                                 view.render();
                                 $(el).append($('<div>').html(view.$el));
                             });
-
                         }
                     },
                     user: {
                         label: "Users",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel()
                     },
                     timestamp: {
                         label: "Timestamp",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel(),
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
                                 return Utils.formatDate({ date: rawValue });
@@ -222,6 +217,7 @@
                         label: "Actions",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel(),
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
                                 if (Enums.auditAction[rawValue]) {
@@ -234,35 +230,7 @@
                     }
                 }, this.entityCollection);
 
-            },
-            onClickNextAuditData: function() {
-                var that = this;
-                this.ui.previousAuditData.removeAttr("disabled");
-                $.extend(this.entityCollection.queryParams, {
-                    startKey: function() {
-                        return that.next;
-                    }
-                });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    nextClick: true,
-                    previous: this.ui.previousAuditData
-                });
-            },
-            onClickPreviousAuditData: function() {
-                var that = this;
-                this.ui.nextAuditData.removeAttr("disabled");
-                $.extend(this.entityCollection.queryParams, {
-                    startKey: function() {
-                        return that.pervOld.pop();
-                    }
-                });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    previousClick: true,
-                    previous: this.ui.previousAuditData
-                });
-            },
+            }
         });
     return AuditTableLayoutView;
 });
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
index 0e8fd94..0401049 100644
--- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
@@ -271,6 +271,10 @@
                         emptyText: 'No Records found!',
                         className: 'table table-hover backgrid table-quickMenu colSort'
                     },
+                    sortOpts: {
+                        sortColumn: "name",
+                        sortDirection: "ascending"
+                    },
                     filterOpts: {},
                     paginatorOpts: {}
                 };
diff --git a/dashboardv3/public/js/templates/audit/AuditTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/audit/AuditTableLayoutView_tmpl.html
index f32dff8..c8d8a50 100644
--- a/dashboardv3/public/js/templates/audit/AuditTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/audit/AuditTableLayoutView_tmpl.html
@@ -22,27 +22,5 @@
     </div>
     <div class="auditTable" style="display: none">
         <div id="r_auditTableLayoutView"></div>
-        <div class="pagination-box row">
-            <div class="col-sm-4">
-                <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
-            </div>
-            <div class="col-sm-8 backgrid-paginator">
-                <ul>
-                    <li>
-                        <button type="button" data-id="previousAuditData" title="Previous" disabled=true>
-                            <i class="fa fa-angle-left" aria-hidden="true"></i>
-                        </button>
-                    </li>
-                    <li class="active">
-                        <a href="javascript:void(0)" data-id="activePage"></a>
-                    </li>
-                    <li>
-                        <button type="button" data-id="nextAuditData" title="Next">
-                            <i class="fa fa-angle-right" aria-hidden="true"></i>
-                        </button>
-                    </li>
-                </ul>
-            </div>
-        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/utils/TableLayout.js b/dashboardv3/public/js/utils/TableLayout.js
index 487851e..174d443 100644
--- a/dashboardv3/public/js/utils/TableLayout.js
+++ b/dashboardv3/public/js/utils/TableLayout.js
@@ -201,6 +201,12 @@
                 _.extend(this, options.atlasPaginationOpts);
                 _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
                 _.extend(this.sortOpts, options.sortOpts);
+                if (this.isApiSorting) {
+                    //after audit sorting pagination values
+                    if (this.offset === 0) {
+                        this.limit = this.count || this.limit;
+                    }
+                }
                 if (this.includeAtlasTableSorting) {
                     var oldSortingRef = this.collection.setSorting;
                     this.collection.setSorting = function() {
@@ -263,7 +269,6 @@
                 }
                 this.bindEvents();
             },
-
             /** all events binding here */
             bindEvents: function() {
                 this.listenTo(this.collection, 'request', function() {
@@ -299,9 +304,13 @@
                 which in turn removes chevrons from every 'sortable' header-cells*/
                 this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
                     // backgrid:sorted fullCollection trigger required for icon chage
-                    this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
-                    if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
-                        this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
+                    if (this.isApiSorting) {
+                        column.set("direction", direction);
+                    } else {
+                        this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
+                        if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
+                            this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
+                        }
                     }
                 }, this);
                 this.listenTo(this, "grid:refresh", function() {
@@ -377,7 +386,7 @@
                 });
                 if (this.showDefaultTableSorted) {
                     this.grid.render();
-                    if (this.collection.fullCollection.length > 1) {
+                    if (this.collection.fullCollection.length > 1 || this.isApiSorting) {
                         this.grid.sort(this.sortOpts.sortColumn, this.sortOpts.sortDirection);
                     }
                     this.rTableList.show(this.grid);
@@ -473,6 +482,11 @@
                     this.pageTo = this.pageTo - this.limit;
                     this.pageFrom = (this.pageTo - this.limit) + 1;
                 }
+                if (this.isApiSorting && !this.pageTo && !this.pageFrom) {
+                    this.limit = this.count;
+                    this.pageTo = (this.offset + this.limit);
+                    this.pageFrom = this.offset + 1;
+                }
                 this.ui.pageRecordText.html("Showing  <u>" + this.collection.length + " records</u> From " + this.pageFrom + " - " + this.pageTo);
                 this.activePage = Math.round(this.pageTo / this.limit);
                 this.ui.activePage.attr('title', "Page " + this.activePage);
diff --git a/dashboardv3/public/js/views/audit/AuditTableLayoutView.js b/dashboardv3/public/js/views/audit/AuditTableLayoutView.js
index 7bce6d1..49b84dd 100644
--- a/dashboardv3/public/js/views/audit/AuditTableLayoutView.js
+++ b/dashboardv3/public/js/views/audit/AuditTableLayoutView.js
@@ -39,17 +39,10 @@
             },
 
             /** ui selector cache */
-            ui: {
-                previousAuditData: "[data-id='previousAuditData']",
-                nextAuditData: "[data-id='nextAuditData']",
-                pageRecordText: "[data-id='pageRecordText']",
-                activePage: "[data-id='activePage']"
-            },
+            ui: {},
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.nextAuditData] = "onClickNextAuditData";
-                events["click " + this.ui.previousAuditData] = "onClickPreviousAuditData";
                 return events;
             },
             /**
@@ -59,7 +52,8 @@
             initialize: function(options) {
                 _.extend(this, _.pick(options, 'guid', 'entity', 'entityName', 'attributeDefs'));
                 this.entityCollection = new VEntityList();
-                this.limit = 26;
+                this.limit = 25;
+                this.offset = 0;
                 this.entityCollection.url = UrlLinks.entityCollectionaudit(this.guid);
                 this.entityCollection.modelAttrName = "events";
                 this.entityModel = new this.entityCollection.model();
@@ -68,97 +62,74 @@
                     collection: this.entityCollection,
                     includeFilter: false,
                     includePagination: false,
-                    includePageSize: false,
-                    includeAtlasTableSorting: true,
+                    includeAtlasPagination: true,
+                    includeAtlasPageSize: true,
+                    includeTableLoader: true,
+                    includeAtlasTableSorting: false,
+                    showDefaultTableSorted: true,
+                    columnSorting: false,
                     includeFooterRecords: false,
                     gridOpts: {
                         className: "table table-hover backgrid table-quickMenu",
                         emptyText: 'No records found!'
                     },
+                    sortOpts: {
+                        sortColumn: "timestamp",
+                        sortDirection: "descending"
+                    },
+                    isApiSorting: true,
+                    atlasPaginationOpts: this.getPaginationOptions(),
                     filterOpts: {},
                     paginatorOpts: {}
                 };
                 this.currPage = 1;
+                this.fromSort = false;
             },
             onRender: function() {
-                $.extend(this.entityCollection.queryParams, { count: this.limit });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    nextClick: false,
-                    previous: this.ui.previousAuditData
-                });
+                $.extend(this.entityCollection.queryParams, { offset: this.offset, count: this.limit, sortKey: null, order: "sortOrder", sortBy: "timestamp", sortOrder: "desc" });
+                this.fetchAuditCollection();
+                this.renderTableLayoutView();
+            },
+            fetchAuditCollection: function() {
+                this.commonTableOptions['atlasPaginationOpts'] = this.getPaginationOptions();
+                this.fetchCollection();
                 this.entityCollection.comparator = function(model) {
                     return -model.get('timestamp');
                 }
             },
             bindEvents: function() {},
-            getToOffset: function() {
-                return ((this.limit - 1) * this.currPage);
+            getPaginationOptions: function() {
+                return {
+                    count: this.getPageCount(),
+                    offset: this.entityCollection.queryParams.offset || this.offset,
+                    fetchCollection: this.fetchCollection.bind(this)
+                };
             },
-            getFromOffset: function(toOffset) {
-                // +2 because of toOffset is alrady in minus and limit is +1;
-                return ((toOffset - this.limit) + 2);
-            },
-            renderOffset: function(options) {
-                var entityLength;
-                if (options.nextClick) {
-                    options.previous.removeAttr("disabled");
-                    if (this.entityCollection.length != 0) {
-                        this.currPage++;
-
-                    }
-                } else if (options.previousClick) {
-                    options.next.removeAttr("disabled");
-                    if (this.currPage > 1 && this.entityCollection.models.length) {
-                        this.currPage--;
-                    }
-                }
-                if (this.entityCollection.models.length === this.limit) {
-                    // Because we have 1 extra record.
-                    entityLength = this.entityCollection.models.length - 1;
-                } else {
-                    entityLength = this.entityCollection.models.length
-                }
-                this.ui.activePage.attr('title', "Page " + this.currPage);
-                this.ui.activePage.text(this.currPage);
-                var toOffset = this.getToOffset();
-                this.ui.pageRecordText.html("Showing  <u>" + entityLength + " records</u> From " + this.getFromOffset(toOffset) + " - " + toOffset);
+            getPageCount: function() {
+                return (this.entityCollection.queryParams.limit || this.entityCollection.queryParams.count) || this.limit;
             },
             fetchCollection: function(options) {
                 var that = this;
                 this.$('.fontLoader').show();
                 this.$('.tableOverlay').show();
-                if (that.entityCollection.models.length > 1) {
-                    if (options.nextClick) {
-                        this.pervOld.push(that.entityCollection.first().get('eventKey'));
-                    }
-                }
+                //api needs only sortOrder,count,offset, sortBy queryparams & removed extra queryparams limit,sort_by, order
+                this.entityCollection.queryParams.count = this.getPageCount();
+                this.entityCollection.queryParams = _.omit(this.entityCollection.queryParams, 'limit');
                 this.entityCollection.fetch({
-                    success: function() {
-                        if (!(that.ui.pageRecordText instanceof jQuery)) {
-                            return;
+                    success: function(dataOrCollection, response) {
+                        that.entityCollection.state.pageSize = that.getPageCount();
+                        if (!that.fromSort) {
+                            that.entityCollection.fullCollection.reset(response, $.extend(options));
                         }
-                        if (that.entityCollection.models.length < that.limit) {
-                            options.previous.attr('disabled', true);
-                            options.next.attr('disabled', true);
-                        }
-                        that.renderOffset(options);
-                        that.entityCollection.sort();
-                        if (that.entityCollection.models.length) {
-                            if (that.entityCollection && (that.entityCollection.models.length < that.limit && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) {
-                                options.next.attr('disabled', true);
-                                options.previous.removeAttr("disabled");
-                            } else {
-                                that.next = that.entityCollection.last().get('eventKey');
-                                if (that.pervOld.length === 0) {
-                                    options.previous.attr('disabled', true);
-                                }
-                            }
-                        }
-                        that.renderTableLayoutView();
+                    },
+                    complete: function() {
                         that.$('.fontLoader').hide();
                         that.$('.tableOverlay').hide();
-                        that.$('.auditTable').show(); // Only for first time table show because we never hide after first render.
+                        that.$('.auditTable').show();
+                        if (that.fromSort) {
+                            that.fromSort = !that.fromSort;
+                            that.renderTableLayoutView();
+                        }
                     },
                     silent: true
                 });
@@ -170,15 +141,38 @@
                     that.RAuditTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
                         columns: cols
                     })));
-                    if (!(that.entityCollection.models.length < that.limit)) {
-                        that.RAuditTableLayoutView.$el.find('table tr').last().hide();
+
+                });
+            },
+            backgridHeaderClickHandel: function() {
+                var that = this;
+                return Backgrid.HeaderCell.extend({
+                    onClick: function(e) {
+                        e.preventDefault();
+                        var column = this.column,
+                            direction = "ascending",
+                            columnName = column.get("name").toLocaleLowerCase();
+                        if (column.get("direction") === "ascending") direction = "descending";
+                        column.set("direction", direction);
+                        var options = {
+                            sortBy: columnName,
+                            sortOrder: (direction === "ascending") ? "asc" : "desc",
+                            offset: that.entityCollection.queryParams.offset || that.offset,
+                            count: that.getPageCount()
+                        };
+                        that.commonTableOptions['sortOpts'] = {
+                            sortColumn: columnName,
+                            sortDirection: (direction === "ascending") ? "ascending" : "descending"
+                        };
+                        $.extend(that.entityCollection.queryParams, options);
+                        that.fromSort = true;
+                        that.fetchAuditCollection();
                     }
                 });
             },
             getAuditTableColumns: function() {
                 var that = this;
                 return this.entityCollection.constructor.getTableCols({
-
                     tool: {
                         label: "",
                         cell: "html",
@@ -193,7 +187,6 @@
                                 'views/audit/CreateAuditTableLayoutView',
                             ], function(CreateAuditTableLayoutView) {
                                 that.action = model.get('action');
-                                // $(el.target).attr('disabled', true);
                                 var eventModel = that.entityCollection.fullCollection.findWhere({ 'eventKey': model.get('eventKey') }).toJSON(),
                                     collectionModel = new that.entityCollection.model(eventModel),
                                     view = new CreateAuditTableLayoutView({ guid: that.guid, entityModel: collectionModel, action: that.action, entity: that.entity, entityName: that.entityName, attributeDefs: that.attributeDefs });
@@ -206,11 +199,13 @@
                         label: "Users",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel()
                     },
                     timestamp: {
                         label: "Timestamp",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel(),
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
                                 return Utils.formatDate({ date: rawValue });
@@ -221,6 +216,7 @@
                         label: "Actions",
                         cell: "html",
                         editable: false,
+                        headerCell: that.backgridHeaderClickHandel(),
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
                                 if (Enums.auditAction[rawValue]) {
@@ -233,35 +229,7 @@
                     }
                 }, this.entityCollection);
 
-            },
-            onClickNextAuditData: function() {
-                var that = this;
-                this.ui.previousAuditData.removeAttr("disabled");
-                $.extend(this.entityCollection.queryParams, {
-                    startKey: function() {
-                        return that.next;
-                    }
-                });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    nextClick: true,
-                    previous: this.ui.previousAuditData
-                });
-            },
-            onClickPreviousAuditData: function() {
-                var that = this;
-                this.ui.nextAuditData.removeAttr("disabled");
-                $.extend(this.entityCollection.queryParams, {
-                    startKey: function() {
-                        return that.pervOld.pop();
-                    }
-                });
-                this.fetchCollection({
-                    next: this.ui.nextAuditData,
-                    previousClick: true,
-                    previous: this.ui.previousAuditData
-                });
-            },
+            }
         });
     return AuditTableLayoutView;
 });
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/search/SearchResultLayoutView.js b/dashboardv3/public/js/views/search/SearchResultLayoutView.js
index 17f2e3b..67679bb 100644
--- a/dashboardv3/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv3/public/js/views/search/SearchResultLayoutView.js
@@ -280,6 +280,10 @@
                         emptyText: 'No Records found!',
                         className: 'table table-hover backgrid table-quickMenu colSort'
                     },
+                    sortOpts: {
+                        sortColumn: "name",
+                        sortDirection: "ascending"
+                    },
                     filterOpts: {},
                     paginatorOpts: {}
                 };