2015-04-28 12 views
6

Verilerimi görüntülemek için çok iyi bir tablo kitaplığı Smart-table kullanıyorum.Smart-table - Sayfayı koddan ayarlama

Özel sayfalama şablonunu kullanıyorum. Ancak, sayfa 1'i koddan ayarlayabilmeyi isterdim. Gösterdiği boru-boru direktifini okudum, ancak bunu uygularsam filtreleme/sayfalama/kodlama kodunu yeniden yazmam gerekecek gibi görünüyor.

basit bir şekilde programlama var st-pagination direktifin dışından bir sayfa ayarlamak sonra ben benim masa ı <form> bölümden itibaren sayfasını ayarlamak mümkün istiyorum 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> 

onshow yönergesi.

Bunun mümkün olup olmadığını bilen var mı? Çok teşekkürler.

cevap

9

Köşeden köşeli akıllı tablo sayfa numarasını koddan ayarlamak için st-pagination'ın selectPage() işlevini kullanın.

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

Sen direktifi jQuery $ kullanmak yüklü olması gerekir

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

böyle kodu kullanabilirsiniz: HTML böyle bir paginator elemanı vardır

. Son örnekte şu fikri aldım: http://lorenzofox3.github.io/smart-table-website/

+1

.isolateScope() işlevi, undefined işlevini döndürdüğünde ve .scope() yaptığımda, işlevi çalıştırdığım denetleyiciyle aynı kapsamı döndürürüm – NinjaOnSafari

+0

Benim için ilk kez çalıştırıldı . Teşekkürler! –

+0

@NinjaOnSafari aynı şeyi aldı, ancak jQuery kitaplığı eklendikten sonra giderildi. Belki bu size yardımcı olabilir. –

İlgili konular