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

JSP code

JSP代码

I have been trying to toggle the dropdown menu, but it is not working, I used Datatables js to do the ordering of the list. Because of that Datatables js the toggle is not working. Is there any script to toggle the menu for each row?

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

<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 个解决方案

#1

On your button your have data-toggle="dropwdown" change it to data-toggle="dropdown" and it will work!

在你的按钮上，你的数据切换="dropwdown"改成data-toggle="dropdown"，它会起作用!