Javascript 角度-mdDataTable分页工作不正常
我正在使用一个角度库,它被调用来处理我的表,包括搜索、分页等等。 我试图在上复制“Ajax搜索支持”演示中的功能,但无法使其正常工作。搜索工作正常,但我的分页将只显示一页可用,即使结果是11项,并且我的页面大小设置为每页5 我不知道如何在codepen上模拟api调用,所以我将粘贴代码。 我也依靠和$资源是我的“数据服务”,然后我有一个名为paginationHandler的服务,它实际上只是从服务器(自定义头)的响应头中提取分页信息,并将其存储以供应用程序使用。我有一个拦截器来处理数据的存储 包含表的我的视图:Javascript 角度-mdDataTable分页工作不正常,javascript,angularjs,ajax,asp.net-web-api2,Javascript,Angularjs,Ajax,Asp.net Web Api2,我正在使用一个角度库,它被调用来处理我的表,包括搜索、分页等等。 我试图在上复制“Ajax搜索支持”演示中的功能,但无法使其正常工作。搜索工作正常,但我的分页将只显示一页可用,即使结果是11项,并且我的页面大小设置为每页5 我不知道如何在codepen上模拟api调用,所以我将粘贴代码。 我也依靠和$资源是我的“数据服务”,然后我有一个名为paginationHandler的服务,它实际上只是从服务器(自定义头)的响应头中提取分页信息,并将其存储以供应用程序使用。我有一个拦截器来处理数据的存储
<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>
除了项目属性和数据服务是我自己的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);
}
}
然后我将其添加为通过CORS公开的标题。
这些值总是正确的。
问题是我真的不确定如何处理这些值,如果有的话。此时,当包含“Pagination”标题的响应返回时,我只存储这些值,其他什么都没有
当我打这个电话时,我得到了11个结果,表格显示了正确的页面大小(5),但没有显示正确的页数(总是1,应该是3),所以我只看到前五个结果
最后,我的问题是,在ajax搜索演示中,我应该将哪些值更改为我自己的值?如果没有,我还做错了什么
我完全被卡住了,所以任何帮助都是值得的
编辑:我一直试图让演示在本地运行,但运气不好。如果有人能帮助我实现这一点,那么我就可以调试这个示例,看看哪里出了问题
[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);
}
}
var object = new
{
currentPage = page,
pageSize = pageSize,
totalCount = totalCount,
totalPages = totalPages,
previousPageLink = prevLink,
nextPageLink = nextLink
}