Rendered table not getting scrolled to next page

[nagar57]

I am rendering a table for each row of a table. But the table is not getting scrolled to other pages. On first reload of the dashboard the "Next" page option is working but when collapsing other rows this option stops working.

Here is my java script I am using:

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'],function(
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
    ){
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            // initialize will run once, so we will set up a search and a chart to be reused.
            this._searchManager = new SearchManager({
                id: 'details-search-manager',
                preview: false
            });
            this._TableView = new TableView({
                     managerid: 'details-search-manager'
                 });
        },
        canRender: function(rowData) {
            // Since more than one row expansion renderer can be registered we let each decide if they can handle that
            // data
            // Here we will always handle it.
            return true;
        },
        render: function($container, rowData) {
            // rowData contains information about the row that is expanded.  We can see the cells, fields, and values
            // We will find the sourcetype cell to use its value
            var run_date_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'runDate';
            });
            var job_stage_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'jobStage';
            });
            var job_sub_stage_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'jobSubStage';
            });
            var model_desc_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'modelDescription';
            });
            var channel_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'channel';
            });
            var job_status_cell = _(rowData.cells).find(function (cell) {
               return cell.field === 'jobStatus';
            });
            //update the search with the sourcetype that we are interested in
            //this._searchManager.set({ search: 'index=_internal sourcetype=' + sourcetypeCell.value + ' | timechart count'});
            this._searchManager.set({ search: 'index = abc sourcetype = xyz source="/test/test.log" NOT "training stats" AND NOT "testing stats" | dedup runDate,jobStage,jobSubStage,channel,modelDescription,logMessage | search runDate="'+run_date_cell.value+'" jobStage="'+job_stage_cell.value+'" modelDescription="'+model_desc_cell.value+'" channel="'+channel_cell.value+'" jobSubStage="'+job_sub_stage_cell.value+'" | dedup _time,logMessage | sort _time | table _time,logMessage'});
            // $container is the jquery object where we can put out content.
            // In this case we will render our chart and add it to the $container
            $container.append(this._TableView.render().el);
        }
    });
    var tableElement = mvc.Components.getInstance("job_status");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});