Question

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

提前致谢

Answer 1

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

<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>

check this plunker

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

Answer 2

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

<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>

感谢您的建议。干杯

使用pagecount作为select选项创建ng-table

2 个答案: