如何在tablesorter和可編輯插件之間建立關係？我通過編輯插件更新數據

Question

我試圖用的tablesorter和Tableedit

建立可編輯和排序表後，我需要更新的tablesorter這個數據，我不知道該怎麼辦呢

$('.example-2').Tabledit({ 
    columns: { 
     identifier: [0, 'id'], 
     hideIdentifier: true, 
     editable: [[1, 'App Date'], [2, 'App Time'], [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter"}']], 
    } 
}); 
$(function() { 
    $(".example-2").tablesorter({ 
     headerTemplate: '{content}{icon}', 
     headers: { 
      0: { 
       sorter: false, 
      }, 
      // assign the secound column (we start counting zero) 
      4: { 
       // disable it by setting the property sorter to false 
       sorter: false, 

      }, 
      // assign the third column (we start counting zero) 
      5: { 
       // disable it by setting the property sorter to false 
       sorter: false 
      }, 
      6: { 
       // disable it by setting the property sorter to false 
       sorter: false 
      }, 
      7: { 
       // disable it by setting the property sorter to false 
       sorter: false 
      }, 
      8: { 
       // disable it by setting the property sorter to false 
       sorter: false 
      }, 
     } 


    }); 
    $(".tabledit-save-button").click(function() { 
     var usersTable = $(".example-2"); 
     usersTable.trigger("update") 
      .trigger("sorton", usersTable.get(0).config.sortList) 
      .trigger("appendCache") 
      .trigger("applyWidgets"); 
    }); 
}); 

我試圖在保存按鈕被點擊時更新數據，但它不起作用。

Answer 1

您是否嘗試過使用我的fork of tablesorter附帶的editable widget？

如果你想使用TableEdit，你需要添加以下代碼（demo）：

$(function() { 

    var $table = $('table'); 
    $table 
    .Tabledit({ 
     columns: { 
     identifier: [0, 'id'], 
     hideIdentifier: true, 
     editable: [ 
      [1, 'App Date'], 
      [2, 'App Time'], 
      [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter", "4": "@university"}'] 
     ] 
     } 
    }) 
    .on('click', 'button:not(.tabledit-save-button)', function() { 
     // prevent sorting while editing 
     $table[0].isUpdating = $(this).closest('td').hasClass('tabledit-edit-mode'); 
    }) 
    .on('click', 'button.tabledit-save-button', function() { 
     // update tablesorter cache 
     $table.trigger('update'); 
    }) 
    .tablesorter({ 
     theme: 'bootstrap', 
     headerTemplate: '{content}{icon}', 
     textExtraction: function(node, table, cellIndex) { 
     var $cell = $(node); 
     // sortable data inside of a span 
     return $cell.find('.tabledit-span').text() || $cell.text(); 
     }, 
     widgets: ['zebra', 'uitheme'], 
     headers: { 
     4: { 
      // don't sort the Tabledit controls added dynamically 
      sorter: false 
     } 
     } 
    }); 

}); 

附：功能的順序很重要！