Twemoji renders only emojis in the first page of a DataTables table

$(function() {
  let mytable = new DataTable('#mytable');
  document.body = twemoji.parse(document.body);
});

<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>

In the result of this code, only the first 10 thinking faces, which belong to the page 1, are rendered by Twemoji.

If I change the page size with lengthMenu, I get the first page rendered same like this, but not the following pages.

I want all emojis in the table, no matter which page it is contained in, to be rendered as Twemoji.

Solution

After some fiddling on my project's original code, I found the answer: the order matters.

twemoji.parse must be called before new DataTable(...).

$(function() {
  // render emojis first!
  document.body = twemoji.parse(document.body);
  
  // and then make the table into DataTable
  let mytable = new DataTable('#mytable'); 
});

<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>