Question

我正在使用一个名为mdDataTable的角度库来处理我的表，包括搜索，分页等。我正在尝试重现this demo page上的“Ajax搜索支持”演示中的功能，但我无法使其工作。搜索工作正常，但我的分页只显示一个页面是可用的，即使结果是11个项目，我的pageSize设置为每页5个。

我不确定如何在codepen上模拟api-call，所以我会粘贴代码。我还依赖于Angular material和$resource。 $ resource是我的“dataService”然后我有一个名为paginationHandler的服务，它实际上只是从服务器（Custom头）的响应头中获取分页信息并存储它供应用程序使用。我有一个处理存储数据的拦截器。

我的观点包含表格：

<md-card class="bg-white" layout-fill md-whiteframe="4db">
   <md-input-container class="padder-md m-t-xl">
       <label style="padding-left: 20px; padding-right: 20px;">Sök användare</label>
       <input type="text" ng-model="filterText">
   </md-input-container>
   <mdt-table paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,50,100]}"
              mdt-row-paginator="vm.paginatorCallback(page, pageSize)"
              sortable-columns="true"
              animate-sort-icon="true"
              mdt-row-paginator-no-results-message="Inga resultat hittades..."
              mdt-row-paginator-error-message="Fel uppstod vid hämtning av maskinmodeller."
              mdt-trigger-request="vm.getLoadResultsCallback(loadPageCallback)"
              mdt-row="{
                 'table-row-id-key': 'id',
                 'column-keys': [
                    'name',
                    'category',
                    'machineModelType.name',
                    'createdDate',
                    'remove'
                 ],
              }">
              <mdt-header-row>
              <mdt-column align-rule="left">Namn</mdt-column>
              <mdt-column align-rule="left">Kategori</mdt-column>
              <mdt-column align-rule="left">Typ</mdt-column>
              <mdt-column align-rule="left">Skapad</mdt-column>
              <mdt-column align-rule="left">Ta bort</mdt-column>
           </mdt-header-row>
        </mdt-table>
    </md-card>

这是我的控制者。它是ui-router中的一条路由，它在该路由中定义了“as vm”，所以我没有忘记将控制器链接到视图。

(function () {
    "use strict";

    angular.module("app")
        .controller("detailsManufacturerCtrl", [
            "$stateParams",
            "dataService",
            "$scope",
            "paginationHandler",
            function ($stateParams, dataService, $scope, paginationHandler) {
                var vm = this;

        vm.machineModels = [];

                // Data retrieval


                vm.getMachineModels = function(){
                    dataService.manufacturerMachineModels.query({manufacturerId: $stateParams.id, sort: "name", page: 1, pageSize: 5, search: ""}, function(response){
                        vm.machineModels = response;
                        vm.pagination = paginationHandler.get();
                    });
                };


                // Machine Model Table Functions

                vm.paginatorCallback = function(page, pageSize){

                    var query = $scope.filterText ? $scope.filterText : '';

                    return uow.manufacturerMachineModels.query({
                        manufacturerId: $stateParams.id,
                        sort: "name",
                        page: page,
                        pageSize: pageSize,
                        search: query
                    }).$promise.then(function(result){
                        return {
                            results: result,
                            totalResultCount: result.length
                        }
                    });
                };

                var loadPageCallbackWithDebounce;

                $scope.$watch('filterText', function(){
                    if(loadPageCallbackWithDebounce){
                        loadPageCallbackWithDebounce();
                    }
                });

                vm.getLoadResultsCallback = function(loadPageCallback){
                    loadPageCallbackWithDebounce = _.debounce(loadPageCallback, 500);
                };


                // INIT
                vm.getMachineModels();
            }
        ])
}());

除了项目属性和数据服务是我自己的ofc之外，它接近演示。

这是我的ajax呼叫结束的地方。我使用ASP.NET Web Api 2作为服务器。

[Route("", Name = "ManufacturerMachineModelList")]
public async Task<IHttpActionResult> Get(int manufacturerId, // Url values
   // Filtering (None)
   string sort = "name", // Sorting
   int page = 1, int pageSize = 5, //Pagination
   string search = "") // Search
{
   try
   {
      var manufacturer = Uow.Manufacturer.GetById(manufacturerId);
      // Not Found
      if (manufacturer == null) { return NotFound(); }

      var machineModels = Uow.MachineModel.GetAll(sort, search)
          // Url filter
          .Where(mm => mm.ManufacturerId == manufacturerId)
          // Query filters (None)
          .ToList();


       // Pagination
       var paginationHeader = GetPaginationHeader(machineModels, pageSize, page, sort);
       HttpContext.Current.Response.Headers.Add("Pagination", JsonConvert.SerializeObject(paginationHeader));

       // Return list and add pagination
       return Ok(machineModels
          .Skip(pageSize * (page - 1))
          .Take(pageSize)
          .ToList());
   }
   catch (Exception exc)
   {
      return InternalServerError(exc);
   }
}

“GetPaginationHeader（）”方法返回一个如下所示的匿名对象：

var object = new 
{
   currentPage = page,
   pageSize = pageSize,
   totalCount = totalCount,
   totalPages = totalPages,
   previousPageLink = prevLink,
   nextPageLink = nextLink
}

然后我将其添加为通过CORS公开的标头。这些值始终是正确的。问题是，如果有的话，我不确定如何处理这些值。目前，我只是在包含“Pagination”标题的响应返回时再存储值。

当我拨打这个电话时，我得到11个结果，表格显示正确的pageSize（5），但没有正确的页面数量（总是1，应该是3），所以我只看到前五个结果。

所以，最后，我的问题是，ajax搜索演示中的哪些值应该更改为我自己的值？如果没有，我还有什么其他的错误？

我完全陷入困境，所以任何帮助都是适当的！

编辑：我一直在努力让演示在本地工作，但没有运气。如果有人可以帮我解决问题，那么我可以调试这个例子，看看我哪里出错了。

Angular - mdDataTable分页无法正常工作

0 个答案: