如何切换表格中每行的下拉菜单?

时间:2017-04-11 09:44:02

标签: javascript jquery html

  

JSP代码

     

我一直在尝试切换下拉菜单,但它不起作用,我使用Datatables js来执行列表的排序。因为Datatables js切换不起作用。是否有任何脚本可以切换每一行的菜单?

<table width="80%" id="studentdetailslist" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Register Number</th>
            <th>Student Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Sports Played</th>
            <th>Class</th>
            <th>Date added</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    <%
        for (Studentdetails details : studentdetailslist) {
            %>
                <tr>
                    <td><%= details.getRegisterNumber() %></td>
                    <td><%= details.getName() %></td>
                    <td><%= details.getAge() %></td>
                    <td><%= details.getGender() %></td>
                    <td><%= details.getSports() %></td>
                    <td><%= details.getStandard() %></td>
                    <td><fmt:formatDate value="<%= details.getCreateDate() %>" pattern="dd/MMM/yyyy"/></td>
                    <td><div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropwdown">Actions
                                <span class="caret"></span>
                            </button>
                            <ul id="dropdown" class="dropdown-menu">
                                <li><a href="#">Edit</a></li>
                                <li><a href="#">View</a></li>
                                <li><a href="#">Delete</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            <%
        }   
    %>
    </tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
    $('#studentdetailslist').DataTable( {
        columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        }, {
            targets: [ 4 ],
            orderData: [ 4, 0 ]
        } ]
    } );
} );

</script>

1 个答案:

答案 0 :(得分:0)

在你的按钮上你有数据切换=&#34; dropwdown&#34;将其更改为data-toggle =&#34; dropdown&#34;它会起作用!