Smart-table - 从代码设置页面 [英] Smart-table - Setting page from code
问题描述
我正在使用非常好的表格库 Smart-table 来显示我的数据.
我正在使用自定义分页模板.但是,我希望能够从代码中设置第 1 页.我已经阅读了它公开的 st-pipe 指令,但如果我实现它,我似乎需要自己重新编写整个过滤/分页/排序代码.
我正在寻找一种简单的方法来从我的表的 tfoot
st-pagination
指令之外以编程方式设置页面<tr st-select-row="tag" st-select-mode="single" ng-repeat="显示集合中的标签" ng-click="click(tag)"><td><span editable-text="tag.name" e-placeholder="输入显示名称..." e-name="name" e-form="editableForm" e-required>{{tag.name}}</span></td><td><span editable-text="tag.path" e-placeholder="输入要使用的实际值..." 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)"><!-- 编辑--><button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$可见"><i class="fa fa-pencil-square-o fa-lg"></i>按钮></表单></td></tr></tbody><脚><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 type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</按钮><button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</按钮><button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</按钮></td></tr></tfoot>
我希望能够从 部分
onshow
指令中设置页面.
有谁知道这是否可能?非常感谢.
要从代码中设置 angular-smart-table 页码,请使用 st-pagination 的 selectPage() 函数.
你的 HTML 有一个像这样的分页器元素:
<div id="pagerId" st-pagination="" st-items-by- ...
您可以在指令中使用这样的代码
function setPage(pageNumber){有角的.element( $('#pagerId') ).isolateScope().selectPage(pageNumber);}
您需要安装 jQuery 才能使用 $.我从上一个例子中得到了这个想法:http://lorenzofox3.github.io/smart-表格网站/
I'm using the very good table library Smart-table to display my data.
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.
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>
I'd like to be able to set page on from the <form>
sections onshow
directive.
Does anyone know if this is possible? Many thanks.
To set the angular-smart-table page number from code use st-pagination's selectPage() function.
Where your HTML has a paginator element like this:
<div id="pagerId" st-pagination="" st-items-by- ...
You could use code like this in your directive
function setPage(pageNumber)
{
angular
.element( $('#pagerId') )
.isolateScope()
.selectPage(pageNumber);
}
You need to have jQuery installed to use $. I got the idea from the last example on: http://lorenzofox3.github.io/smart-table-website/
这篇关于Smart-table - 从代码设置页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!