How to make relationship between tablesorter and editable plugin?

Question

I am trying to build editable and sortable table using tablesorter and Tableedit

After I updated data via editable plugin I need to update this data in tablesorter and I don't know how to do it

$('.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");
    });
});

I am trying to update data when save button is clicked ,but it is not working.

Answer 1

Have you tried using the editable widget included with my fork of tablesorter?

If you want to use TableEdit, you'll need to add the following code (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
        }
      }
    });

});

P.S. The order of the functions is important!