每页显示2个表格

Question

I have 2 grid-tables on my page. When I want to load them both, the first grid-table gets loaded, but the second is not. How can I fix this?

Here is the table for my first grid-table:

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

There is the second grid table:

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

As you can see I changed the ID for the second table.

There is the javascript for the first table:

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

Here is the javascript for the second table:

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

As you can see, also the only thing I changed in the second javascript code = #employee_grid2. I think this should be enough to run both javascript codes on 1 page, but the second table dont gets filled.

How can I fix this?