在简单的html表格中的select on下拉框中记录显示

时间:2015-01-13 06:36:02

标签: javascript jquery html

我想基于下拉框显示记录,如果我选择25个记录应该在表格中显示 如果我选择50以上的记录应该在表格中显示等等。

这是我的下拉html代码。

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

这是我的表格html代码。这里我只展示了几条记录。

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

这是我的java脚本代码

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

感谢!!!

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码启用分页和动态页面大小

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

可以找到更多信息here