如何为jQuery DataTables分页页码添加aria-labelledby属性

1. 静态分页场景写法 #

如果表格是一次性渲染完成、分页结构不会动态更新，直接用以下代码遍历数字页码按钮并设置属性：

// 筛选分页栏中的数字页码按钮，排除First/Previous/Next/Last
$('.dataTables_paginate .paginate_button').not('.first, .previous, .next, .last').each(function() {
  // 获取按钮上的页码数字
  const pageNumber = $(this).text().trim();
  // 设置aria-labelledby属性值
  $(this).attr('aria-labelledby', `Go to Page ${pageNumber}`);
});

2. 动态分页适配（异步/重绘场景） #

如果表格涉及异步加载数据、或排序/搜索后会触发分页重绘，需要把代码放在DataTables的drawCallback回调中，确保每次分页更新后属性都会被重新设置：

$('#your-table-id').DataTable({
  paginationType: 'full_numbers_no_ellipses',
  // 其他表格配置项...
  drawCallback: function() {
    // 处理数字页码的aria属性
    $('.dataTables_paginate .paginate_button').not('.first, .previous, .next, .last').each(function() {
      const pageNumber = $(this).text().trim();
      $(this).attr('aria-labelledby', `Go to Page ${pageNumber}`);
    });

    // 这里可以保留你之前处理First/Previous/Next/Last按钮的代码
  }
});

3. 精准筛选页码按钮（特殊结构适配） #

如果你的分页按钮类名或结构有差异，也可以通过正则匹配文本的方式，精准定位纯数字的页码按钮：

$('.dataTables_paginate .paginate_button').filter(function() {
  // 匹配文本为纯数字的按钮
  return /^\d+$/.test($(this).text().trim());
}).each(function() {
  const pageNumber = $(this).text().trim();
  $(this).attr('aria-labelledby', `Go to Page ${pageNumber}`);
});

无障碍细节提示 #

这里补充一个标准用法说明：aria-labelledby的设计初衷是引用页面上已有元素的ID，如果你只是想让屏幕阅读器直接读出“Go to Page X”的描述文本，更合适的是使用aria-label属性——只需把代码里的attr('aria-labelledby', ...)改成attr('aria-label', ...)即可，这是无障碍适配中更常用的方式。

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