栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

ngTableParams使用$ http.get分页

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

ngTableParams使用$ http.get分页

首先,您的代码将本地数据数组用作ngTables

getData
回调中的源,由于您实际上并未尝试从官方示例中进行AJAX数据加载,因此尚不清楚您要呈现的内容是作为比较。

相反,我希望它使用$ http.get对服务器进行api调用。

请记住,要使服务器端分页正常工作,您每次查询数据时都必须更新总数,因为它们可能已更改。另外,您还必须考虑用于排序的服务器端解决方案。

这是使用github api作为测试服务的工作示例。

var app = angular.module('main', ['ngTable']);app.controller('MainCtrl', function($scope, $http, ngTableParams) {  $scope.tableParams = new ngTableParams({     page: 1,     count: 5, }, {     getdata: function ($defer, params) {         var page = params.page();         var size = params.count();         var testUrl = 'https://api.github.com/search/repositories';         var search = {q: 'angular',page: page,per_page: size         }         $http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })   .then(function(res) {      params.total(res.data.total_count);      $defer.resolve(res.data.items);  }, function(reason) {      $defer.reject();  }         );     }, });});<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script><div  ng-app="main"  ng-controller="MainCtrl">   <table ng-table="tableParams" >        <tr ng-repeat="repo in $data"> <td data-title="'id'">{{repo.id}}</td> <td data-title="'name'">{{repo.name}}</td> <td data-title="'owner'">{{repo.owner.login}}</td>        </tr></table><div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/377886.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号