javascript - 智能表 : set page programmatically

标签 javascript angularjs smart-table

我正在使用智能表格,并且希望在创建 Controller 并显示表格后跳转到特定页面。

我发现这段代码可以以编程方式执行此操作 here在堆栈溢出上:

angular.element( $('#pagination') ).isolateScope().selectPage(pageNumber);

“pagination”是我的智能表分页 div 的 HTML id。在 Controller 退出(因为isolateScope 返回“未定义”)之前,我无法调用此函数。所以我想我会在几毫秒后调用它以确保表/页面已完全创建。

selectPage 在我的自定义分页中工作,如果我从页面底部的按钮调用它,它可以工作,但如果从计时器调用它,则不行。我已经追踪到智能表 selectPage() 和 pipeline() 函数的来源,但看不出区别 - 一个有效,另一个无效。

请参阅Plunker :按一下按钮,就会按预期跳到第 5 页。按另一个按钮设置 3 秒计时器,该计时器应跳转到第 2 页,但没有任何反应...

最佳答案

显然,有一种更好的方式从“外部”与智能表进行通信。

如果将 st-table 指令移动到外部 div(在本例中移动到正文):

<body ng-controller="mainCtrl" st-table="displayed">

然后我们可以创建一个指令,该指令将需要插件的 Controller 并使用其功能:

app.directive('handlePagination', function ($timeout) {
    return {
        require: '^stTable',
        restrict: 'AE',
        transclude: true,
        template: '<button class="btn btn-success btn-xs" ng-click="" ng-transclude></button>',
        scope: {
          goToPage: '@',
          delay: '@'
        },
        link: function link(scope, element, attrs, controller) {
            scope.delay = scope.delay || 0;
            element.on('click', function() {
              var page = scope.goToPage; 
              if (page > 0 && page <= controller.tableState().pagination.numberOfPages) {
                $timeout(function() {
                   controller.slice((page - 1) * controller.tableState().pagination.number, controller.tableState().pagination.number);
                }, scope.delay) 
              }
            })
        }
    };
});

看到这个plnkr

关于javascript - 智能表 : set page programmatically,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43707604/

相关文章:

javascript - promise 链中的 async.queue ?

javascript - Angular js ng-change 事件

javascript - Angular 范围不会在 View 上更新

javascript - Angular 智能表根据范围变量设置默认排序顺序

javascript - 如何在智能表中按日期对项目进行排序

javascript - 子阵选择

javascript - 使用 JavaScript 将非 www 重定向到 www

javascript - CanvasJs动态图表显示空白数据?

javascript - ng-keypress 调用 angularjs 中的函数