PagedListPager分页如何实现无整页刷新仅刷新指定表格

默认PagedListPager渲染的分页按钮是普通<a>标签，点击会触发整页跳转，只要拦截按钮的默认跳转行为，绑定自定义逻辑即可实现局部刷新，具体实现步骤如下：

• 第一步：给分页控件加外层容器，方便统一绑定事件
  调整Razor页面的分页代码，给PagedListPager套一层固定id的容器，避免和页面其他a标签事件冲突：

  <div id="kyc-pager">
      @Html.PagedListPager(Model.kyc_paged_list, page => Url.Action("ClientDetails", new { id = ViewBag.ID, kyc_page = page, transaction_page = Model.transaction_page, active = "kyc" }))
  </div>
  

• 第二步：拦截分页点击事件，调用自定义表格重载函数
  页面加载完成后，给分页容器内的所有a标签绑定点击事件，阻止默认跳转，拿到目标分页地址后传入你已经实现的reloadTable()函数即可：

  document.addEventListener('DOMContentLoaded', function() {
      const pager = document.getElementById('kyc-pager');
      if (!pager) return;
  
      pager.addEventListener('click', function(e) {
          if (e.target.tagName.toLowerCase() === 'a') {
              // 阻止默认整页跳转
              e.preventDefault();
              // 获取目标分页地址，可从该地址中提取页码、参数传给重载方法
              const targetUrl = e.target.href;
              // 调用自定义的表格重载逻辑
              reloadTable(targetUrl);
              // 可选：更新地址栏url，不刷新页面，保留分页状态
              history.pushState(null, '', targetUrl);
          }
      })
  })
  

• 可选后端优化：支持局部视图返回
  如果你的ClientDetails接口默认返回完整页面，建议增加异步请求判断，分页请求时只返回kyc-history表格对应的局部视图，减少DOM解析开销：

  public ActionResult ClientDetails(int id, int kyc_page = 1, int transaction_page = 1, string active = "kyc")
  {
      // 原有业务逻辑：组装分页数据、赋值ViewModel
      var viewModel = ...;
      
      // 异步分页请求只返回表格局部视图
      if (Request.IsAjaxRequest())
      {
          return PartialView("_KycHistoryTable", viewModel);
      }
      // 普通整页请求返回完整视图
      return View(viewModel);
  }
  

注意：如果你的reloadTable()已经封装了参数拼接、异步请求、DOM替换的逻辑，只需要在点击事件里从目标url中提取到对应页码，直接传页码调用reloadTable(目标页码)即可，不用传完整url。

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