Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 565c10c

Browse files
l-linl-lin
committed
Update documentation + Correct Angular way with change if using DT 1.9.4
1 parent 390db65 commit 565c10c

File tree

6 files changed

+216
-206
lines changed

6 files changed

+216
-206
lines changed

‎demo/partials/angular_way_data_change.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
1111
the whole DataTable is completely destroyed and then rebuilt. The filter, sort, pagination, and so on... are
1212
not preserved.
1313
</p>
14+
<p class="alert alert-danger">
15+
<i class="fa fa-warning"></i>&nbsp;This feature is only available for DataTables <strong>v1.10+</strong>.
16+
</p>
1417
</section>
1518
<section class="showcase">
1619
<tabset>

‎dist/angular-datatables.js

Lines changed: 91 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,7 @@
446446
}
447447
var oTable, firstCall = true, alreadyRendered = false, parentScope = $scope.$parent;
448448
parentScope.$watch(ngRepeatAttr, function () {
449-
if (oTable && alreadyRendered) {
449+
if (oTable && alreadyRendered && !_isDTOldVersion(oTable)) {
450450
oTable.ngDestroy();
451451
}
452452
// This condition handles the case the array is empty
@@ -603,7 +603,6 @@
603603
};
604604
};
605605
return {
606-
priority: 9999,
607606
restrict: 'A',
608607
scope: {
609608
dtOptions: '=',
@@ -945,95 +944,97 @@
945944
'datatables.factory',
946945
'datatables.bootstrap'
947946
]).run(function () {
948-
/**
949-
* Register an API to destroy a DataTable without detaching the tbody so that we can add new data
950-
* when rendering with the "Angular way".
951-
*/
952-
$.fn.dataTable.Api.register('ngDestroy()', function (remove) {
953-
remove = remove || false;
954-
return this.iterator('table', function (settings) {
955-
var orig = settings.nTableWrapper.parentNode;
956-
var classes = settings.oClasses;
957-
var table = settings.nTable;
958-
var tbody = settings.nTBody;
959-
var thead = settings.nTHead;
960-
var tfoot = settings.nTFoot;
961-
var jqTable = $(table);
962-
var jqTbody = $(tbody);
963-
var jqWrapper = $(settings.nTableWrapper);
964-
var rows = $.map(settings.aoData, function (r) {
965-
return r.nTr;
966-
});
967-
var ien;
968-
// Flag to note that the table is currently being destroyed - no action
969-
// should be taken
970-
settings.bDestroying = true;
971-
// Fire off the destroy callbacks for plug-ins etc
972-
$.fn.DataTable.ext.internal._fnCallbackFire(settings, 'aoDestroyCallback', 'destroy', [settings]);
973-
// If not being removed from the document, make all columns visible
974-
if (!remove) {
975-
new $.fn.DataTable.Api(settings).columns().visible(true);
976-
}
977-
// Blitz all `DT` namespaced events (these are internal events, the
978-
// lowercase, `dt` events are user subscribed and they are responsible
979-
// for removing them
980-
jqWrapper.unbind('.DT').find(':not(tbody *)').unbind('.DT');
981-
$(window).unbind('.DT-' + settings.sInstance);
982-
// When scrolling we had to break the table up - restore it
983-
if (table !== thead.parentNode) {
984-
jqTable.children('thead').detach();
985-
jqTable.append(thead);
986-
}
987-
if (tfoot && table !== tfoot.parentNode) {
988-
jqTable.children('tfoot').detach();
989-
jqTable.append(tfoot);
990-
}
991-
// Remove the DataTables generated nodes, events and classes
992-
jqTable.detach();
993-
jqWrapper.detach();
994-
settings.aaSorting = [];
995-
settings.aaSortingFixed = [];
996-
$.fn.DataTable.ext.internal._fnSortingClasses(settings);
997-
$(rows).removeClass(settings.asStripeClasses.join(' '));
998-
$('th, td', thead).removeClass(classes.sSortable + ' ' + classes.sSortableAsc + ' ' + classes.sSortableDesc + ' ' + classes.sSortableNone);
999-
if (settings.bJUI) {
1000-
$('th span.' + classes.sSortIcon + ', td span.' + classes.sSortIcon, thead).detach();
1001-
$('th, td', thead).each(function () {
1002-
var wrapper = $('div.' + classes.sSortJUIWrapper, this);
1003-
$(this).append(wrapper.contents());
1004-
wrapper.detach();
1005-
});
1006-
}
1007-
if (!remove && orig) {
1008-
// insertBefore acts like appendChild if !arg[1]
1009-
orig.insertBefore(table, settings.nTableReinsertBefore);
1010-
}
1011-
// -------------------------------------------------------------------------
1012-
// This is the only change with the "destroy()" API (with DT v1.10.1)
1013-
// -------------------------------------------------------------------------
1014-
// Add the TR elements back into the table in their original order
1015-
// jqTbody.children().detach();
1016-
// jqTbody.append( rows );
1017-
// -------------------------------------------------------------------------
1018-
// Restore the width of the original table - was read from the style property,
1019-
// so we can restore directly to that
1020-
jqTable.css('width', settings.sDestroyWidth).removeClass(classes.sTable);
1021-
// If the were originally stripe classes - then we add them back here.
1022-
// Note this is not fool proof (for example if not all rows had stripe
1023-
// classes - but it's a good effort without getting carried away
1024-
ien = settings.asDestroyStripes.length;
1025-
if (ien) {
1026-
jqTbody.children().each(function (i) {
1027-
$(this).addClass(settings.asDestroyStripes[i % ien]);
1028-
});
1029-
}
1030-
/* Remove the settings object from the settings array */
1031-
var idx = $.inArray(settings, $.fn.DataTable.settings);
1032-
if (idx !== -1) {
1033-
$.fn.DataTable.settings.splice(idx, 1);
1034-
}
947+
if ($.fn.DataTable.Api) {
948+
/**
949+
* Register an API to destroy a DataTable without detaching the tbody so that we can add new data
950+
* when rendering with the "Angular way".
951+
*/
952+
$.fn.DataTable.Api.register('ngDestroy()', function (remove) {
953+
remove = remove || false;
954+
return this.iterator('table', function (settings) {
955+
var orig = settings.nTableWrapper.parentNode;
956+
var classes = settings.oClasses;
957+
var table = settings.nTable;
958+
var tbody = settings.nTBody;
959+
var thead = settings.nTHead;
960+
var tfoot = settings.nTFoot;
961+
var jqTable = $(table);
962+
var jqTbody = $(tbody);
963+
var jqWrapper = $(settings.nTableWrapper);
964+
var rows = $.map(settings.aoData, function (r) {
965+
return r.nTr;
966+
});
967+
var ien;
968+
// Flag to note that the table is currently being destroyed - no action
969+
// should be taken
970+
settings.bDestroying = true;
971+
// Fire off the destroy callbacks for plug-ins etc
972+
$.fn.DataTable.ext.internal._fnCallbackFire(settings, 'aoDestroyCallback', 'destroy', [settings]);
973+
// If not being removed from the document, make all columns visible
974+
if (!remove) {
975+
new $.fn.DataTable.Api(settings).columns().visible(true);
976+
}
977+
// Blitz all `DT` namespaced events (these are internal events, the
978+
// lowercase, `dt` events are user subscribed and they are responsible
979+
// for removing them
980+
jqWrapper.unbind('.DT').find(':not(tbody *)').unbind('.DT');
981+
$(window).unbind('.DT-' + settings.sInstance);
982+
// When scrolling we had to break the table up - restore it
983+
if (table !== thead.parentNode) {
984+
jqTable.children('thead').detach();
985+
jqTable.append(thead);
986+
}
987+
if (tfoot && table !== tfoot.parentNode) {
988+
jqTable.children('tfoot').detach();
989+
jqTable.append(tfoot);
990+
}
991+
// Remove the DataTables generated nodes, events and classes
992+
jqTable.detach();
993+
jqWrapper.detach();
994+
settings.aaSorting = [];
995+
settings.aaSortingFixed = [];
996+
$.fn.DataTable.ext.internal._fnSortingClasses(settings);
997+
$(rows).removeClass(settings.asStripeClasses.join(' '));
998+
$('th, td', thead).removeClass(classes.sSortable + ' ' + classes.sSortableAsc + ' ' + classes.sSortableDesc + ' ' + classes.sSortableNone);
999+
if (settings.bJUI) {
1000+
$('th span.' + classes.sSortIcon + ', td span.' + classes.sSortIcon, thead).detach();
1001+
$('th, td', thead).each(function () {
1002+
var wrapper = $('div.' + classes.sSortJUIWrapper, this);
1003+
$(this).append(wrapper.contents());
1004+
wrapper.detach();
1005+
});
1006+
}
1007+
if (!remove && orig) {
1008+
// insertBefore acts like appendChild if !arg[1]
1009+
orig.insertBefore(table, settings.nTableReinsertBefore);
1010+
}
1011+
// -------------------------------------------------------------------------
1012+
// This is the only change with the "destroy()" API (with DT v1.10.1)
1013+
// -------------------------------------------------------------------------
1014+
// Add the TR elements back into the table in their original order
1015+
// jqTbody.children().detach();
1016+
// jqTbody.append( rows );
1017+
// -------------------------------------------------------------------------
1018+
// Restore the width of the original table - was read from the style property,
1019+
// so we can restore directly to that
1020+
jqTable.css('width', settings.sDestroyWidth).removeClass(classes.sTable);
1021+
// If the were originally stripe classes - then we add them back here.
1022+
// Note this is not fool proof (for example if not all rows had stripe
1023+
// classes - but it's a good effort without getting carried away
1024+
ien = settings.asDestroyStripes.length;
1025+
if (ien) {
1026+
jqTbody.children().each(function (i) {
1027+
$(this).addClass(settings.asDestroyStripes[i % ien]);
1028+
});
1029+
}
1030+
/* Remove the settings object from the settings array */
1031+
var idx = $.inArray(settings, $.fn.DataTable.settings);
1032+
if (idx !== -1) {
1033+
$.fn.DataTable.settings.splice(idx, 1);
1034+
}
1035+
});
10351036
});
1036-
});
1037+
}
10371038
});
10381039
}(angular, jQuery));
10391040
(function (angular) {

0 commit comments

Comments
 (0)