0

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">&times;</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('');
	});
	
}
	

1 respuesta 1

0

La linea del tablesorter debe ser invocada cuando "myTable" ya exista, seria al final del .done()

}).done(function(resp){
    //alert(resp);
    ...
    ...

    <¡-- LINEA AGREGADA -->
    <¡-- ejecutando tablesorter -->
    $("#myTable").tablesorter();
});
1
  • Como comente estoy algo nuevo en esto, y no veo que tenga relacionado un archivo html dentro del archivo .js al menos para llamar scripts, si puedo ver que desde el html llamo los script que tengo almacenas en el archivo .js Voy a tratar de incluir el codigo html para que se vea más. Adicionalmente tengo dos archivos más php que son de donde almaceno variables y otro donde hago las consultas. Commented el 24 ago. 2017 a las 15:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.