如何在数据表中呈现 4999 到 $4,999.00 之类的数字？

Question

如果数据源来自现有 DOM，而不是某个 JSON 变量。如何将数据表中的 4999 之类的数字转换为 ,999.00？

不知道应该给main函数传递什么样的选项。

$('#example').DataTable(
    {
        // need help on this
    }
);

代码如下：

$(document).ready(function() {
    //Only needed for the filename of export files.
    //Normally set in the title tag of your page.
    document.title='Simple DataTable';
    // DataTable initialisation
    $('#example').DataTable(
        {
            
        }
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Order</th>
      <th>Description</th>
      <th>Deadline</th>
      <th>Status</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alphabet puzzle</td>
      <td>2016/01/15</td>
      <td>Done</td>
      <td data-order="1000">1000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Layout for poster</td>
      <td>2016/01/31</td>
      <td>Planned</td>
      <td data-order="1834">1834</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Image creation</td>
      <td>2016/01/23</td>
      <td>To Do</td>
      <td data-order="1500">1500</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Create font</td>
      <td>2016/02/26</td>
      <td>Done</td>
      <td data-order="1200">1200</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Sticker production</td>
      <td>2016/02/18</td>
      <td>Planned</td>
      <td data-order="2100">2100</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Glossy poster</td>
      <td>2016/03/17</td>
      <td>To Do</td>
      <td data-order="899">899</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Beer label</td>
      <td>2016/05/28</td>
      <td>Confirmed</td>
      <td data-order="2499">2499</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Shop sign</td>
      <td>2016/04/19</td>
      <td>Offer</td>
      <td data-order="1099">1099</td>
    </tr>
    <tr>
      <td>9</td>
      <td>X-Mas decoration</td>
      <td>2016/10/31</td>
      <td>Confirmed</td>
      <td data-order="1750">1750</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Halloween invite</td>
      <td>2016/09/12</td>
      <td>Planned</td>
      <td data-order="400">400</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Wedding announcement</td>
      <td>2016/07/09</td>
      <td>To Do</td>
      <td data-order="299">299</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Member pasport</td>
      <td>2016/06/22</td>
      <td>Offer</td>
      <td data-order="149">149</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Drink tickets</td>
      <td>2016/11/01</td>
      <td>Confirmed</td>
      <td data-order="199">199</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Album cover</td>
      <td>2017/03/15</td>
      <td>To Do</td>
      <td data-order="4999">4999</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Shipment box</td>
      <td>2017/02/08</td>
      <td>Offer</td>
      <td data-order="1399">1399</td>
    </tr>
    
    <tr>
      <td>16</td>
      <td>Wooden puzzle</td>
      <td>2017/01/11</td>
      <td>Done</td>
      <td data-order="1000">1000</td>
    </tr>
    <tr>
      <td>17</td>
      <td>Fashion Layout</td>
      <td>2016/01/30</td>
      <td>Planned</td>
      <td data-order="1834">1834</td>
    </tr>
    <tr>
      <td>18</td>
      <td>Toy creation</td>
      <td>2016/01/10</td>
      <td>To Do</td>
      <td data-order="1550">1550</td>
    </tr>
    <tr>
      <td>19</td>
      <td>Create stamps</td>
      <td>2016/02/26</td>
      <td>Done</td>
      <td data-order="1220">1220</td>
    </tr>
    <tr>
      <td>20</td>
      <td>Sticker design</td>
      <td>2017/02/18</td>
      <td>Planned</td>
      <td data-order="2100">2100</td>
    </tr>
    <tr>
      <td>21</td>
      <td>Poster rock concert</td>
      <td>2017/04/17</td>
      <td>To Do</td>
      <td data-order="899">899</td>
    </tr>
    <tr>
      <td>22</td>
      <td>Wine label</td>
      <td>2017/05/28</td>
      <td>Confirmed</td>
      <td data-order="2799">2799</td>
    </tr>
    <tr>
      <td>23</td>
      <td>Shopping bag</td>
      <td>2017/04/19</td>
      <td>Offer</td>
      <td data-order="1299">1299</td>
    </tr>
    <tr>
      <td>24</td>
      <td>Decoration for Easter</td>
      <td>2017/10/31</td>
      <td>Confirmed</td>
      <td data-order="1650">1650</td>
    </tr>
    <tr>
      <td>25</td>
      <td>Saint Nicolas colorbook</td>
      <td>2017/09/12</td>
      <td>Planned</td>
      <td data-order="510">510</td>
    </tr>
    <tr>
      <td>26</td>
      <td>Wedding invites</td>
      <td>2017/07/09</td>
      <td>To Do</td>
      <td data-order="399">399</td>
    </tr>
    <tr>
      <td>27</td>
      <td>Member pasport</td>
      <td>2017/06/22</td>
      <td>Offer</td>
      <td data-order="249">249</td>
    </tr>
    <tr>
      <td>28</td>
      <td>Drink tickets</td>
      <td>2017/11/01</td>
      <td>Confirmed</td>
      <td data-order="199">199</td>
    </tr>
    <tr>
      <td>29</td>
      <td>Blue-Ray cover</td>
      <td>2018/03/15</td>
      <td>To Do</td>
      <td data-order="1999">1999</td>
    </tr>
    <tr>
      <td>30</td>
      <td>TV carton</td>
      <td>2019/02/08</td>
      <td>Offer</td>
      <td data-order="1369">1369</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用 createdCell() callback, inside DataTables' columnDefs 初始化选项。

在回调中，您可以访问已创建单元格的 <td> 元素及其 data，因此您可以按照自己喜欢的方式操作两者。

在这个 fiddle 中，我使用 Intl.NumberFormat() api:

更改了显示的数据格式

$(document).ready(function() {
  // Only needed for the filename of export files.
  // Normally set in the title tag of your page.
  document.title = 'Simple DataTable';

  // DataTable initialisation
  $('#example').DataTable({
    columnDefs: [{
      targets: 4, // <-- this is the target column 
      createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
        const formattedContent = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD'
        }).format(cellData);

        cell.innerHTML = formattedContent;
      },
    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>


<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Order</th>
      <th>Description</th>
      <th>Deadline</th>
      <th>Status</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alphabet puzzle</td>
      <td>2016/01/15</td>
      <td>Done</td>
      <td data-order="1000">1000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Layout for poster</td>
      <td>2016/01/31</td>
      <td>Planned</td>
      <td data-order="1834">1834</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Image creation</td>
      <td>2016/01/23</td>
      <td>To Do</td>
      <td data-order="1500">1500</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Create font</td>
      <td>2016/02/26</td>
      <td>Done</td>
      <td data-order="1200">1200</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Sticker production</td>
      <td>2016/02/18</td>
      <td>Planned</td>
      <td data-order="2100">2100</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Glossy poster</td>
      <td>2016/03/17</td>
      <td>To Do</td>
      <td data-order="899">899</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Beer label</td>
      <td>2016/05/28</td>
      <td>Confirmed</td>
      <td data-order="2499">2499</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Shop sign</td>
      <td>2016/04/19</td>
      <td>Offer</td>
      <td data-order="1099">1099</td>
    </tr>
    <tr>
      <td>9</td>
      <td>X-Mas decoration</td>
      <td>2016/10/31</td>
      <td>Confirmed</td>
      <td data-order="1750">1750</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Halloween invite</td>
      <td>2016/09/12</td>
      <td>Planned</td>
      <td data-order="400">400</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Wedding announcement</td>
      <td>2016/07/09</td>
      <td>To Do</td>
      <td data-order="299">299</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Member pasport</td>
      <td>2016/06/22</td>
      <td>Offer</td>
      <td data-order="149">149</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Drink tickets</td>
      <td>2016/11/01</td>
      <td>Confirmed</td>
      <td data-order="199">199</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Album cover</td>
      <td>2017/03/15</td>
      <td>To Do</td>
      <td data-order="4999">4999</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Shipment box</td>
      <td>2017/02/08</td>
      <td>Offer</td>
      <td data-order="1399">1399</td>
    </tr>

    <tr>
      <td>16</td>
      <td>Wooden puzzle</td>
      <td>2017/01/11</td>
      <td>Done</td>
      <td data-order="1000">1000</td>
    </tr>
    <tr>
      <td>17</td>
      <td>Fashion Layout</td>
      <td>2016/01/30</td>
      <td>Planned</td>
      <td data-order="1834">1834</td>
    </tr>
    <tr>
      <td>18</td>
      <td>Toy creation</td>
      <td>2016/01/10</td>
      <td>To Do</td>
      <td data-order="1550">1550</td>
    </tr>
    <tr>
      <td>19</td>
      <td>Create stamps</td>
      <td>2016/02/26</td>
      <td>Done</td>
      <td data-order="1220">1220</td>
    </tr>
    <tr>
      <td>20</td>
      <td>Sticker design</td>
      <td>2017/02/18</td>
      <td>Planned</td>
      <td data-order="2100">2100</td>
    </tr>
    <tr>
      <td>21</td>
      <td>Poster rock concert</td>
      <td>2017/04/17</td>
      <td>To Do</td>
      <td data-order="899">899</td>
    </tr>
    <tr>
      <td>22</td>
      <td>Wine label</td>
      <td>2017/05/28</td>
      <td>Confirmed</td>
      <td data-order="2799">2799</td>
    </tr>
    <tr>
      <td>23</td>
      <td>Shopping bag</td>
      <td>2017/04/19</td>
      <td>Offer</td>
      <td data-order="1299">1299</td>
    </tr>
    <tr>
      <td>24</td>
      <td>Decoration for Easter</td>
      <td>2017/10/31</td>
      <td>Confirmed</td>
      <td data-order="1650">1650</td>
    </tr>
    <tr>
      <td>25</td>
      <td>Saint Nicolas colorbook</td>
      <td>2017/09/12</td>
      <td>Planned</td>
      <td data-order="510">510</td>
    </tr>
    <tr>
      <td>26</td>
      <td>Wedding invites</td>
      <td>2017/07/09</td>
      <td>To Do</td>
      <td data-order="399">399</td>
    </tr>
    <tr>
      <td>27</td>
      <td>Member pasport</td>
      <td>2017/06/22</td>
      <td>Offer</td>
      <td data-order="249">249</td>
    </tr>
    <tr>
      <td>28</td>
      <td>Drink tickets</td>
      <td>2017/11/01</td>
      <td>Confirmed</td>
      <td data-order="199">199</td>
    </tr>
    <tr>
      <td>29</td>
      <td>Blue-Ray cover</td>
      <td>2018/03/15</td>
      <td>To Do</td>
      <td data-order="1999">1999</td>
    </tr>
    <tr>
      <td>30</td>
      <td>TV carton</td>
      <td>2019/02/08</td>
      <td>Offer</td>
      <td data-order="1369">1369</td>
    </tr>
  </tbody>
</table>

如何在数据表中呈现 4999 到 $4,999.00 之类的数字？

How do I render numbers like 4999 to $4,999.00 in datatables?

datatables