9

Me encontré un tutorial en la web sobre buscar, listar, paginar y la opción de mostrar 10 filas o 25, 50 o todas, en el tutorial listaban datos de un trabajador, su id, nombre, salario y el número de agencia.

De la siguiente forma se listaba los datos:

introducir la descripción de la imagen aquí

Está es la estructura HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
<title>Lista de noticias</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>  
  <script src="ajax.js"></script>  
</head>
<body class="">
<div role="navigation" class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">My Site</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container" style="min-height:500px;">
    <div class=''></div>
<div class="container"> 
    <h2>Listado de Noticias</h2>    
    <br>
    <br>    
    <table id="news" data-toggle="bootgrid" class="table table-condensed table-hover table-striped" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th data-column-id="id_news" data-type="numeric">Id</th>
                <th data-column-id="title">Titulo</th>
                <th data-column-id="description">Descripción</th>
                <th data-column-id="url">URL</th>
            </tr>
        </thead>
    </table>    
<div class="insert-post-ads1" style="margin-top:20px;">

</div>
</div>
</body>
</html>

Me agrada el sistema, es simple, no se tiene que agregar tanto extenso código javascript para agregar características avanzadas... El único trabajo es crear un archivo PHP JSON acorde al sistema.

Volviendo al tema de javascript, lo únicas configuraciones que se debe implementar es un simple código Ajax.

 <script>
    $(function() {
        $("#news").bootgrid({
            ajax: true,
            url: "miarchivo.php"
        });
    });
 </script> 

Un gran dolor de cabeza, es el código PHP, es muy confuso, difícil para mí explicar a los demás sobre todo entenderlo.

Este es el código PHP actual del tutorial.

<?php
    //include connection file 
    include_once("connection.php");

    // initilize all variable
    $params =  $totalRecords = $data = array();

    $sqlTot = $sqlRec = $where = "";


    $params = $_REQUEST;
    $limit = $params["rowCount"];

    if (isset($params["current"])) { $page  = $params["current"]; } else { $page=1; };  
    $start_from = ($page-1) * $limit;
    // check search value exist
    if( !empty($params['searchPhrase']) ) {   
        $where .=" WHERE ";
        $where .=" ( employee_name LIKE '".$params['searchPhrase']."%' ";    
        $where .=" OR employee_salary LIKE '".$params['searchPhrase']."%' ";

        $where .=" OR employee_age LIKE '".$params['searchPhrase']."%' )";
    }
    if( !empty($params['sort']) ) {  
        $where .=" ORDER By ".key($params['sort']) .' '.current($params['sort'])." ";
    }
    // getting total number records without any search
    $sql = "SELECT * FROM `employee` ";
    $sqlTot .= $sql;
    $sqlRec .= $sql;


    //concatenate search sql if value exist
    if(isset($where) && $where != '') {

        $sqlTot .= $where;
        $sqlRec .= $where;
    }
    if ($limit!=-1)
    $sqlRec .= "LIMIT $start_from, $limit";

    $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));


    $totalRecords = mysqli_num_rows($queryTot);

    $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");

    //iterate on results row and create new index array of data
    while( $row = mysqli_fetch_assoc($queryRecords) ) { 
        $data[] = $row;
        //echo "<pre>";print_R($data);die;
    }   

    $json_data = array(
            "current"            => intval( $params['current'] ), 
            "rowCount"            => 10,            
            "total"    => intval( $totalRecords ),
            "rows"            => $data   // total data array
            );

    echo json_encode($json_data);  // send data as json format
?>

Este es otro ejemplo https://ideone.com/eOQl7f encontrado en el mismo tutorial, al cual me base en probar con mis registros de noticias

id_news    url     title    description
  1       ....    un titulo ........

cambiando los datos de la consulta correctamente

$sql_query = "SELECT id_news as emp_id, url as emp_name, title as emp_salary, description as emp_age FROM `news` ";

Pero no me lista ningún dato.


Actualización

Siguiendo los ejemplos dados Dev. Joel sigo teniendo problemas que no refleja resultados, es decir no lista nada.

