Ordenar filas php y mysql

LoUiMaNiAkO · #1 (**permalink**) 12/01/2015, 17:32

Hola tengo este codigo funcionando pero me gustaria saber como hacerlo con una tabla ya que necesito mostrar mas que solo el nombre

Código PHP:

 
<ul id="lista">

            <?php 

                while ($datos = mysqli_fetch_assoc($resultado)){

        $elementos[$datos['IDProducto_Catalogo']] = $datos['Nombre'];

        echo '<li id="elemento-'.$datos['IDProducto_Catalogo'].'" contenteditable="true">'.$datos['Nombre'].'</li>';

    }

            ?>

        </ul>

Código HTML:

<script>
		$(function(){
			var formulario = $('#formulario'), ordenando = false, lista = $('#lista'),
                    elementos = lista.find('li');
			lista.sortable({
                update: function(event,ui){
                    var ordenPuntos = $(this).sortable('toArray').toString();
                    $.ajax({
                        type: 'POST',
                        url: 'ordenar/controlador.php',
                        dataType: 'json',
                        data: {
                            accion: 'ordenar',
                            puntos: ordenPuntos
                        }
                    });
                }
            });
            lista.sortable('disable');
            $('input[name="editar-ordenar"]').on('change', function(){
                if ($(this).val() == 'ordenar'){
                    lista.sortable('enable');
                    elementos.attr('contenteditable',false);
                    ordenando = true;
                }
                else{
                    lista.sortable('disable');
                    elementos.attr('contenteditable',true);
                    ordenando = false;
                }
            });


			formulario.on('submit',function(evento){ //Cuando el formulario se envía, vamos a insertar
				evento.preventDefault();
				var nombre = $('#campo-nombre').val();
				$('#campo-nombre').val('');
				
				$.ajax({
                    type: 'POST',
                    url: 'ordenar/controlador.php',
                    dataType: 'json',
                    data: {
                        accion: 'insertar',
                        nombre: nombre,
                        orden: elementos.length + 1 // El orden es el número de elementos + 1
                    },
                    success: function (devolver){
                    	if (devolver.valor){
                    		$('<li>',{
                    			id : 'elemento-' + devolver.valor,
                    			'class': ordenando ? 'ordenable' : '',
                    			text: nombre,
                    			'contenteditable' : !ordenando
                    		}).hide().appendTo($('#lista')).fadeIn('slow');
                    	}
                    }
                });
            });
            lista.on('keydown', 'li', function(evento){
                var punto = $(this);
                var idPunto = punto.attr('id').split('-');
                idPunto = idPunto[1];

                switch(evento.keyCode){
                    case 27:{ //Escape
                        document.execCommand('undo');
                        punto.blur();
                        break;
                    }
                    case 46:{ //Suprimir
                        if (confirm('¿Seguro que quiere eliminar este elemento?')){
                            $.ajax({
                                type: 'POST',
                                data: {
                                    accion: 'eliminar',
                                    orden: punto.index(),
                                    id: idPunto
                                },
                                url: 'ordenar/controlador.php',
                                success: function(e){
                                    punto.fadeOut('slow').remove();
                                }
                            });
                        }
                        break;
                    }
                    case 13:{ //Enter
                        evento.preventDefault();
                        var texto = punto.text();
                        punto.blur();
                        $.ajax({
                            type: 'POST',
                            data: {
                                accion: 'editar',
                                id: idPunto,
                                nombre: texto
                            },
                            url: 'ordenar/controlador.php'
                        });
                        break;
                    }
                }
            });
		});
	</script>

LoUiMaNiAkO · #2 (**permalink**) 13/01/2015, 13:40

Alguien me ayuda??

mauritosuarez · #3 (**permalink**) 13/01/2015, 13:48

Hola LoUiMaNiAkO, una vez que ya tengas la variable con datos extraídos de la consulta haces algo como lo siguiente.

Código PHP:

Ver original<table class="bordered" style="padding:3px; color:#000000;">
            <tr style="color:#000000;">
                <th>Foto</th>
                <th>Apellido</th>
                <th>Nombre</th>
            </tr>
            <?php for($i=0; $i<sizeof($reg); $i++) { ?>
            <tr>
                <td>
                    <a href="javascript:popup('DatosEmpleados.php?leg=<?php echo $reg[$i]["Legajo"]; ?>',550,340)">
                        <img title="<?php echo $reg[$i]["Apellido"] ;?> <?php echo $reg[$i]["Nombre"] ;?>" src="images/Fotos/thumbl/<?php echo $reg[$i]["Foto"] ;?>" width="35" height="35" />
                    </a>
                </td>
                <td>
                    <?php echo $reg[$i]["Apellido"] ;?>
                </td>
                <td>
                    <?php echo $reg[$i]["Nombre"] ;?>
                </td>           
            </tr>
            <?php } ?>
            </table>

