Buenas noches, hace poco me puse a trabajar en una guia muy buena que consegui en youtube donde las tablas se hacen directamente desde un archivo .js La tabla me funciona a las mil maravillas, busca, edita y elimina pero estoy intentando trabajar con la liberia de tablesorter para ordenar los datos y aunque lo pude hacer dentro de un archivo .php en un js no entiendo como, estoy algo novato en todo esto. Les dejo el codigo para que puedan observar, en pocas palabras el script no corre, no ordena.
<!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('');
});
}