修改FooTable客户数据后重载页面保留当前分页及筛选状态的咨询

解决思路 #

你遇到的问题本质是页面重载后会重置所有前端临时状态，包括FooTable的当前分页、筛选条件。可以根据你的业务需求选择以下两种方案：

方案1：取消页面重载，直接更新表格数据（最推荐） #

你已经使用AJAX异步提交更新请求，完全不需要刷新整个页面，只需在请求成功后更新对应行的表格数据即可，天然保留所有分页、筛选、排序状态。

修改你的rinnova函数的success回调即可：

function rinnova(id) {
  var formData = new FormData();

  var abbonamento = id.split("-");
  var abb = $("#abb" + abbonamento[3]).val();
  // 拼接当前要更新的客户ID
  var targetId = abbonamento[0] + "-" + abbonamento[1] + "-" + abbonamento[2];
  console.log(abb);

  formData.append("id", targetId);
  formData.append("abb", abb);

  $.ajax({
    url: "include/rinnovaabbonamento.php",
    data: formData,
    type: "POST",
    contentType: false,
    processData: false,
    beforeSend: function () {
      return confirm("Vuoi rinnovare l'abbonamento?");
    },
    success: function (response) {
      $(".box").html("<h3 class='text-center pb-3 pt-3'>Rinnovo confermato!</h3>");
      // 移除原来的重载逻辑
      // document.location.reload();

      // 直接更新FooTable对应行的数据
      // 遍历找到ID匹配的行
      ft.rows.each(function(row) {
        if (row.val().id === targetId) {
          // 这里根据你实际更新的字段修改对应值，也可以从response里取后端返回的最新数据
          var newRowVal = row.val();
          newRowVal.scadenza = abb; 
          row.val(newRowVal);
          return false; // 找到目标行后终止遍历
        }
      });
    }
  });
}

编辑保存行的逻辑也可以用同样的方式处理，无需刷新页面。

方案2：如果业务必须刷新页面，持久化状态后恢复 #

如果确实需要重载页面，可以在刷新前把当前分页、筛选条件存在sessionStorage中，页面初始化FooTable时读取存储的状态恢复：

第一步：修改重载前的逻辑，保存状态

// rinnova函数的success回调修改为：
success: function (response) {
  $(".box").html("<h3 class='text-center pb-3 pt-3'>Rinnovo confermato!</h3>");
  // 保存当前状态到sessionStorage
  sessionStorage.setItem('fooTablePage', ft.page.current);
  sessionStorage.setItem('fooTableFilter', ft.filter.value ?? '');
  // 再执行重载
  document.location.reload();
}

第二步：修改FooTable初始化逻辑，读取状态恢复

if ($('.footable-editing').length) {
  var
    $modal = $('#footable-editor-modal'),
    $editor = $('#footable-editor'),
    $editorTitle = $('#footable-editor-title'),
    // 读取存储的状态，没有就用默认值
    savedPage = parseInt(sessionStorage.getItem('fooTablePage')) || 1,
    savedFilter = sessionStorage.getItem('fooTableFilter') || '',
    ft = FooTable.init('.footable-editing', {
      // 配置初始化页码和筛选条件
      page: {
        current: savedPage
      },
      filter: {
        enabled: true, // 如果你开启了筛选要保留这个配置
        value: savedFilter
      },
      editing: {
        // 保留你原来的editing配置不变
        enabled: true,
        addRow: function() {
          // 原有逻辑不变
        },
        editRow: function(row) {
          // 原有逻辑不变
        },
        deleteRow: function(row) {
          // 原有逻辑不变
        }
      }
    }),
    uid = 10;
  // 恢复完成后清除存储的状态，避免下次进入页面还跳到之前的分页
  sessionStorage.removeItem('fooTablePage');
  sessionStorage.removeItem('fooTableFilter');
};

内容的提问来源于stack exchange，提问作者alessio scionti