[英]Fix header plugin not working in Angular datatables
I am using the stable build version Stable release v2.1.2 of the fixed header jquery plugin . 我正在使用固定标头jquery 插件的稳定版本稳定版本v2.1.2。 I am trying to fix my table header.
我正在尝试修复我的表头。 I have created the table using Angular datatables as mentioned over here .
我创建了采用了棱角分明的DataTable提到在桌子上这里 。
In my controller class I have written the following code, 在我的控制器类中,我编写了以下代码,
app.controller("SampleController", function ($scope) {
$(document).ready( function () {
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
});
});
My HTML is as follows, 我的HTML如下,
<table id="example" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" fix-header>
<thead>
<tr>
<th>Name </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
However when i run my application, i get the following error, 但是当我运行我的应用程序时,我收到以下错误,
TypeError: Cannot read property 'childNodes' of undefined
TypeError:无法读取未定义的属性“childNodes”
I also tried using the following directive as I am aware that DOM manipulations should not be done in Controller but I get the following error. 我也尝试使用以下指令,因为我知道DOM操作不应该在Controller中完成,但我得到以下错误。
TypeError: Cannot set property '_oPluginFixedHeader' of undefined
TypeError:无法设置undefined的属性'_oPluginFixedHeader'
UPDATE: 更新:
my directive 我的指示
app.directive('fixHeader', function () {
return {
restrict: 'AE', //attribute or element
replace: true,
link: function ($scope, elem, attr) {
$scope.table = elem.find("#example");
console.log($scope.table);
var table= $scope.table.dataTable();
new $.fn.dataTable.FixedHeader(table);
}
};
});
Please can someone suggest a better solution? 请有人建议更好的解决方案吗?
I am using version 2.1.2 of dataTables.fixedHeader.js and my error comes in below line 我使用的是dataTables.fixedHeader.js的 2.1.2版,我的错误来自下面一行
var dt = $.fn.dataTable.Api ?
new $.fn.dataTable.Api( mTable ).settings()[0] :
mTable.fnSettings();
dt._oPluginFixedHeader = this; //error over here
The angular-datatables
also provides plugin to FixedHeader works with datatables. You need to add the files
angular-datatables
还为FixedHeader works with datatables. You need to add the files
提供了与数据FixedHeader works with datatables. You need to add the files
插件FixedHeader works with datatables. You need to add the files
FixedHeader works with datatables. You need to add the files
angular-datatables.fixedheader.min.js to your HTML. You also need to add the dependency
FixedHeader works with datatables. You need to add the files
angular-datatables.fixedheader.min.js FixedHeader works with datatables. You need to add the files
to your HTML. You also need to add the dependency
to your HTML. You also need to add the dependency
datatables.fixedheader` to your Angular app. to your HTML. You also need to add the dependency
datatables.fixedheader` to your HTML. You also need to add the dependency
到Angular应用程序中。 then your code will look like below. 那么你的代码将如下所示。
HTML HTML
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border">
<thead>
<tr>
<th>Name </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
CODE 码
var app = angular.module('app', ['datatables', 'datatables.fixedheader'])
app.controller("SampleController", function($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withPaginationType('full_numbers')
.withDisplayLength(25)
.withFixedHeader({
bottom: true
});
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('Name').withTitle('Name'),
DTColumnBuilder.newColumn('Address').withTitle('Address')
];
});
No need of adding directive, because there is already directive created inside angular-datatables.fixedheader.min.js
( Reference Link ) 无需添加指令,因为在
angular-datatables.fixedheader.min.js
已经创建了指令( 参考链接 )
Update: 更新:
Below changes need to be done in code. 以下更改需要在代码中完成。
FixedHeader
js code & jquery code to new $.fn.dataTable.FixedHeader($element.find('#example'))
FixedHeader
js代码和jquery代码替换为new $.fn.dataTable.FixedHeader($element.find('#example'))
FixedHeader
FixedHeader
方法 Controller 调节器
(function(angular) {
angular.module('showcase.angularWay', ['datatables'])
.controller('AngularWayCtrl', AngularWayCtrl);
function AngularWayCtrl($http, $element) {
var vm = this;
$http.get('data.json').then(function(res) {
vm.persons = res.data;
vm.setFixedHeader(); //call method to set glass.
});
vm.setFixedHeader = function(){
//var table = $element.find('#example').DataTable();
new $.fn.dataTable.FixedHeader($element.find('#example'))
};
}
})(angular);
You can also move this code to directive, only you need to remove header column which is appended as extra header. 您也可以将此代码移动到指令,只需要删除作为额外标头附加的标题列。
I referred this link for above updated solution 我将此链接引用为上述更新的解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.