Siguiendo cada paso de la respuesta, existen configuraciones adicionales que agregar, como instalar mysqlnd o a la vez usar una alternativa, mediante una function que cumple con las misma funciones, aunque existe otra forma, otra alternativa usando el bind_result tradicionalmente.

Aparte de no entender, tan específicamente el código, seguro me traerá problemas a futuro, al tratar de añadir ciertas condiciones extras a la consulta mediante WHERE .... AND ... AND

Mi propuesta es la siguiente, quizás sea mas extenso o quizás no, pero la lectura es fácil y amigable para mi visión...

miarchivo.php

<?php
    $ServerName = "localhost";
    $Username = "";
    $PassWord = "";
    $DataBase = "";

    $con = new mysqli($ServerName, $Username, $PassWord, $DataBase);

    if ($con->connect_error) {
        exit("Error de conexión: " . $con->connect_error);
    }
    if (!$con->set_charset("utf8")) {
        printf("Error cargando el conjunto de caracteres utf8: %s\n", $con->error);
        exit();
    }
    /********************************/

    //Buscador de datos de los registros
    $search = $_POST['searchPhrase']; //"%{$_POST['searchPhrase']}%";
    $stmt = $con->prepare("SELECT id_news,title,url FROM news WHERE title LIKE CONCAT('%',?,'%')");
    $stmt->bind_param("s", $search);
    $stmt->execute();
    $stmt->bind_result($id_news,$title);
    /*
    while ($stmt->fetch()) {
        echo "Id: {$id_news}, title: {$title}";
    }
    */

    //Total de los registros registrados
    $active = 1;
    $stmtA=$con->prepare("SELECT COUNT(*) FROM news WHERE active=?");
    $stmtA->bind_param("i",$active);
    $stmtA->execute();
    $totalRecords = null;
    $stmtA->bind_result($totalRecords);
    $stmtA->fetch();
    $stmtA->close();

    //Mostrar datos registrados
    $stmtB = $con->prepare("SELECT id_news,title,url FROM news WHERE active = ?");
    $stmtB->bind_param("i", $active);
    $stmtB->execute();
    $rows = array();
    $stmtB->bind_result(
    $rows['id_news'],
    $rows['title'],
    $rows['url']);
    while ($stmtB->fetch()) {
        $data = $rows;
    }

    $json_data = array(
        "current"   => intval($params['current']),
        "rowCount"  => 10,          
        "total"     => intval($totalRecords),
        "rows"      => $data
    );
    echo json_encode($json_data);
?>

Siguiendo mi propio trabajo, este me imprime el siguiente resultado

{"current":0,"rowCount":10,"total":85,"rows":{"id_news":103,"title":"Mi primera prueba de insertar noticia mediante Ajax","url":"mi-primera-prueba-de-insertar-noticia-mediante-ajax"}}

Los resultados son favorables pero no es acorde para el sistema bootgrid, a pesar de tener satisfactoriamente los resultados, no me los imprime en el diseño de listar, y es porque falta adaptarlo y ahí es mi mayor problema.

Tener que agregar las configuraciones de la paginación, el buscador, la limitación de filas y adaptarlo a las funciones de bootgrid y todo esto se debe configurar en el archivo PHP, en miarchivo.php.

Nota: Los códigos PHP del tuturial funcionan si listan los registros en el diseño bootgrid.

6
  • Ya intentaste primero poner el encabezado de retorno? header('Content-Type: application/json'); echo json_encode($employee_json_data); el 26 sep. 2018 a las 18:18
  • @AlbertoSiurob Sí amigo ya lo probé pero no funciona igual
    – Jacks
    el 26 sep. 2018 a las 22:40
  • El código de mi respuesta es 100% funcional y explicado en sus líneas detalladamente, la cantidad de lineas puede ser al formato que desea la librería para su funcionamiento, si mejora dicho código es un buen avance y aprendizaje para usted. (ahora veo un campo active que no se añadió en principio a su pregunta)
    – Dev. Joel
    el 30 sep. 2018 a las 5:12
  • @Dev.Joel No me muestra resultado amigo, el active es opcional lo único que hace es envitar mostrar alguna noticia que no esté activa pero eso no implica complicaciones en lo absoluto:)
    – Jacks
    el 30 sep. 2018 a las 5:33
  • En tu Actualización la sentencia preparada de tu buscador no va a funcionar nunca, tienes un pequeño error ortográfico, has puesto $stmt = $conn->prepare(); y si te fijas en tu conexión se llama $con.
    – D.Bulten
    el 30 sep. 2018 a las 17:00

