如何基于条件阻止用户切换jQuery DataTables分页页面？

要实现基于条件阻止分页切换（保留分页控件但停在当前页），你之前用的page.dt事件时机不对——这个事件是分页完成后才触发的，此时服务端请求已经发出去了，根本拦不住。得从两个层面入手：拦截分页控件的交互行为，以及阻止服务端请求的发送。

具体实现方案 #

1. 先定义一个标记变量，用来判断是否需要阻止分页（比如标记是否有未保存修改）：

let hasUnsavedChanges = false;
// 当用户修改数据时，把这个变量设为true，比如输入框change事件中：
// $('#example input').on('change', () => hasUnsavedChanges = true);
// 保存后设为false：
// $('#save-btn').on('click', () => hasUnsavedChanges = false);

2. 拦截分页按钮的点击行为，阻止默认跳转：

// 监听分页控件的点击事件
$('#example').on('click', '.dataTables_paginate .paginate_button', function(e) {
  if (hasUnsavedChanges) {
    e.preventDefault(); // 阻止默认的分页跳转
    alert('存在未保存的修改，请保存后再切换分页');
  }
});

3. 拦截服务端请求（防止通过API调用或其他方式触发分页）：
   用preXhr.dt事件——这个事件在服务端请求发送前触发，可以直接取消请求，同时恢复当前页码的UI状态：

$('#example').on('preXhr.dt', function(e, settings, data) {
  // 判断是否是分页切换的请求：start参数变化代表分页偏移改变
  if (hasUnsavedChanges && data.start !== settings._iDisplayStart) {
    e.preventDefault(); // 取消服务端请求
    const table = $('#example').DataTable();
    // 强制恢复当前页码的UI，避免DataTables内部状态混乱
    table.page(table.page()).draw(false);
    alert('存在未保存的修改，请保存后再切换分页');
  }
});

关键说明 #

• preXhr.dt是核心：服务端模式下，任何分页、排序、搜索都会触发XHR请求，这个事件能在请求发出去前拦截，确保不会加载新页面的数据。
• 拦截按钮点击是为了覆盖用户直接点击分页按钮的场景，避免触发不必要的请求。
• 当用户完成保存后，记得把hasUnsavedChanges设为false，就能正常使用分页了。

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