如何实现Data Table移动端/桌面端分页加载条数差异化（限HTML/JQuery/CSS）

完全可以实现你的需求！不用Bootstrap也不用单独的m.域名，靠HTML、jQuery和原生CSS就能搞定。下面是针对你需求的分步解决方案：

1. 用CSS媒体标记当前视图类型 #

我们可以借助CSS媒体查询，给一个隐藏元素设置自定义属性来标记当前视图，这样jQuery能准确判断是移动端还是桌面端（比直接读窗口宽度更适配响应式逻辑）：

<!-- 用于检测视图类型的隐藏元素 -->
<div id="view-detector"></div>

#view-detector {
  /* 完全隐藏，不影响页面布局 */
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

/* 移动端视图（这里以768px为断点，可根据你的需求调整） */
@media (max-width: 767px) {
  #view-detector {
    --view-type: mobile;
  }
}

/* 桌面端视图 */
@media (min-width: 768px) {
  #view-detector {
    --view-type: desktop;
  }
}

2. 编写jQuery逻辑初始化并动态调整DataTables #

接下来我们通过jQuery读取视图标记，初始化DataTables时设置对应每页条数，同时监听窗口 resize 事件，在视图切换时自动更新分页配置：

$(document).ready(function() {
  // 获取当前视图类型的工具函数
  function getCurrentView() {
    const detector = document.getElementById('view-detector');
    return getComputedStyle(detector).getPropertyValue('--view-type').trim();
  }

  // 初始化/重置DataTables的函数
  function initOrUpdateDataTable(targetLength) {
    // 先销毁已存在的实例，避免重复初始化冲突
    if ($.fn.dataTable.isDataTable('#your-table-id')) {
      $('#your-table-id').DataTable().destroy();
    }

    // 初始化DataTables，设置对应每页条数
    $('#your-table-id').DataTable({
      pageLength: targetLength,
      paging: true, // 开启分页
      ordering: true, // 保持排序功能（可根据你的需求关闭）
      // 如果是服务器端分页，记得打开下面的配置并替换接口地址
      // serverSide: true,
      // ajax: '/your-data-api-endpoint'
    });
  }

  // 页面首次加载时初始化
  const initialView = getCurrentView();
  initOrUpdateDataTable(initialView === 'mobile' ? 5 : 10);

  // 监听窗口 resize 事件，视图切换时自动更新分页条数
  let resizeTimer;
  $(window).resize(function() {
    // 加延迟避免窗口拖动时频繁触发
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      const currentView = getCurrentView();
      const currentLength = $('#your-table-id').DataTable().page.len();
      const targetLength = currentView === 'mobile' ? 5 : 10;

      // 只有当当前条数和目标条数不一致时才更新
      if (currentLength !== targetLength) {
        initOrUpdateDataTable(targetLength);
      }
    }, 250);
  });
});

3. 关键注意事项 #

• 断点调整：上面的媒体查询用768px作为移动端/桌面端的分界，你可以根据自己的设计规范修改这个值。
• 服务器端分页适配：如果你的数据是通过服务器端分页加载的，只需确保后端接口能接收length参数，并返回对应条数的数据即可，前端逻辑不需要大改。
• 预定义主题兼容：这个方案只调整DataTables的分页参数，不会修改主题样式，完全兼容你正在使用的预定义主题。

这样就能实现：页面加载时根据当前视图自动加载5条（移动端）或10条（桌面端）数据，后续分页加载对应条数，而且窗口大小切换视图时，分页配置也会自动同步更新。

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