在将新行插入数据库后，如何使tablesorter刷新？

Question

我很确定我在用Mottie的版本。

我可以通过jQuery对话框将数据输入数据库，但是如何使表刷新以显示新数据？

我尝试过的(各种排列)：

jQuery("#class-details-table").trigger('updateAll', [resort]);

这是我的jQuery UI对话框：

 $(function() {
        $( "#dialog-2" ).dialog({
            autoOpen: false, 
            resizable: false,
            modal: true,
            title: "Modal",
            height: 800,
            width: 800,
            buttons: {
              OK: function() {
                    var dialog = $("#dialog-2");
                    var data = $("#add-class-student-form").serialize();
                    $.ajax({
                   url: '/directory/controller/action',
                   type: 'post',
                   cache: false,
                   data: data,
                   success: function(data) {
                   var resort = true; // re-apply the current sort
                        jQuery("#class-details-table").trigger('updateAll', [resort]);
                        alert('done');  //cheap debugger, gets here.
                   },
                   error: function(data){
                        alert('failed');
                        $("#dialog-2").html(data);
                   }
                });
                $('#add-class-student-form')[0].reset();
                $(this).dialog("close");

              }
           },
           title: "Success",
        });
     });

但这没什么用。

这是实际的tablesorter实现：

$(document).ready(function() { 
      $(function() {

      $("#class-details-table")
        .tablesorter({
          theme : 'blue',

          widgets: ['editable'],
          widgetOptions: {

            editable_columns       : [0,1,2,3,4],       // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
            editable_enterToAccept : true,          // press enter to accept content, or click outside if false
            editable_autoAccept    : true,          // accepts any changes made to the table cell automatically (v2.17.6)
            editable_autoResort    : false,         // auto resort after the content has changed.
            editable_validate      : null,          // return a valid string: function(text, original, columnIndex){ return text; }
            editable_focused       : function(txt, columnIndex, $element) {
              // $element is the div, not the td
              // to get the td, use $element.closest('td')
              $element.addClass('focused');
            },
            editable_blur          : function(txt, columnIndex, $element) {
              // $element is the div, not the td
              // to get the td, use $element.closest('td')
              $element.removeClass('focused');
            },
            editable_selectAll     : function(txt, columnIndex, $element){
              // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
              // only select everthing within the element when the content starts with the letter "B"
              return /^./i.test(txt) && columnIndex === 0;
            },
            //editable_wrapContent   : '<div>',       // wrap all editable cell content... makes this widget work in IE, and with autocomplete
            editable_noEdit        : 'no-edit',     // class name of cell that is not editable
            editable_editComplete  : 'editComplete' // event fired after the table content has been edited
          }
        })
        // config event variable new in v2.17.6
            .children('tbody').on('editComplete', 'td', function(event, config){


              var $this = $(this),

                newContent = $this.text(),
                cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
                rowIndex = $this.closest('tr').attr('id'),// data-row-index stored in row id
                dbColumnName = $this.closest('td').attr('name'); // cell-index stored in td id;

                $.ajax({
                       url: '/directory/controller/action',
                       type: 'post',
                        data:
                        {   "newContent" : newContent,
                            "cellIndex" : cellIndex,
                            "rowIndex"  : rowIndex,
                            "dbColumnName"  : dbColumnName //I generated the column name as the name of the td;

                        },
                       success: function(data) {
                         jQuery("#class-details-table").trigger('updateAll');
                        //$('#errorDiv').html('SUCCESS - ' + data);
                       },

                       error: function(data){
                            $('#errorDiv').html('FAILED - ' + data);
                       }
                    });

            });
        }); 
});

Answer 1

在success ajax回调函数中，在触发"update“事件之前，需要编写代码将新行添加到表中(只有在修改了表头单元格时才应该使用”updateAll“)。

我不知道ajax请求返回的是什么类型的数据，但是如果它是普通的HTML，它应该如下所示：

success: function(data) {
    if ( data ) {
        jQuery("#class-details-table")
            // attach the rows to the tbody (use `:eq(#)` if there is more than one)
            .children('tbody').append( data.newContent )
            // this triggered event will propagate up to the table
            .trigger('update');
    }
}