0

Mi problema es el siguiente, tengo una página que contiene un botón, al hacer clic en este se construye una tabla que lee datos de una base de datos. Lo que debe hacer es agregar la paginación y la búsqueda, pero no lo hace, solo construye la tabla.

Hago la aclaración que hice este ejemplo de esta manera porque necesito construir la tabla con base a diferentes filtros.

Este es mi index.php

<!DOCTYPE html>
<html>
    <title>Datatable</title>
    <head>

        <!-- Bootstrap and Jquery-->        
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>

        <!-- Icons -->
        <link rel="stylesheet" href="font/css/open-iconic-bootstrap.min.css">

        <!-- Datatables-->
        <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
        <link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />

        <script type="text/javascript" language="javascript" src="js/script.js"></script>

    </head>

    <body>
        <div class="container">
            <h3 align="center">DataTable Example</h3>       
            <button type="button" onclick="show_table()"> Create </button>      
            <div id="mydiv">

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

La siguiente función se ejecuta en javascript cuando se hace clic en el botón (script.js)

function show_table() {

    var url = 'table.php';
    var method = 'POST';

    ajax (url, method, 'mydiv');
}


function ajax (url, method, container_id) {
    try {
        xhr = new XMLHttpRequest();
    } catch(e) {
        try{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e1) {
            alert("Not supported!");
        }
    }

    xhr.onreadystatechange = function() {
                               if(xhr.readyState == 4) {
                                   document.getElementById(container_id).innerHTML = xhr.responseText;
                               } 
                            }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send();
}

Aquí está el PHP que construye la tabla (table.php)

<?php

$connect = mysqli_connect("localhost", "root", "", "test");
$query = "select * from employee order by id desc";
$result = mysqli_query($connect, $query);

?>

<table id="employee-data" class="table table-striped">
                    <thead>
                        <tr>
                            <td>Employee name</td>
                            <td>Salary</td>
                            <td>Age</td>
                            <td>View</td>
                            <td>Edit</td>
                            <td>Delete</td>
                        </tr>
                    </thead>

<?php

while ($row = mysqli_fetch_array($result))
{
echo '
<tr>
    <td>'.$row["employee_name"].'</td>
    <td>'.$row["employee_salary"].'</td>
    <td>'.$row["employee_age"].'</td>
    <td><button type="button" class="btn btn-outline-primary"><span class="oi oi-account-login"></span></button></td>
    <td><button type="button" class="btn btn-outline-primary"><span class="oi oi-pencil"></span></button></td>
    <td><button type="button" class="btn btn-outline-primary"><span class="oi oi-trash"></span></button></td>
</tr>

';
}

?>

</table>

<script>
$(document).ready(function() {
    $('#employee-data').DataTable();
} );
</script>

Espero que puedan ayudarme con este problema, agradezco cualquier aporte.

2
  • pero la tabla te muestra los datos o no? , porque ahí veo que solo estas formando una tabla con un select normal. Commented el 10 abr. 2018 a las 18:54
  • Si la tabla me muestra los datos, si ves al final del archivo table.php se encuentra el script que activa la paginación Commented el 10 abr. 2018 a las 18:57

1 respuesta 1

2

Tu problema es que tratas de inicializar la dataTable al iniciar la pagina, pero debes hacerlo despues de presionar el boton asi:

function show_table() {

var url = 'table.php';
var method = 'POST';
var callback = function() {
    $('#employee-data').DataTable();
};

ajax (url, method, 'mydiv', callback);
}


function ajax (url, method, container_id, callback) {
try {
    xhr = new XMLHttpRequest();
} catch(e) {
    try{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e1) {
        alert("Not supported!");
    }
}

xhr.onreadystatechange = function() {
                           if(xhr.readyState == 4) {
                               document.getElementById(container_id).innerHTML = xhr.responseText;
                               callback();
                           } 
                        }
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send();
}
1
  • Gracias por tu aporte @alanfcm, con eso me funciono perfecto. Commented el 10 abr. 2018 a las 19:13

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.