DataTable Pagination is not working on my table

Issue

This Content is from Stack Overflow. Question asked by Shazia Tasneem

I Want to apply Datatable pagination on my table but it is not working. it takes space at the bottom of the table but nothing prints. added required script and css file but still getting nothing.
i am providing dummy table here.

       $(document).ready(function () {
        $('.table').DataTable({
            "order": [[ 0, "desc" ]],
            "language": {
                "lengthMenu": "Page Size _MENU_ ",
                "zeroRecords": "No records found to display",
                "info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            }
        });

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<script src="cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<table id="example" class="table table-striped table-bordered table-hover table-responsive display" width="100%" cellspacing="0">
<thead>
  <tr>
    <th>Animal</th>
    <th class="vertalign">Select 3 <input type="checkbox" class="checkbox-inline" name="selectAllChkBox" id="selectAllChkBox">     
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Cat</td>
    <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="cat"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Dog</td>
    <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="dog"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Cow</td>
    <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="cow"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Mouse</td>
    <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="mouse"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Goat</td>
    <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="goat"  name="chkBox"></td>
  </tr>
    
  </tbody>
</table>



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?