DataTable: works for one page, but not the other?

Teddon

EDIT: Problem resolved and was unrelated to the title. In the datatable that wasn't working, I had neglected to add a "thead" field to my first column. Apologies.

~~I have a webpage that shows two datatables, but only works with one.

In my links section, I have the following references to datatables:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

Now in my view page, I have the scripts for these two tables:

        <script> <!--This doesn't work -->
          $(document).ready(function () {
            $('#courseTable').DataTable( {
              "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
            });
            $('.dataTables_length').addClass('bs-select');
          });
        </script>

        <script> <!-- This works-->
          $(document).ready(function () {
            $('#userTable').DataTable( {
              "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
            });
            $('.dataTables_length').addClass('bs-select');
          });
        </script>

The "userTable" table is read, but the "courseTable" isn't. Here are the references in their tables:

    <div class="form-group"> <!-- This works-->
        <table id="userTable" data-page-length='5' cellspacing="0"
        class="table table-bordered table-striped table-hover table-condensed"
        role="grid">
        ..
        </table>
    </div>


    <div class="form-group"> <!--This doesn't work -->
        <table id="courseTable" data-page-length='5' cellspacing="0"
        class="table table-bordered table-striped table-hover table-condensed"
        role="grid">
        ...
        </table>
    </div>

The "userTable" works fine and gets all the lovely DataTable functionality. However, the courseTable doesn't. Not one bit. No clickable columns, no pagination, nothing. Even if I remove the userTable code references from my page, courseTable still doesn't work.

It may be worth noting that I've used the "courseTable" code on other pages for other tables (where there is only one DataTable) and it works fine there.

Does anyone know how to solve this issue? Any help would be greatly appreciated~~

kthorngren

Its hard to say without actually seeing the problem. I took your code snippets and built a test case for you that works:
http://live.datatables.net/qihonewo/1/edit

Copied and pasted your code but added the HTML for the two tables. Your links snippet above doesn't seem to show all that you have plus you didn't show the JS includes you have. Looks like you are using Bootstrap so I generated a Bootstrap3 set fo files using the Download Builder.

Look for errors in your browser's console. If you are still unable to make it work then please post a link to your page or update my test case to replicate the issue.

Kevin