在1页上显示2个表格

Question

我的页面上有2个网格表。当我想加载它们时，第一个网格表被加载，但第二个不加载。我该如何解决这个问题？

这是我的第一个网格表的表格：

<table id="employee_grid" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

有第二个网格表：

<table id="employee_grid2" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

如您所见，我更改了第二张表的ID。

第一张桌子有javascript：

<script type="text/javascript">
    $(document).ready(function() {
        $('#employee_grid').DataTable({
            "bprocessing" : true,
            "serverSide" : true,
            "ajax" : {
                "url" : "post1.php",
                "type" : "POST",
                "error" : function() {
                    $("#employee_grid_processing").css("display", "none");
                }
            },
            "columnDefs" : [{
                "targets" : 0,
                "render" : function(data, type, full, meta) {
                    return '<a href="http://www.example.com/' + data + '">Link</a>';
                }
            }]
        });
    });
</script>

这是第二个表的javascript：

<script type="text/javascript">
    $(document).ready(function() {
        $('#employee_grid2').DataTable({
            "bprocessing" : true,
            "serverSide" : true,
            "ajax" : {
                "url" : "post2.php",
                "type" : "POST",
                "error" : function() {
                    $("#employee_grid_processing").css("display", "none");
                }
            },
            "columnDefs" : [{
                "targets" : 0,
                "render" : function(data, type, full, meta) {
                    return '<a href="http://www.example.com/' + data + '">Link</a>';
                }
            }]
        });
    });
</script>

正如您所看到的，我在第二个javascript代码中更改了唯一的内容= #employee_grid2。我认为这应该足以在1页上运行两个javascript代码，但第二个表不会被填充。

我该如何解决这个问题？