如何让Twemoji渲染DataTables所有分页中的表情符号

初始化DataTables后调用twemoji.parse(document.body)，仅第一页的🤔表情被Twemoji渲染；调整每页条数后，仍只有首页表情生效，需要让表格所有分页中的表情都被Twemoji渲染。

原因分析 #

DataTables的分页机制仅将当前页的行元素渲染到可见DOM中，其他页的行默认处于未激活状态。初始化时的Twemoji解析只能处理当时存在的DOM节点，切换分页后新加载的行并未被重新解析。

解决方案 #

利用DataTables的draw事件，每次表格重绘（分页切换、每页条数变更、排序/搜索触发重绘等）时，重新对表格tbody内的内容执行Twemoji解析。

修改后的代码 #

HTML部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="https://cdn.datatables.net/v/bs5/dt-2.3.2/datatables.min.css" rel="stylesheet" integrity="sha384-nt2TuLL4RlRQ9x6VTFgp009QD7QLRCYX17dKj9bj51w2jtWUGFMVTveRXfdgrUdx" crossorigin="anonymous">

<table cellpadding="0" cellspacing="0" border="0" class="row-border" id="mytable">
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>3</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>4</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>5</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>6</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>7</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>8</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>9</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>10</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>11</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
    <tr>
      <td>12</td>
      <td>ABCD</td>
      <td>🤔</td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@17.0.2/dist/twemoji.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.3.2/datatables.min.js" integrity="sha384-rL0MBj9uZEDNQEfrmF51TAYo90+AinpwWp2+duU1VDW/RG7flzbPjbqEI3hlSRUv" crossorigin="anonymous"></script>

JavaScript部分

$(function() {
  let mytable = new DataTable('#mytable');
  
  // 定义Twemoji解析函数
  function parseEmojis() {
    twemoji.parse(document.querySelector('#mytable tbody'));
  }
  
  // 初始化时解析一次
  parseEmojis();
  
  // 表格每次重绘后重新解析
  mytable.on('draw.dt', parseEmojis);
});

关键说明 #

• 绑定draw.dt事件：覆盖所有表格重绘场景（分页切换、每页条数修改、排序/搜索等）
• 仅解析表格tbody：避免重复处理页面其他元素，提升性能
• 初始化时执行一次：确保第一页内容正常渲染

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