1

我需要创建一个带有分页的动态 ng 表。但我需要每页的计数作为选择框。目前默认功能是按钮。请提供建议。

提前致谢

4

2 回答 2

4

我得到了正确的解决方案。

<script type="text/ng-template" id="custom/pager">
<div class="bottom">
<div ng-if="params.settings().counts.length" id="allocateCargoTable_length" class="dataTables_length">
    <label>Show 

    <select ng-param-directive ng-model="pageCount" ng-options ="count for count in params.settings().counts" ng-change="pageCounter(pageCount)">
    </select>
    Rows
    </label>
<div class="dataTables_paginate paging_bs_normal">
    <ul class="pagination ng-table-pagination pull-right"> 
        <li ng-class="{\'disabled\': !page.active}" ng-repeat="page in pages" ng-switch="page.type"> 


            <a ng-switch-when="prev" ng-click="params.page(page.number)" href=""><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Previous</a>
            <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> 
            <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> 
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a> 

        </li> 
    </ul> 
</div>

感谢您的建议。干杯

于 2014-08-01T05:01:19.263 回答
4

您需要使用自定义分页模板...下面是一个这样的示例

<script type="text/ng-template" id="custom/pager">
    <ul class="pager ng-cloak">
      <li ng-repeat="page in pages"
            ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
            ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
        <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
        <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
      </li>
        <li> 
        <div class="btn-group">
            <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
            <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
            <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
            <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
        </div>
        </li>
    </ul>
</script>

你可以像这样使用自定义模板

<table ng-table="tableParams" template-pagination="custom/pager" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name of people'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
    </table>

检查这个 plunker

我从他们的官方网站上举了上面的例子

于 2014-07-26T09:06:06.250 回答