智能表 - 从code设置页面 [英] Smart-table - Setting page from code

问题描述

我使用的是非常好的表库智能表以显示我的数据。

I'm using the very good table library Smart-table to display my data.

我使用的是自定义分页模板。不过，我想是能够从code设置第1页。我已经在它暴露了ST-管指令读了，但似乎我需要，如果我实现一个重新写整个过滤/分页/排序code喽。

I am using a custom pagination template. I would however like to be able to set page 1 from the code. I have read up on the st-pipe directive it exposes, but it seems that I would need to re-write the whole filtering/pagination/sorting code myself if I implement that.

我是经过简单的方法来编程设置页面，从存在于我的表的 TFOOT ST-分页指令之外code>

I'm after a simple way to programatically set a page from outside of the st-pagination directive that exists in my table's tfoot

<table st-table="displayedCollection" st-safe-src="tags" class="table table-hover">
    <tbody>
        <tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)">
            <td>
                <span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required>
                {{tag.name}}</span>
            </td>
            <td>
                <span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required>
                {{tag.path}}</span>
            </td>
            <td>
                <form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)">
                    <!-- EDIT -->
                    <button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible">
                        <i class="fa fa-pencil-square-o fa-lg"></i>
                    </button>
                </form>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="1" class="text-left">
                <div st-template="app/partials/pagination.html" st-pagination="" st-items-by-page="pager.itemsOnPage"></div>
            </td>
            <td colspan="1">
                <div class="btn-group btn-group-sm pull-right ng-scope">
                    <button type="button" ng-class="{'active':pager.itemsOnPage==5}" ng-click="pager.itemsOnPage=5" class="btn btn-default">5</button>
                    <button type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</button>
                    <button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</button>
                    <button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</button>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

我希望能够从＆LT设置页面;形式＆GT; 部分 OnShow中指令。

有谁知道这是否可能？非常感谢。

Does anyone know if this is possible? Many thanks.

推荐答案

要设置从code中的角智能表页码，使用ST-分页的请选择数据（）函数。

To set the angular-smart-table page number from code use st-pagination's selectPage() function.

如果你的HTML有一个分页程序元素是这样的：

Where your HTML has a paginator element like this:

<div id="pagerId" st-pagination="" st-items-by- ...

您可以用code像这样在你的指令

You could use code like this in your directive

function setPage(pageNumber)
{
    angular
       .element( $('#pagerId') )
       .isolateScope()
       .selectPage(pageNumber);
}

您需要有jQuery的安装使用$。我的想法得到了从最后一个例子： http://lorenzofox3.github.io/smart-表网站/

You need to have jQuery installed to use $. I got the idea from the last example on: http://lorenzofox3.github.io/smart-table-website/

这篇关于智能表 - 从code设置页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！