Espero te sea de utilidad.

Saludos.

LoUiMaNiAkO · #4 (**permalink**) 13/01/2015, 15:43

Hola, perdon lo que necesito hacer es que me permita arrastrar lsa filas y actualize el orden en la base de datos, como lo tengo funciona pero como son <li> no puedo mostrar mas de un dato, alguna otra idea?
(Si lo convierto a tabla me mueve toda la tabla completa)

y si lo hago asi: me mueve las celdas entre las de la misma fila.
<table width="200" border="1" id="lista">
<tr class="lista">
<td>d</td>
<td> </td>
<td> </td>
</tr>
<tr class="lista">
<td>d</td>
<td> </td>
<td> </td>
</tr>
<tr class="lista">
<td>d</td>
<td> </td>
<td> </td>
</tr>
</table>

LoUiMaNiAkO · #5 (**permalink**) 13/01/2015, 16:24

Creo que lo he logrado;
Sigueindo el hilo:
http://www.forosdelweb.com/f18/selec...-lista-908728/

agrege una linea a mi codigo : axis:'y',items:'tr',

y modique los il dentro del codigo jquery, quedando de esta forma:

tabla:

Código PHP:

 
<table width="200" border="1" id="lista">

        

            <?php 

                while ($datos = mysqli_fetch_assoc($resultado)){

        $elementos[$datos['IDElemento']] = $datos['Titulo'];

        echo ' <tr id="elemento-'.$datos['IDElemento'].'"><td contenteditable="true">'.$datos['Titulo'].'</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td> </tr>';

    }

 
            ?>

 

</table>

y el query

Código HTML:

<script>
		$(function(){
			
			var formulario = $('#formulario'), ordenando = false, lista = $('#lista'),
                    elementos = lista.find('tr');
					
			lista.sortable({
				
				axis:'y',items:'tr',
                update: function(event,tr){
                    var ordenPuntos = $(this).sortable('toArray').toString();
                    $.ajax({
                        type: 'POST',
                        url: 'ordenar/controlador.php',
                        dataType: 'json',
                        data: {
                            accion: 'ordenar',
                            puntos: ordenPuntos
                        }
                    });
                }
            });
            lista.sortable('disable');
            $('input[name="editar-ordenar"]').on('change', function(){
                if ($(this).val() == 'ordenar'){
                    lista.sortable('enable');
                    elementos.attr('contenteditable',false);
                    ordenando = true;
                }
                else{
                    lista.sortable('disable');
                    elementos.attr('contenteditable',true);
                    ordenando = false;
                }
            });


			formulario.on('submit',function(evento){ //Cuando el formulario se envía, vamos a insertar
				evento.preventDefault();
				var nombre = $('#campo-nombre').val();
				$('#campo-nombre').val('');
				
				$.ajax({
                    type: 'POST',
                    url: 'ordenar/controlador.php',
                    dataType: 'json',
                    data: {
                        accion: 'insertar',
                        nombre: nombre,
                        orden: elementos.length + 1 // El orden es el número de elementos + 1
                    },
                    success: function (devolver){
                    	if (devolver.valor){
                    		$('tr',{
                    			id : 'elemento-' + devolver.valor,
                    			'class': ordenando ? 'ordenable' : '',
                    			text: nombre,
                    			'contenteditable' : !ordenando
                    		}).hide().appendTo($('#lista')).fadeIn('slow');
                    	}
                    }
                });
            });
            lista.on('keydown', 'tr', function(evento){
                var punto = $(this);
                var idPunto = punto.attr('id').split('-');
                idPunto = idPunto[1];

                switch(evento.keyCode){
                    case 27:{ //Escape
                        document.execCommand('undo');
                        punto.blur();
                        break;
                    }
                    case 46:{ //Suprimir
                        if (confirm('¿Seguro que quiere eliminar este elemento?')){
                            $.ajax({
                                type: 'POST',
                                data: {
                                    accion: 'eliminar',
                                    orden: punto.index(),
                                    id: idPunto
                                },
                                url: 'ordenar/controlador.php',
                                success: function(e){
                                    punto.fadeOut('slow').remove();
                                }
                            });
                        }
                        break;
                    }
                    case 13:{ //Enter
                        evento.preventDefault();
                        var texto = punto.text();
                        punto.blur();
                        $.ajax({
                            type: 'POST',
                            data: {
                                accion: 'editar',
                                id: idPunto,
                                nombre: texto
                            },
                            url: 'ordenar/controlador.php'
                        });
                        break;
                    }
                }
            });
		});
	</script>