如何获取ng表中的总页数?

时间:2016-12-06 02:20:46

标签: ngtable

我是使用ng-table的新手,我正在尝试将总页数显示为" x"的第1页。它几乎可以工作,但我得到一个小数。这是HTML代码。谢谢你的帮助。

    @*<style>
        #testContainer {
            position: relative;
        }

        #textCumDropdown {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            padding: 0;
            margin: 0;
        }

        #select {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            margin: 0;
        }
    </style>*@

<div class="x_panel">
    <div class="x_title">
        <h2>{{JobTitle}}<small></small></h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content col-md-12">

        <div class="row col-md-12 data-tablex">       

            <div class="col-md-offset-8 col-md-4 col-sm-12 col-xs-12  data-tablex data-tabley">
                <input type="text" class="form-control" placeholder="Search" ng-model="search" />
            </div>

        <div class="col-md-offset-8 col-md-4 col-sm-12 col-xs-12  data-tablex data-tableym">                 
                    <form action="{{Action}}" method="post" class="frm-export" id="frmexport">
                    @{Html.RenderAction("Filter", "Job");}      
            <input type="submit" value="Export" class="btn-export" id="btnexport" />

                <a href="" class="toggle-filter"><i class="fa fa-list"></i> Filter</a>

            <a href="javascript:document.getElementById('btnexport').click();"><i class="fa fa-list"></i> Export</a>

                    @*  <button type="submit" class="btn btn-success" ng-click="Export(Jobs)">Export</button>*@
        </form>
            </div>

        <div class="col-md-offset-8 col-md-4 col-sm-12 col-xs-12  data-tablex data-tableyr">
                 <p class="text-right">
                    <strong>page: {{tableParams.page()}} of {{tableParams.total()/tableParams.count()}}</strong>
                </p>
            </div>

    <div class="form-group form-filter">
            <div class="col-md-12 col-sm-12 col-xs-12 col-md-offset-0 row table-filter">
        <form action="{{Action}}" method="post" class="frm-exportx">
                    @{Html.RenderAction("Filter", "Job");}      
           </form>               
            </div>
        </div>


            <div class="col-md-12 col-sm-12 colxs12  data-tablex" style="">
                <table id="tblAllJobs" class="ng-table-responsive table table-striped table-bordered table-jobs" ng-table="tableParams" template-pagination="custom/pager">
                    <tr ng-repeat="Job in $data | filter:search">
                        <td data-title="'Job'" sortable="'JobNum'">
                            <a href="/#/EditJob" ng-click="editJob(Job.JobNum)">{{ Job.JobNum }}</a>
                        </td>
                        <td data-title="'Priority'" sortable="'Priority'">
                            {{ Job.Priority }}
                        </td>
                        <td data-title="'Staff'" sortable="'Staff'">
                            {{ Job.Staff }}
                        </td>
                        <td data-title="'Title'" sortable="'JobName'">
                            {{ Job.JobName }}
                        </td>
                        <td data-title="'Company'" sortable="'Company'">
                            {{ Job.Company}}
                        </td>
                        <td data-title="'Deadlines'" sortable="'Deadlines'">
                            {{ Job.Deadlines}}
                        </td>
                        <td data-title="'Status'" sortable="'StatusComment'">
                            {{ Job.StatusComment}}
                        </td>
                        <td data-title="'Copy'" class="td-center"><a href="/#/CreateAsNewJob" ng-click="CreateAsNewJob(Job.JobNum)"><i class="fa fa-plus"></i></a></td>
                        @* <td data-title="'Edit'"><a ng-click="editJob(Job.JobNum)"><i class="fa fa-pencil"></i></a></td>*@
                    </tr>
                    @*  <tr class="noRecordMsg" ng-hide="$data.length"><td colspan="7" align="center">No Jobs available</td></tr>*@
                    <tr class="noRecordMsg" ng-hide="$data.length"><td colspan="8" align="center">No Jobs available</td></tr>
                </table>
            </div>
        </div>
    </div>
</div>

<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() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>
                <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() == 20}" ng-click="params.count(20)" class="btn btn-default">20</button>
                <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
            </div>
        </li>
    </ul>
</script>

<script>
$(".toggle-filter").click(function(){
    $(".form-filter").toggle();
});
</script>

1 个答案:

答案 0 :(得分:1)

尝试:Math.ceil(tableParams.total()/tableParams.count());

Math.ceil的工作原理如下:

Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8

以及之前。我希望这会有所帮助:)