1 respuesta 1

4
+50

Añadiré un ejemplo base para obtener los datos que requiere para funcionar correctamente bootgrid, si revisamos los ejemplos espera un json con los siguientes datos.

{
  "current": 1,
  "rowCount": 10,
  "rows": [],
  "total": 1123 
}

Estos datos se construirían desde PHP , concatenando la consulta antes de prepararla. el código está explicado

HTML note el nombre de las columnas que sean de acuerdo a su tabla.

 <table id="news" data-toggle="bootgrid" class="table table-condensed table-hover table-striped" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th data-column-id="id_news" data-type="numeric">Id</th>
            <th data-column-id="title">Titulo</th>
            <th data-column-id="description">Descripción</th>
            <th data-column-id="url">URL</th>
        </tr>
    </thead>
</table> 

PHP (Código por mejorar ;) de acuerdo a lo que necesite para su aplicación)

$conn = new mysqli("host", "user", "password", "bd");

//obtenemos la cantidad de elementos de la tabla 
$query = "SELECT count(1) FROM news" ;
if ($result = $conn->query("$query")) {
    /* determinar el número de filas del resultado */
    $fila = $result->fetch_array();
    $totalFilasTable = $fila[0];
    $result->close();
}

$query = "SELECT * FROM news " ;
$isWhere = $isLimit= false; // banderas para saber que filtrado se realizo
$parametro = $_POST['searchPhrase'];// input de busqueda
$limit = $_POST["rowCount"]; //cantidad de filas

if (isset($_POST["current"])) { 
    $page = $_POST["current"]; //página actual
} else { 
    $page = 1; // caso contrario mostramos la primera
}  
$start = ($page-1) * $limit; // inicio de registro por página

// Si hay valores en  el input de búsqueda 
// añadimos las condiciones y la bandera para saber que
// variables debemos bindear
if(!empty($_POST['searchPhrase'])) {   
    $query .= " where id_news like ? or url like ? 
                    or title like ?  or description like ? " ;
    $isWhere = true;
}

// Si se selecciono el sort de las cabecera de las columnas
// obtenemos el nombre de la columna con key($_POST['sort'])
// y el tipo asc/desc  con current($_POST['sort']) 
if( !empty($_POST['sort']) ) {  
    $query .=" ORDER BY ". key($_POST['sort']). " ". current($_POST['sort']) ;
}
// si es diferente a 1 el limite es decir
// se selecciono la opción todos de la tabla
if ($limit!=-1) {
    $query .= " LIMIT ? , ?";
    $isLimit = true;
}

//construimos el parámetro para el like
$paramLike = "%{$parametro}%";

if ($sentencia = $conn->prepare($query)) {
    /* ligar parámetros para marcadores */
    if($isWhere && $isLimit){
        $sentencia->bind_param("ssssii", $paramLike,$paramLike,$paramLike,$paramLike,$start,$limit);
    }
    else if($isWhere && !$isLimit){
        $sentencia->bind_param("ssss", $paramLike,$paramLike,$paramLike,$paramLike);
    }
    else if(!$isWhere && $isLimit){
        $sentencia->bind_param("ii", $start,$limit);
    }
    /* ejecutar la consulta */
    $sentencia->execute();
    // obtenemos los resultados
    $resultado = $sentencia->get_result();
    $newRecords = [];

    while ($fila = $resultado->fetch_array(MYSQLI_ASSOC))
    {
        //añadimos las filas a nuestro array final
        $newRecords[] = $fila;
    }
    //esta es la estructura básica que espera la libreria bootgrid
    $dataResponse = array(
        "current"   => intval($_POST["current"]), 
        'rowCount'  => $limit,
        "total"     => $totalFilasTable,
        "rows"      => $newRecords 
    );
    // retornamos los valores en JSON
    echo json_encode($dataResponse);
}

