[英]Cannot reinitialise DataTable - AngularJS with datatable
When I combine AngularJS (1.6.x) with jQuery data-tables, I get alert error: 当我将AngularJS(1.6.x)与jQuery数据表结合使用时,出现警告错误:
Cannot reinitialise DataTable 无法重新初始化DataTable
First I use AngularJS to bind and fill data-tables, then I try to add Individual column searching (text inputs) feature . 首先,我使用AngularJS绑定和填充数据表,然后尝试添加“ 个人列搜索(文本输入)”功能 。
Individual column searching (select inputs) 单个列搜索(选择输入)
AngularJS initialize data-tables, but does not give me a handle. AngularJS初始化数据表,但没有给我一个句柄。
Here is my code: 这是我的代码:
var app1=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app1.controller('validationCtrl',function($scope){
angular.element(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
console.log(' document ready function, add search by column feature ');
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
});// document ready
$scope.data=[[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011\/04\/25",
"$320,800"
]];
$scope.dataTableOpt = {
//custom datatable options
// or load data through ajax call also
// "data": $scope.data00, // this is not real binding, the real binding is ui-jq="dataTable" ui-options="dataTableOpt", fill $scope.data
"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
};
});
demo on codepen.io 在codepen.io上演示
demo on jsFiddle jsFiddle上的演示
earlier angularjs initialize datatable( must add "retrieve": true, otherwise, will get above error retrieve existing table handle ) , but don't get a table handle, 较早的angularjs初始化datatable(必须添加“ retrieve”:true,否则, 获取现有表句柄将获得以上错误),但不会获得表句柄,
later here, $('#id').DataTable(); 稍后,$('#id')。DataTable(); will 1) if existing, will retrieve table handle. 将1)如果存在,将检索表句柄。 2) if not exsiting, will create a new table. 2)如果不存在,将创建一个新表。
so the solution is 所以解决方案是
$scope.dataTableOpt = {
//custom datatable options
// or load data through ajax call also
// "data": $scope.data00, // this is not real binding, the real binding is ui-jq="dataTable" ui-options="dataTableOpt", fill $scope.data
"retrieve": true, // angularjs at begining initialize datatable, but don't get a handle to the table, later you want to add search column, you need to get the table handle.
"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
};
codepen : ui-grid (angularjs 1.x) demo codepen:ui-grid(angularjs 1.x)演示
jsFiddle : ui-grid (angularjs 1.x) demo jsFiddle:ui-grid(angularjs 1.x)演示
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q','uiGridConstants', function ($scope, $http, $interval, $q, uiGridConstants) {
I build those demo, is best solution for angularjs 1.x datatable. 我构建这些演示,是angularjs 1.x数据表的最佳解决方案。
angularjs 1.x + jquery(datatables) isn't best solution. angularjs 1.x + jquery(datatables)不是最佳解决方案。
ui-grid is pure angularjs 1.x, is best solution so far. ui-grid是纯angularjs 1.x,是迄今为止最好的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.