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

カスタムのページ付けテンプレートを使用する必要があります...以下はその例の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>

このプランカーをチェックしてください

私は彼らの公式ウェブサイトから上記の例を取りました

于 2014-07-26T09:06:06.250 に答える