2015-04-28 67 views
6

我使用非常好的表库Smart-table来显示我的数据。智能表 - 从代码设置页面

我正在使用自定义分页模板。然而,我希望能够从代码中设置页面1。我已经阅读了它公开的st-pipe指令,但似乎我需要自己重写整个过滤/分页/排序代码,如果我实现它。

我经过简单的方式来设定编程页面从st-pagination指令存在于外我的表的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> 

我希望能够从<form>部分设置页面onshow指令。

有谁知道这是可能的吗?非常感谢。

回答

9

要从代码中设置角度智能表页码,请使用st-paination的selectPage()函数。

如果你的HTML有这样的分页程序元素:

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

你可以在你的指令

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

你需要有jQuery的安装到$使用使用这样的代码。我从最后一个例子中得到了这样的想法:http://lorenzofox3.github.io/smart-table-website/

+1

.isolateScope()返回'undefined',当我做.scope()时,它返回与我执行函数的控制器相同的作用域 – NinjaOnSafari

+0

第一次为我工作。谢谢! –

+0

@NinjaOnSafari得到了相同的结果,但在包含jQuery库之后被修复。也许这可以帮助你。 –