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:
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
.
header('Content-Type: application/json'); echo json_encode($employee_json_data);
$stmt = $conn->prepare();
y si te fijas en tu conexión se llama$con
.