tablesorter Zebra ne fonctionne pas après la suppression d'une ligne

Question

$(function() { 
 

 
    // NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js 
 
    // file; it is included here to show how you can modify the default classes 
 
    $.tablesorter.themes.bootstrap = { 
 
    // these classes are added to the table. To see other table classes available, 
 
    // look here: http://getbootstrap.com/css/#tables 
 
    table  : 'table table-bordered table-striped', 
 
    caption  : 'caption', 
 
    // header class names 
 
    header  : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css) 
 
    sortNone  : '', 
 
    sortAsc  : '', 
 
    sortDesc  : '', 
 
    active  : '', // applied when column is sorted 
 
    hover  : '', // custom css required - a defined bootstrap style may not override other classes 
 
    // icon class names 
 
    icons  : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header 
 
    iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted 
 
    iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort 
 
    iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort 
 
    filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element 
 
    footerRow : '', 
 
    footerCells : '', 
 
    even   : '', // even row zebra striping 
 
    odd   : '', // odd row zebra striping 
 
    sortMultiSortKey: 'shiftKey', 
 
    
 
    }; 
 
    
 
    $('#resetsort').click(function(e) { 
 
    $("#receipts").trigger('sortReset').trigger('applyWidgets'); 
 
    return false; 
 
    }); 
 
    
 
    
 
    // call the tablesorter plugin and apply the uitheme widget 
 
    $("#receipts").tablesorter({ 
 
    // this will apply the bootstrap theme if "uitheme" widget is included 
 
    // the widgetOptions.uitheme is no longer required to be set 
 
    theme : "blue", 
 
    
 
    widthFixed: true, 
 
    
 

 
    headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon! 
 

 
    // widget code contained in the jquery.tablesorter.widgets.js file 
 
    // use the zebra stripe widget if you plan on hiding any rows (filter widget) 
 
    widgets : [ "uitheme", "filter", "zebra" ], 
 

 
    widgetOptions : { 
 
     // using the default zebra striping class name, so it actually isn't included in the theme variable above 
 
     // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden 
 
     zebra : ["even", "odd"], 
 

 
     // reset filters button 
 
     filter_reset : ".reset", 
 

 
     // extra css class name (string or array) added to the filter element (input or select) 
 
     filter_cssFilter: "form-control", 
 

 
     // set the uitheme widget to use the bootstrap theme class names 
 
     // this is no longer required, if theme is set 
 
     // ,uitheme : "bootstrap" 
 

 
    } 
 
    }) 
 
    .tablesorterPager({ 
 

 
    // target the pager markup - see the HTML block below 
 
    container: $(".ts-pager"), 
 

 
    // target the pager page select dropdown - choose a page 
 
    cssGoto : ".pagenum", 
 

 
    // remove rows from the table to speed up the sort of large tables. 
 
    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled. 
 
    removeRows: false, 
 

 
    // output string - default is '{page}/{totalPages}'; 
 
    // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows} 
 
    output: '{startRow} - {endRow}/{filteredRows} ({totalRows})' 
 

 
    }); 
 

 
}); 
 
    
 
function yeah() { 
 
    return confirm('Are you sue you want to delete?'); 
 
    $("#receipts").trigger('applyWidgets'); 
 
    return false; 
 
}

Salut,

Débutant ici en cours d'exécution tablesorter aussi avec filtre & Trier. Tout fonctionne parfaitement (y compris les boutons de réinitialisation). Comme un peu de fond, Im en utilisant un site DotNet Nuke avec un module qui fournit les lignes de données.

Une partie de chaque ligne est un lien hypertexte qui déclenche la suppression d'une ligne. Il comprend également une section où je peux insérer du JavaScript.

Problème lorsque je supprime une ligne, le widget zebra ne fonctionne pas. (Toutes les lignes sont blanches)

L'autre partie de l'appui sur le lien hypertexte de suppression est que Êtes-vous sûr que le message monte.

Ma compréhension est la meilleure approche ici est de créer une fonction puisque 2 actions doivent être effectuées.

Fonction Ouais est ma tentative. La page a également un bouton resetsort qui fonctionne bien. J'ai essayé de mettre ma fonction juste en dessous du bouton resetsort mais cela n'a eu aucun effet.

Merci d'avance pour toute aide dans l'exécution de cette fonction.

Answer 1

La méthode sortReset devrait mettre à jour les widgets automatiquement après leur application, donc je ne sais pas pourquoi cela ne se produit pas dans ce cas.

Quoi qu'il en soit, lorsqu'un "sortReset" est déclenché, un traitement doit avoir lieu, donc l'utilisation de "applyWidgets" immédiatement après ne fonctionnera pas car il doit y avoir un délai.

Le déclencheur « sortReset » inclut un rappel, alors essayez ce code:

$("#receipts").trigger('sortReset', [function(){ 
    $('#receipts').trigger('applyWidgets'); 
}]); 

Je vais essayer de comprendre pourquoi cela ne se produit pas à l'intérieur quand je reçois un peu de temps libre.