不正确更新数据表但在数据库中更新

时间:2014-09-16 06:53:32

标签: php jquery ajax datatable

当我们更新数据库中的记录时,它的更新完美而不会反映在数据表中。当我们刷新页面数据表更新时。我需要刷新页面数据表更新。请帮助我。

<?php
            define('DB_SERVER', 'localhost'); // Your Database host
            define('DB_USERNAME', 'root'); // Your Database user name
            define('DB_PASSWORD', 'root'); // Your Database password
            define('DB_DATABASE', 'qwer'); // Your Database Name
            $connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); // Connection
            $sql = "SELECT nickname, email ,created_date_time,real_chips FROM users ";
            $rs = mysqli_query($connection,$sql);
            $str ="";
            $data   = array();
            while ($row = mysqli_fetch_assoc($rs)) 
            {
              $str .= '<tr id="dialog-confirm">';
              $str .= '<td>'.$row["nickname"].' </td> <td>'. $row["email"].'</td><td>'. $row["created_date_time"].'</td><td>'. $row["real_chips"].'</td>';
              $str .= '</tr>';
            }
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Admin demo</title>
  <style type="text/css" title="currentStyle">
            @import "demo_page.css";
            @import "demo_table.css";               
   </style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">  
  <!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">   -->
  <script type='text/javascript' src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
  <script type='text/javascript' src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
    $.datepicker.regional[""].dateFormat = 'yy-mm-dd';
    $.datepicker.setDefaults($.datepicker.regional['']);

    drawDataTable = function()
    {

     $('#example').dataTable({
        "aoColumns": [{
            "sWidth": "200px"
        },
        null,
        null,
        null]
    })
        .columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [{
            type: "text"
        }, {
            type: "text"
        }, {
            type: "date-range"
        },{
            type: "text"
        }]
    });
   }

   // call datatable for the first time when page loads
   drawDataTable();

    $('#example').on("click", "tr#dialog-confirm", function () {
        var tableData = $(this).children("td").map(function () {
            return $(this).text();
        }).get();
        //' + $.trim(tableData[0]) + '

        var dynamicDialog = $('<div id="MyDialog" > <div><div style="width:150px;float:left;">Amount</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="text" name="amount" id="amount" style="width:150px;"/><input type="text" name="nickname" id="nickname" value="'+$.trim(tableData[0])+'" style="display:none;"/></div></div><div><div style="width:150px;float:left;">Password</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="password" name="password" id="password" style="width:150px;"/></div></div></div>');
        dynamicDialog.dialog({
            title: "Admin chips adding",
            modal: true,
            height: 250,
            width: 400,
            buttons: [{
                text: "Yes",
                click: function () 
                {
                    $.ajax({
                        type: "POST",
                        dataType: "html",
                        url: "Chips_AddedByAdmin.php",
                        cache: false,
                        data: {
                            username: $.trim(tableData[0]),
                            amount: $('#amount').val(),
                            password: $('#password').val()
                        },
                        beforeSend: function () {
                            $('#MyDialog').html('loading please wait...');
                        },
                        success: function (htmldata) {
                            //destroy existing datatable
                            $('#example').dataTable().fnDestroy();

                            //call datatable 
                            drawDataTable();

                            $('#MyDialog').html("You have successfully updated the database");
                            dynamicDialog.dialog("close");

                        }
                    });

                }
            }, {
                text: "No",
                click: function (e) {
                    $(this).dialog("close");
                }
            }]
        });

    });
});
});//]]>  

</script>
</head>
<body>
  <table id="example" class="display">
    <thead>
        <tr>
            <th style="width: 150px;">UserName</th>
            <th style="width: 150px;">Email</th>
            <th style="width: 180px;">Created Date</th>
             <th style="width: 180px;">Real Chips</th>
        </tr>
        <tr>
            <th style="width: 150px;">UserName</th>
            <th style="width: 150px;">Email</th>
            <th style="width: 180px;">Created Date</th>
             <th style="width: 180px;">Real Chips</th>
        </tr>
    </thead>
    <tbody>        
            <?php       
                echo $str;
            ?>  
    </tbody>
</table>

</body>


</html>

ajax dataupdate php就在这里

<?php
require_once("configure.php");
echo $nickname = $_POST['username'];
echo $amount = $_POST['amount'];
echo $password = $_POST['password'];

echo $sql = "SELECT * FROM users WHERE nickname ='admin' and password='$password';";
$rs = mysqli_query($connection,$sql);

$numrows=mysqli_num_rows($rs);
if($numrows > 0)
{

    echo $sql = "update users set real_chips=real_chips+'$amount' where nickname='$nickname';";
    $rs = mysqli_query($connection,$sql);
}
?>

1 个答案:

答案 0 :(得分:1)

不确定你在这里发生了什么,但这与我的做法完全不同。

假设我有一个像这样定义的数据表:

 oTable = $("table").dataTable({ ... settings ... });

如果我想刷新那个数据表,我将不得不打电话的是:

 oTable.fnDraw();

那就是它。

在代码中不需要销毁,构建额外的功能等。当你打开文档时,它就可以了。