JQuery Ajax 数据表保留前导零

Question

我们的 Web 应用程序是用 Perl 构建的，并使用 Ajax DataTables 库/包来利用 MySQL 表。 https://datatables.net/

虽然由于在 Perl 脚本中构建原始数据而存在一层复杂性，但它对我们很有帮助，但是似乎有一个列值被随机解释为数字，并删除了其前导零。

MySQL 列值是一个正确的 varchar，Perl 可以在其他地方正常显示该 varchar 值。当传递给 JQuery 中的 Datatable 构造函数时似乎会发生这种情况。

我一直在阅读 DataTables 文档，但他们的示例确实不能很好地转化为这种情况。

# Perls raw jquery config getting passed
#
my $config = <<'EOD';
    {
      buttons: [],
      lengthMenu: [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
      columnDefs: [{
        targets: "6", data: "string" 
      }],
    }
EOD

我相信秘密在于 ColumnDefs，但 DataTables 文档让我有点困惑。我通过的配置什么也没做。它不会出错，但也不会执行任何操作。

所以第 6 列是我们的

member_id

varchar 列，如果会员 id 是

0012345

，它只会显示

12345

。

我正在对这个问题进行深入研究，DataTables 论坛也有类似的内容：https://datatables.net/forums/discussion/65305/leading-zero-problem

但是，他们使用的解决方案似乎是PHP，而且他们似乎也使用了POST方法？

如果有人熟悉这个包，我们将不胜感激。谢谢你。

Answer 1

您可以在 DataTables 初始化中尝试类似的操作：

$(document).ready(function() {
  $('#example').DataTable({
    buttons: [],
    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
    columnDefs: [
      {
        targets: 1, // Index of the Member ID column
        render: function(data, type, row) {
          return type === 'display' ? data : String(data);
        }
      }
    ]
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Member ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>0012345</td>
    </tr>
  </tbody>
</table>

这里的渲染函数检查渲染类型是否为“display”；如果是，则按原样返回数据，但如果不是，则将数据显式转换为字符串。这应确保 DataTables 将第 6 列中的数据视为字符串并保留前导零。