├── README.md
└── DatatablesForEach.js


/README.md:
--------------------------------------------------------------------------------
1 | # DatatablesForEach-Custom-Knockout-Binding
2 | This is a custom knockout binding for jquery data tables.
3 | 
4 | Example Here: https://jsfiddle.net/zachpainter77/5pznw6re/
5 | 


--------------------------------------------------------------------------------
/DatatablesForEach.js:
--------------------------------------------------------------------------------
 1 | ko.bindingHandlers.dataTablesForEach = {
 2 | 	page: 0,
 3 |     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
 4 |       var options = ko.unwrap(valueAccessor());
 5 |       ko.unwrap(options.data);
 6 |       if(options.dataTableOptions.paging){
 7 |     	valueAccessor().data.subscribe(function (changes) {
 8 |         	var table = $(element).closest('table').DataTable();
 9 |             ko.bindingHandlers.dataTablesForEach.page = table.page();
10 |             table.destroy();
11 |         }, null, 'arrayChange');          
12 |       }
13 |         var nodes = Array.prototype.slice.call(element.childNodes, 0);
14 |         ko.utils.arrayForEach(nodes, function (node) {
15 |         	if (node && node.nodeType !== 1) {
16 |             	node.parentNode.removeChild(node);	
17 |             }
18 |         });
19 |         return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
20 |     },
21 |     update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {        
22 |         var options = ko.unwrap(valueAccessor()),
23 |             key = 'DataTablesForEach_Initialized';
24 |         ko.unwrap(options.data);
25 |         var table;
26 |         if(!options.dataTableOptions.paging){
27 |           table = $(element).closest('table').DataTable();
28 |         	table.destroy();
29 |         }
30 |         ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
31 |         table = $(element).closest('table').DataTable(options.dataTableOptions);
32 |         if (options.dataTableOptions.paging) {
33 |            if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
34 |                table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);                
35 |            else 
36 |                table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);                
37 |         }        
38 |         if (!ko.utils.domData.get(element, key) && (options.data || options.length))
39 |             ko.utils.domData.set(element, key, true);
40 |         return { controlsDescendantBindings: true };
41 |     }
42 | }; 
43 | 


--------------------------------------------------------------------------------