大佬教程收集整理的这篇文章主要介绍了jquery – Angular Datatable不使用数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
function MyChapterController($scope,$q,DTOptionsBuilder,DTcolumnBuilder,chapter) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions() .withPaginationType('full_numbers') .withDisplayLength(2) .withDOM('pitrfl'); vm.dtcolumns = [ DTcolumnBuilder.newcolumn('id').withtitle('ID'),DTcolumnBuilder.newcolumn('title').withtitle('First name'),DTcolumnBuilder.newcolumn('lastName').withtitle('last name').notVisible() ]; vm.myChapters = []; }
function MyChapterController($scope,$resource,DTcolumnBuilder.newcolumn('lastName').withtitle('last name').notVisible() ]; vm.myChapters = [{ "id": 860,"firstName": "SupeRMAN","lastName": "Yoda" },{ "id": 870,"firstName": "Foo","lastName": "whateveryournameis" },{ "id": 590,"firstName": "Toto","lastName": "Titi" },{ "id": 803,"firstName": "Luke","lastName": "Kyle" }]; }
我也尝试过dataresource Plunker,但这里也运气不好.
它已经耗费了我很多时间.所以最后我决定接受大家的建议.任何帮助,将不胜感激.
>未调用控制器,因为它未添加到标记中.如果您稍后使用ui-router,那就可以,因为您可以在配置中添加控制器.
>您的表格未填充,因为您错过了添加绑定,例如{{Chapter.iD}}和MyChapters在$scope中不可用,因为您使用的是controllerAs语法.
请查看下面的演示或更新的plunkr.
在下面的演示中,我只将$http.get(…)更改为$http.jsonp(…)以从mocky.io获取json数据.
更新
< table datatable =“ng”dt-options =“chapterCtrl.dtOptions”dt-column-defs =“chapterCtrl.dtcolumnDefs”id =“cb-mychapter-table”class =“row-border hover table table-bordered cb- data-table“cellspacing =”0“width =”100％“>
// Code goes here 'use Strict'; angular.module('myApp',['datatables','ngresource']); (function (angular) { 'use Strict'; angular .module('myApp') .controller('myChapterController',MyChapterController) .factory('chapter',ChapterFactory); MyChapterController.$inject = ['$scope','$q','$resource','DTOptionsBuilder','DTcolumnBuilder','chapter']; function MyChapterController($scope,chapter) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions() .withPaginationType('full_numbers') .withDisplayLength(2) .withDOM('pitrfl'); vm.dtcolumns = [ DTcolumnBuilder.newcolumn('id').withtitle('ID'),DTcolumnBuilder.newcolumn('lastName').withtitle('last name').notVisible() ]; /*vm.myChapters = [{ "id": 860,"lastName": "Yoda" },{ "id": 870,"lastName": "whateveryournameis" },{ "id": 590,"lastName": "Titi" },{ "id": 803,"lastName": "Kyle" }];*/ chapter.getChapters().then(function(chapters) { vm.myChapters = chapters; }); } ChapterFactory.$inject = ["$http"]; function ChapterFactory($http) { return { getChapters: function() { return $http.jsonp('http://www.mocky.io/v2/55f2b4cb0938f5cd069cff10?callBACk=JSON_CALLBACK').then(function(responsE) { console.log(responsE); return response.data; }); } }; } }(angular));
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="style.css">-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/angular.js/1.4.5/angular-resource.min.js"></script>
<!--<script src="script.js"></script>-->
</head>
<body ng-controller="myChapterController as chapterCtrl" >
<table datatable="ng" dt-options="chapterCtrl.dtOptions" dt-column-defs="chapterCtrl.dtcolumnDefs" id="cb-mychapter-table" class="row-border hover table table-bordered cb-data-table" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="chapter in chapterCtrl.myChapters">
<td>{{Chapter.iD}}</td>
<td>{{Chapter.firstNamE}}</td>
<td>{{Chapter.lastNamE}}</td>
</tr>
</tbody>
</table>
</body>
</html>
以上是大佬教程为你收集整理的jquery – Angular Datatable不使用数据全部内容，希望文章能够帮你解决jquery – Angular Datatable不使用数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。