Si no tiene instalado el driver mysqlnd , puedes utilizar una función para obtener los datos Referencia

function get_result( $Statement ) {
    $RESULT = array();
    $Statement->store_result();
    for ( $i = 0; $i < $Statement->num_rows; $i++ ) {
        $Metadata = $Statement->result_metadata();
        $PARAMS = array();
        while ( $Field = $Metadata->fetch_field() ) {
            $PARAMS[] = &$RESULT[ $i ][ $Field->name ];
        }
        call_user_func_array( array( $Statement, 'bind_result' ), $PARAMS );
        $Statement->fetch();
    }
    return $RESULT;
}

Entonces la parte que cambiaría del código completo anterior , sería reemplazar esto

    $resultado = $sentencia->get_result();
    $newRecords = [];

    while ($fila = $resultado->fetch_array(MYSQLI_ASSOC))
    {
        //añadimos las filas a nuestro array final
        $newRecords[] = $fila;
    }

por esto

    $resultado = get_result($sentencia);
    $newRecords = [];

    while ($fila = array_shift($resultado))
    {
        //añadimos las filas a nuestro array final
        $newRecords[] = $fila;
    }

JS Iniciar bootgrid

 <script>
    $(function() {
        $("#news").bootgrid({
            ajax: true,
            url: "miarchivo.php"
        });
    });
 </script>

Como modificó su pregunta, Sí. es una alternativa utilizar bind_result pero con variables y añadir el objeto como clave valor al array de respuesta.

Un error en su código es que $data = $rows; al final del ciclo, $data solo tendrá el último registro.

La parte final del código quedaría.

 /* ejecutar la consulta */
$sentencia->execute();
$newRecords = [];
$idnews = $title = $description = $url = "" ;
$sentencia->bind_result($idnews,$url,$title,$description);
while ($sentencia->fetch()) {
    $newRecords[] = ['id_news'=> $idnews, 'url'=>$url, 'title'=> $title,'description'=>$description];
}
//esta es la estructura básica que espera la libreria bootgrid
$dataResponse = array(
    "current"   => intval($_POST["current"]), 
    'rowCount'  => $limit,
    "total"     => $totalFilasTable,
    "rows"      => $newRecords 
);

Si no entiende el código, comente que no entiende así se le explicará. la "complejidad" es por los parámetros que espera la libreria.

7
  • Hola @Dev.Joel Gracias por responder, siguiendo los ejemplos sigue sin mostrarme nada de resultados amigo, difícilmente trabajando de localhost cuando no te imprime errores, pero por suerte los hosting si registra errores mediante su error_log y ha registrado el siguiente error PHP Fatal error: Call to undefined method mysqli_stmt::get_result() in /home1/one/public_html/bootgrid/miarchivo.php on line 64 la linea 64 corresponde a la siguiente linea de código $resultado = $sentencia->get_result();
    – Jacks
    el 27 sep. 2018 a las 22:25
  • @Jacks se me olvidó añadir que hace falta la instalación del driver mysqlnd para que funcione. Igual añadí una alternativa para cuando no tiene el driver instalado. además recuerde agregar los links y scripts de la librería en el head de su archivo. (a veces presenta problemas si se añaden al final)
    – Dev. Joel
    el 27 sep. 2018 a las 22:39
  • no existe alguna otra forma sin tener que añadir complementos de mysql para que funcione, ya había visto antes este problema sobre estos driver, se puede usar la alternativa de inidesing en su respuesta
    – Jacks
    el 27 sep. 2018 a las 22:44
  • @Jacks actualicé mi respuesta con una función como alternativa para este detalle. revise detalladamente mi respuesta.
    – Dev. Joel
    el 27 sep. 2018 a las 22:46
  • Tengo que agregar la function para que funcione? porque me muestra un error en la linea $resultado = get_result($sentencia);
    – Jacks
    el 27 sep. 2018 a las 22:51

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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