角度js服务器端分页搜索而不使用分页

时间:2017-07-18 09:03:59

标签: angularjs node.js asp.net-web-api

我的搜索Api看起来像

"http://localhost:3000/api/driver/search/" + searchText + "/" + pagesize + "/" + page;

功能就像我使用字符串进行搜索一样,它应该使用prev和next按钮产生

对于搜索,我需要将页面大小和页码传递给搜索方法。  下面是y Html看起来像

    <div class="input-group col-md-4 col-md-offset-8" align="center">

        <input class="form-control" type="search" ng-model="searchText" placeholder="Search" />
        <button class="input-group-addon" ng-click="search(searchText)">
            <span class="glyphicon glyphicon-search"></span>
        </button>

    </div>
    <br /><br />
    <table class="table table-condensed table-hover table-striped table-bordered" ng-show="showtable">
        <thead>
            <tr>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">Driver ID</h5></th>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">Driver Name</h5></th>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">Contact Number</h5></th>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">Driver Email</h5></th>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">ShiftType</h5></th>
                <th class="label label-info visible-lg"><h5 class="text-capitalize">Action</h5></th>
            </tr>
        </thead>


        <tbody>
            <tr ng-repeat="driver in drivers">


                <td>
                    <div ng-if="driver.editing"> <div ng-class="name" align="center"> {{driver.driverId}}</div> </div>
                    <div ng-if="driver.saving">
                        <div align="center">                          
                            {{driver.driverId}}              </div>
                    </div>

                </td>

                <td>
                    <div ng-if="driver.editing"> <div ng-class="name" align="center"> {{driver.driverName}}</div> </div>
                    <div ng-if="driver.saving">
                        <div align="center"><input type="text" ng-model="driver.driverName" required /></div>
                    </div>
                </td>

                <td>
                    <div ng-if="driver.editing"><div align="center"> {{driver.contactNumber}}</div></div>
                    <div ng-if="driver.saving">
                        <div align="center"><input type="text" ng-model="driver.contactNumber" required /></div>
                    </div>
                </td>
                <td>
                    <div ng-if="driver.editing"><div align="center"> {{driver.email}}</div></div>
                    <div ng-if="driver.saving">
                        <div align="center"><input type="text" ng-model="driver.email" required /></div>
                    </div>
                </td>
                <td>
                    <div ng-if="driver.editing"><div align="center"> {{driver.shiftType}}</div></div>
                    <div ng-if="driver.saving">
                        <div align="center"><input type="text" ng-model="driver.shiftType" required /></div>
                    </div>
                </td>
                <td align="center">
                    <div ng-if="driver.editing">
                        <button ng-click="edit(driver, driver.driverId)" class="edit btn-info">
                                <i align="center" class="glyphicon glyphicon-edit"></i>
                        </button>
                    </div>
                    <div ng-if="driver.saving" class="btn-group">
                        <button align="center" ng-click="save(driver,driver.driverId)" class="glyphicon-save btn-group-sm btn-success">
                            <i class="glyphicon glyphicon-floppy-save"></i>
                        </button>
                        <button align="center" ng-click="cancel(driver,driver.driverId)" class="glyphicon-remove btn-group-sm btn-warning">
                            <i class="glyphicon glyphicon-remove"></i>

                        </button>
                    </div>
                </td>

            </tr>

        </tbody>

        <tfoot>
            <tr>
                <td colspan="9">
                    <div align="right">
                        <ul class="pagination">
                            <li ng-class="{disabled: currentPage == 0}">
                                <a href="javascript:" ng-click="prevPage()"><< prev</a>
                            </li>
                            <li ng-repeat="n in range(drivers.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
                                <a href="javascript:;" ng-bind="n">1</a>
                            </li>
                            <li ng-class="{disabled: currentPage == drivers.length - 1}">
                                <a href="javascript:;" ng-click="nextPage()">Next »</a>
                            </li>
                        </ul>
                    </div>

                </td>

            </tr>


        </tfoot>

我不知道该怎么办。如何输入这些值。任何建议都非常有用。

0 个答案:

没有答案