Good evening, I recently started working on a very good guide that I got on YouTube where the tables are made directly from a .js file The table works like a charm, search, edit and delete but I'm trying to work with the liberia of tablesorter to order the data and although I could do it inside a .php file in a js I do not understand how, I am something new in all this. I leave the code so they can observe, in a few words the script does not run, it does not order.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="max-age=0, no-cache, no-store, private" >
<meta http-equiv="Pragma" content="nocache" >
<meta http-equiv="Expires" content=0>
<meta http-equiv="Last-Modified" content=0>
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="../Resources/css/bootstrap.min.css">
<link href="/login/css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<!--<link rel="stylesheet" type="text/css" href="/logins/css/paginaadministrar.css">-->
<link rel="stylesheet" type="text/css" href="/login/css/nuevabarra.css">
<link rel="stylesheet" type="text/css" href="/login/css/tabla.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/login/css/search.css">
<link rel="stylesheet" href="/login/css/formulariofancy.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/login/css/nuevabarra.css">
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/bootstrap-3.3.7.js"></script>
<style type="text/css">
a:link {
text-decoration:none;
}
</style>
</head>
<body onload="lista_libros('');">
<!--Barra de Navegacion-->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Cambiar Navegacion</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/login/welcome.php" class="navbar-brand">Volver</a>
</div>
</nav>
<div class="container">
<div class="row form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_consultar" data-toggle="tab">Usuarios</a></li>
<li><a href="#tab_registrar" data-toggle="tab">Reservaciones</a></li>
</ul>
</div>
</br>
<div class="container">
<div class="tab-pane active" id="tab_consultar">
<div class="row form-horizontal">
<div align="center" class="panel panel-primary">
<div class="panel-heading">Usuarios Registrados</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-4 text-right">
<label for="buscar" class="control-label">Buscar:</label>
</div>
<div class="col-xs-4">
<input type="text" name="buscar" id="buscar" class="form-control" onkeyup="lista_libros(this.value);" placeholder="Ingrese nombre o usuario"/>
</div>
</div>
<div class="form-group">
<div id="lista"></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modallibros" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<font color = "Black"> <h2 class="modal-title">Datos del Usuario</h2></font>
</div>
<div class="modal-body">
<div class="alert alert-success text-center" id="exito" style="display:none;">
<span class="glyphicon glyphicon-ok"> </span><span> Datos actualizados</span>
</div>
<form class="form-horizontal" id="formLibro">
<div class="form-group">
<font color = "Black"><label for="isbn" class="control-label col-xs-5">Usuario:</label></font>
<div class="col-xs-5">
<input type="hidden" id="idusuario" name="idusuario"/>
<input id="usuariocapta" name="usuariocapta" type="text" class="form-control" placeholder="Ingrese ISBN">
</div>
</div>
<div class="form-group">
<font color = "Black"><label for="nombrecapta" class="control-label col-xs-5">Nombre :</label></font>
<div class="col-xs-5">
<input id="nombrecapta" name="nombrecapta" type="text" class="form-control" placeholder="Ingrese Titulo">
</div>
</div>
<div class="form-group">
<font color = "Black"><label for="apellidocapta" class="control-label col-xs-5">Apellido :</label></font>
<div class="col-xs-5">
<input id="apellidocapta" name="apellidocapta" type="text" class="form-control" placeholder="Ingrese Autor">
</div>
</div>
<div class="form-group">
<font color = "Black"> <label for="telefonocapta" class="control-label col-xs-5">Telefono:</label></font>
<div class="col-xs-5">
<input id="telefonocapta" name="telefonocapta" type="text" class="form-control" placeholder="Ingrese Año de Publicacion">
</div>
</div>
<div class="form-group">
<font color = "Black"><label for="correocapta" class="control-label col-xs-5">Correo:</label></font>
<div class="col-xs-5">
<input id="correocapta" name="correocapta" type="text" class="form-control" placeholder="Ingrese su Email">
</div>
</div>
<div class="form-group">
<font color = "Black"><label for="tipocapta" class="control-label col-xs-5">Tipo de Usuario:</label></font>
<div class="col-xs-5">
<input id="tipocapta" name="tipocapta" type="text" class="form-control" placeholder="Ingrese Ediccion">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" onclick="guardar();">Guardar</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- tab content -->
</div>
<script src="../Resources/js/jquery-1.11.2.js"></script>
<script src="../Resources/js/bootstrap.min.js"></script>
<script src="../Resources/js/libros.js"></script>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/libs/jquery.tablesorter.combined.js"></script>
</body>
</html>
//desde aqui comienzo con ordenar tabla
Aqui invento como incluir las librerias de jquery obviamente no funciona
$.getScript("js/libs/jquery-1.6.1.min.js", function(){
alert("Archivo cargado!");
});
$.getScript("js/libs/jquery.tablesorter.js", function(){
alert("Archivo cargado!");
});
$.getScript("js/libs/jquery.tablesorter.combined.js", function(){
alert("Archivo cargado!");
});
//corro los script e igualmente no funcionan
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
//hasta aqui trabajo con table sorter en adelntante trabajo con la tabla, he incluido el thead y el tbody, el nombre de la id=myTable y tampoco funciona
function lista_libros(valor){
$.ajax({
url:'../Controllers/libros.php',
type:'POST',
data:'valor='+valor+'&boton=buscar'
}).done(function(resp){
//alert(resp);
var valores = eval(resp);
html="<table id='myTable' class='table table-bordered'><thead><tr><th>#</th><th>Usuario</th><th>Nombre</th><th>Apellido</th><th>Telefono</th><th>Correo</th><th>Tipo de Usuario</th><th>Ultimo ingreso</th><th>Opciones</th></tr></thead><tbody>";
for(i=0;i<valores.length;i++){
datos=valores[i][0]+"*"+valores[i][1]+"*"+valores[i][2]+"*"+valores[i][3]+"*"+valores[i][4]+"*"+valores[i][5]+"*"+valores[i][6]+"*"+valores[i][7];
html+="<tr><td>"+(i+1)+"</td><td>"+valores[i][1]+"</td><td>"+valores[i][2]+"</td><td>"+valores[i][3]+"</td><td>"+valores[i][4]+"</td><td>"+valores[i][5]+"</td><td>"+valores[i][6]+"</td><td>"+valores[i][7]+"</td><td><button class='btn btn-success' data-toggle='modal' data-target='#modallibros' onclick='mostrar("+'"'+datos+'"'+");'><span class='glyphicon glyphicon-pencil'></span></button><button class='btn btn-danger' onclick='eliminar("+'"'+valores[i][0]+'"'+")'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
}
html+="</tbody></table>"
$("#lista").html(html);
});
}
function guardar(){
var datosform=$("#formLibro").serialize();
$.ajax({
url:'../Controllers/libros.php',
type:'POST',
data:datosform+"&boton=actualizar"
}).done(function(resp){
if(resp==='exito'){
$('#exito').show();
lista_libros('');
}
else{
alert(resp);
}
});
}
function mostrar(datos){
//alert(datos);
var d=datos.split("*");
//alert(d.length);
$("#idusuario").val(d[0]);
$("#usuariocapta").val(d[1]);
$("#nombrecapta").val(d[2]);
$("#apellidocapta").val(d[3]);
$("#telefonocapta").val(d[4]);
$("#correocapta").val(d[5]);
$("#tipocapta").val(d[6]);
}
function eliminar(id){
//alert(id);
$.ajax({
url:'../Controllers/libros.php',
type:'POST',
data:'idusuario='+id+'&boton=eliminar'
}).done(function(resp){
alert(resp);
lista_libros('');
});
}