Javascript Girl
  1. Javascript Girl
  3. KnockoutJs – comment utiliser les données avec la table reliée existante
Intereting Posts
Appel d'une fonction .dll à partir d'une page html exécutée sur Chrome et Firefox Comment puis-je appeler un rappel de JS lorsque le téléchargement d'un fichier est terminé? Comment résoudre JSON.parse: mauvais caractère de contrôle en chaîne littéraire, dans ce code Pourquoi ma fonction toFixed () ne fonctionne pas? Comment puis-je faire une interpolation de chaîne en JavaScript? Javascript / Jquery Convertir chaîne en tableau Le routage angulaire ne fonctionne pas dans IE7 Comment utiliser JavaScript pour déterminer si un répertoire existe? Ouvrir XML et afficher les données dans div Comment surmonter un HTMLUnit ScriptException? Javascript – Remplacer les espaces '% 20' Correction des bugs IE: toujours une bonne idée? $ .getJSON bouton arrière montrant les données de retour JSON pas la page Avertissement WebGL: "L'attribut 0 est désactivé. Cela a une pénalité de performance significative " Comment analyser la chaîne JSON dans le type

KnockoutJs – comment utiliser les données avec la table reliée existante

J'ai une table HTML simple qui est liée à l'aide de knockoutJS. Cependant, j'ai ajouté une liaison personnalisée qui applique le plugin dattable jquery sur la table.

Lorsque je clique sur les en-têtes, la table disparaît. Une idée de comment je peux l'utiliser avec knockoutJS?

Il est vraiment inutile d'utiliser KnockoutJs pour exécuter la liaison de DataTable. Comme knockoutJs lie déjà la table HTML au modèle, utilisez simplement ce qui suit: 

$(function() { var dtOptions = { "bPaginate": false, "bLengthChange": false, "bFilter": false, "bInfo": false, bJQueryUI: true } var dt = $("#leadsTable").dataTable(dtOptions); $("#searchButton").click(function() { //... set url with search terms... $.get(url, function (data) { // destroy existing table dt.fnDestroy(); ko.mapping.fromJS(data, vm.model); // re-created AFTER ko mapping dt.dataTable(dtOptions); }); }) }); var serialisedModel = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); var vm = { data: ko.toJSON(serialisedModel), } ko.applyBindings(vm);

La partie cruciale est de détruire la table de données existante avant le mappage et de la recréer après le mappage. Je devais garder une référence à la table de données initiale pour la destruction ultérieure …

C'est la façon de le faire … J'ai fait un jsfiddle en montrant ceci:

Voici une solution de liaison personnalisée knock-out pour jQuery datatables. 

 ko.bindingHandlers.dataTablesForEach = { page: 0, init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var options = ko.unwrap(valueAccessor()); ko.unwrap(options.data); if(options.dataTableOptions.paging){ valueAccessor().data.subscribe(function (changes) { var table = $(element).closest('table').DataTable(); ko.bindingHandlers.dataTablesForEach.page = table.page(); table.destroy(); }, null, 'arrayChange'); } var nodes = Array.prototype.slice.call(element.childNodes, 0); ko.utils.arrayForEach(nodes, function (node) { if (node && node.nodeType !== 1) { node.parentNode.removeChild(node); } }); return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); }, update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { var options = ko.unwrap(valueAccessor()), key = 'DataTablesForEach_Initialized'; ko.unwrap(options.data); var table; if(!options.dataTableOptions.paging){ table = $(element).closest('table').DataTable(); table.destroy(); } ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext); table = $(element).closest('table').DataTable(options.dataTableOptions); if (options.dataTableOptions.paging) { if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false); else table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false); } if (!ko.utils.domData.get(element, key) && (options.data || options.length)) ko.utils.domData.set(element, key, true); return { controlsDescendantBindings: true }; }};

JSFiddle w / jqueryUI