How can I use bootstrap dropdown-menu in a data table?
How can I use bootstrap dropdown-menu in a data table?
pchampon
Posts: 2Questions: 1Answers: 0
I created a table, using data tables, and I've added a dropdown-menu to it. When the page loads, my nav dropdowns are
collapsed, but the menu in the data table is expanded. When I execute $('.dropdown-toggle').collapse() I see my
drowndown-toggle and then it disappears. The menu remains expanded. Subsequent calls to collapse do nothing.
I'm using bootstrap 3.2.0, data tables 1.10.0, and datatables bootstrap be7019ee387.
<html lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>bfc</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/application_configurations.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/tables.css?body=1" media="all" rel="stylesheet">
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet">
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param">
<meta content="gIeUM6K/3vUREpRKT37sVlH95xKBzUvWdeS5HzUuNFM=" name="csrf-token">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
<![endif]-->
</head>
<body role="document">
<script>
$(document).ready(function() {
$('.data-table').dataTable();
});
</script>
<div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu134" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">
<img alt="settings for Philip Champon" height="25" src="/assets/settings.png" width="25">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu134">
<li>
<a href="/members/134" role="menuitem" tabindex="-1">Show</a>
</li>
<li>
<a href="/members/134/edit" role="menuitem" tabindex="-1">Edit</a>
</li>
<li>
<a data-confirm="Are you sure?" data-method="delete" href="/members/134" rel="nofollow" role="menuitem" tabindex="-1">Destroy</a>
</li>
</ul>
</div>
This discussion has been closed.
Answers
BTW, my debug link is http://debug.datatables.net/oxunoj