如何在表格排序器和可编辑插件之间建立关系？

Question

我正在尝试使用 tablesorter 和 Tableedit

构建 editable 和 sortable table

通过 editable 插件更新数据后，我需要在 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

您尝试过使用 editable widget included with my fork of tablesorter 吗？

如果您想使用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
        }
      }
    });

});

P.S。函数的顺序很重要!

如何在表格排序器和可编辑插件之间建立关系？

How to make relationship between tablesorter and editable plugin?

html

javascript

jquery

tablesorter