tablesorter에 얼룩말 행

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; 
 
}

안녕을 삭제 한 후 작업

신참 여기 필터 & 정렬로도 tablesorter에 실행하지. 모든 것이 완벽하게 작동합니다 (재설정 버튼 포함). 약간의 배경 지식으로, 데이터 행을 전달하는 모듈과 함께 DotNet Nuke 사이트를 사용합니다.

각 행의 일부는 행 삭제를 시작하는 하이퍼 링크입니다. 또한 일부 JavaScript를 삽입 할 수있는 섹션이 포함되어 있습니다.

문제점 행을 삭제하면 제브라 위젯이 작동하지 않습니다. (모든 행은 흰색입니다.)

삭제 하이퍼 링크를 누르는 다른 부분은 다음과 같습니다.

2 가지 작업을 수행해야하므로 함수를 만드는 것이 가장 좋습니다.

기능 예. 내 시도입니다. 페이지에는 잘 작동하는 resetsort 버튼이 있습니다.

Ive는 resetsort 버튼 바로 아래에 제 기능을 넣으려고했지만 효과가 없습니다.

이 기능을 사용하는 데 도움을 주셔서 미리 감사드립니다.

Answer 1

sortReset 메서드는 적용된 후에 위젯을 자동으로 업데이트해야하므로이 경우에는 왜 발생하지 않는지 잘 모르겠습니다.

어쨌든 "sortReset"이 실행되면 처리가 필요하므로 지연이 필요하므로 즉시 "applyWidgets"를 사용하면 작동하지 않습니다.

은 "sortReset"트리거

는 콜백을 포함, 그래서이 코드를 시도 않습니다 : 내가 약간의 자유 시간을 얻을 때이 내부에서 일어나는 않는 이유를 알아 내기 위해 노력할 것이다

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

합니다.