Record show on select on drop down box in simple html table

Question

i want to show the records based on drop-down box if i select 25 than 25 records should be show in table if i salect 50 than 50 record should be show in table and so on.

here is my drop down html code.

</select>
<div class="pull-right">Show
 <select class="drop_box">
  <option label="Select View List">10</option>
<option label="25">25</option>
  <option label="50">50</option>
  <option label="100">100</option>
    <option label="10">All</option>
</select>
records per page</div>

Here is my table html code.Here i show only few records.

<div style="display: none;" id="div1" class="drop-down-show-hide">
          <table id="myTable" class="table table-striped">
            <thead>
              <tr>
                <th>Service Name</th>
                <th>Type</th>
                <th></th>
                <th></th>

              </tr>
            </thead>
            <tbody>
              <tr>
                <td>ADA/FEHA Compliance</td>
                <td>Best Practice</td>
                <td> <img src="img/note.png" alt="note"/></td>
                <td> <img src="img/del.png" alt="edit" /></td>
              </tr>
              <tr>
                <td>Asbestos Training (AHERA ...</td>
                <td>Mandatory</td>
                <td> <img src="img/note.png" alt="note"/></td>
                <td> <img src="img/del.png" alt="edit" /></td>

              </tr>
             </tbody>
          </table>
          </div>

here is my java scripts code

<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>

Thanks!!!

Answer 1

You can enable paging and dynamic page size with the following code

$(document).ready(function() {
    $('#example').dataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

More info can be found here