最受欢迎

我如何刷新我的数据表没有刷新整个页面

How can I refresh my DataTables without refreshing fullpage?

本文关键字：刷新 数据表 我的 何刷新 | 更新日期: 2023-09-27

我使用PHP, MySQL, DataTables和modal Bootstrap 3来编写AJAX表单，我已经实现了从MySQL数据库加载数据，但我无法看到新的数据而不刷新整个页面。这是我的代码:

color.php 

<?php
    session_start(); 
    require_once '../../class/query_color.php';
    $objColor = new Color;
?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="icon" type="image/png" href="../ico/icono.ico">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Administración de colores</title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="../css/dataTables.bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../css/dataTables.colVis.css">
        <link rel="stylesheet" type="text/css" href="../css/bootstrap-select.min.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="../js/dataTables.bootstrap.js"></script>
        <script type="text/javascript" src="../js/dataTablesLanguage.js"></script>
        <script type="text/javascript" src="../js/dataTables.colVis.js"></script>
        <script type="text/javascript" src="../js/bootstrap-select.min.js"></script>
        <script type="text/javascript" src="../js/dataTables.fnReloadAjax.js"></script>
    </head>
    <body>
        <div class="container" id="container">
        <?php
            $consulta = $objColor->select_color();
            include('modal_add_color.php');
        ?>
            <button type='button' href='#agregarColor' class="btn btn-success" data-toggle='modal' data-backdrop='static'>Nuevo</button>
            <br/>
            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" id="colores">
                <thead>
                    <tr>
                        <th>Color</th>
                    </tr>
                </thead>
                <tbody>
<?php                       
                    while($fila = mysql_fetch_array($consulta)){
                        $id = $fila['idColor'];                     
                        echo "<tr>";
                            echo "<td>";
                            include('modal_edit_color.php');
                                echo "<button type='button' href='#editarColor".$id."' id='".$id."' class='btn btn-default btn-xs' data-toggle='modal' data-backdrop='static'>".$fila['nomColor']."</button>";
                            echo "</td>";
                        echo "</tr>";
                    }
?>                                      
                </tbody>
            </table>
        </div>
        <br/><br/>
        <script>
            $('.modal').on('shown.bs.modal', function() {
              $(this).find('input:eq(1)').focus();
            });
        </script>
    </body>
    </html>

modal_add_color.php 

 <?php
    if(isset($_POST['submit'])){
        require_once '../../class/query_color.php';
        $nomColor = $_POST['nomColor'];
        $objColor = new Color;
        $objColor->alta_color($nomColor);
    }else{
?>
        <!DOCTYPE HTML>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
            <script type="text/javascript" src="../../class/ajaxColor.js"></script>
        </head>
        <body>
            <div id="agregarColor" class="modal fade" role="dialog" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h2 class="modal-title">Agregar color</h2>
                        </div>
                        <form id="formularioAltaColor" name="formularioAltaColor" method='post' action="modal_add_color.php" onsubmit="altaColor(); return false">
                        <input type="hidden" name="submit" value="">
                        <div class="modal-body">
                            <table class="modal-table">
                                <tr>
                                    <td><label>Color</label></td>
                                    <td><input type='text' name='nomColor' class="form-control focusedInput" onfocus="this.value = this.value;" maxlength="30" required></td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                            <button type="submit" name="submit" id="submit" class="btn btn-primary" value="submit">Guardar cambios</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </body>
    </html>
<?php
    }
?>

ajaxColor.php 

function altaColor(){
var dataString = $('#formularioAltaColor').serialize();
var table = $('#colores').DataTable();
$.ajax({
    url: 'modal_add_color.php',
    type: "POST",
    data: dataString,
    success: function(datos){  
        $('#agregarColor').modal('hide');  
        /*What can I code here to refresh my dataTable without refresh fullpage?*/ 
    }
})
return false;

}

dataTablesLanguage.js 

$(document).ready(function(){
$('#colores').DataTable({
    "language": {
        "sProcessing":    "Procesando...",
        "sLengthMenu":    "Mostrar _MENU_ registros",
        "sZeroRecords":   "No se encontraron resultados",
        "sEmptyTable":    "Ningún dato disponible en esta tabla",
        "sInfo":          "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "sInfoEmpty":     "Mostrando registros del 0 al 0 de un total de 0 registros",
        "sInfoFiltered":  "(filtrado de un total de _MAX_ registros)",
        "sInfoPostFix":   "",
        "sSearch":        "Buscar:",
        "sUrl":           "",
        "sInfoThousands": ",",
        "sLoadingRecords":"Cargando...",
            "paginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"

        },
            "aria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        //"responsive": true,           
        "iDisplayLength": 50
    });
});

query_color.php 

<?php
require_once 'connection.php';
class Color{
    private $conn;
    function color(){
        $this->conn = new Connection;
    }
    function select_color(){
        $result = NULL;
        if($this->conn->connect() == true){
            $query = "SELECT idColor, nomColor FROM color ORDER BY nomColor ASC";
            $result = mysql_query($query);
        }
        $this->conn->disconnect();
        return $result;
    }
    function alta_color($campo){
        $resultado = NULL;
        if($this->conn->connect() == true){
            $query = "INSERT INTO color (nomColor) VALUES ('".mysql_real_escape_string($campo)."')";
            $result = mysql_query($query);
        }
        $this->conn->disconnect();
        return $result;
    }
    }
?>

它工作得很好，它插入数据没有问题，但我想省略重新加载整个页面以查看插入的数据的部分

使用draw()函数刷新数据表。但是，要做到这一点，您需要更新datatable数据对象。例如，如果需要更新单个单元格中的数据，可以使用cell.data()函数:

var table = $('#colores').DataTable();
$.ajax({
    url: 'modal_add_color.php',
    type: "POST",
    data: dataString,
    success: function(datos){  
        $('#agregarColor').modal('hide');
        cell = table.cell($('jquery-selector-here'));
        cell.data('new-cell-data-here');
        table.draw();
    }
})

不建议直接更新表html，因为新数据不会被数据表看到。您需要通过它的API更新数据表，然后重新绘制表。

您可以尝试这样处理您的数据

var str='';
for(var value in datos){
 str+='<tr><td>'+value+'</label></td>';
}
$('tbody').html(str);
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习