I am currently using the boostrap datatables together with a dropdown to download that is also boostrap.
If I do not add datatbles my menu works correctly, but if I add the entire structure of my datatable it stops working.
Linkeos that I add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
Table code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td
{
font-family:Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<br />
<div class="container">
<table id="example"></table>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#example').dataTable( {
"aaData": [
["PHP Data Object | PDO","http://www.codingcage.com/search/label/PDO"],
["Object Oriented PHP","http://www.codingcage.com/search/label/PHP OOP"],
["jQuery Tutorials","http://www.codingcage.com/search/label/jQuery"],
["Ajax Tutorials","http://www.codingcage.com/search/label/Ajax"],
["CRUD Tutorials","http://www.codingcage.com/search/label/CRUD"],
["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"],
["Pagination Tutorials","http://www.codingcage.com/search/label/Pagination"],
["PHP MySQLi Tutorials","http://www.codingcage.com/search/label/MySQLi"],
["HTML5 Tutorials","http://www.codingcage.com/search/label/HTML5"]
],
"columns": [
{ "title": "Article Title" },
{ "title": "Tutorial Link" }
]
} );
});
</script>
<script type="text/javascript">
$('#example')
.addClass('table table-striped table-bordered');
</script>
</body>
</html>
Dropdown code:
<nav id="contenedorEncabezado" class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SoftTicket</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="buscador" type="text" class="form-control" placeholder="¿Qué estás buscando?">
</div>
<button id="botonBuscar" type="submit" class="btn btn-default">Buscar</button>
</form>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Opciones <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Cambiar idioma (inglés)</a></li>
<li><a href="#">Ayuda</a></li>
<li><a href="#animatedModal02" id="imagen_promotor" onclick="indexonP();">Se un promotor</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Iniciar sesión</b> <span class="caret"></span></a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<?php
//llamar funcion estatica de la clase auth
Auth::getUserAuth();?>
<div class="col-md-12">
Inicia sesión con:
<div class="social-buttons">
<a href="?login=Facebook" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<a href="?login=Google" class="btn btn-tw"><i class="fa fa-google-plus"></i> Google</a>
</div>
Ingresa tus datos:
<form action="login/validar.php" method="post" class="form" role="form" accept-charset="UTF-8" id="login-nav" enctype="application/x-www-form-urlencoded">
<div for="caja1" class="form-group">
<label for="caja1" class="sr-only">Usuario</label>
<input type="text" id="caja1" name="usuario" class="form-control" placeholder="Usuario" required>
</div>
<div for="caja2" class="form-group">
<label for="caja2" class="sr-only">Contraseña</label>
<input type="password" id="caja2" name="password" class="form-control" placeholder="Contraseña" required>
<div class="help-block text-right"><a href="">¿Olvidaste tu contraseña?</a></div>
</div>
<div class="form-group">
<input type="submit" name="prueba" class="btn btn-primary btn-block">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Mantente conectado
</label>
</div>
</form>
</div>
<div class="bottom text-center">
¿Eres nuevo aquí? <a href="#animatedModal06" id="registro" onclick="indexonPro();"><b>Únete con nosotros</b></a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>