我们在数据库中更新数据库时动态更新表

时间：2014-09-16 05:22:53

标签： php jquery ajax jquery-ui datatable

当我们加载页面时，数据表被完美加载。当我们通过AJAX在数据表中更新任何记录时，不会显示任何更新。 这是mycode请帮助我。

<!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['']);
    $('#example').dataTable({
        "aoColumns": [{
            "sWidth": "200px"
        },
        null,
        null,
        null]
    })
        .columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [{
            type: "text"
        }, {
            type: "select"
        }, {
            type: "date-range"
        },{
            type: "text"
        }]
    });
});
$(document).ready(function () {
    $('#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) {

                            $('#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>        
    <tr id="dialog-confirm">
        <td>demo12</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:31</td>
        <td>456</td>
    </tr>
    <tr id="dialog-confirm">
        <td>demo1</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:51</td>
        <td>120</td>
    </tr>
    <tr id="dialog-confirm">
        <td>demo2</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:52</td>
          <td>125</td>
    </tr>
    <tr id="dialog-confirm">
        <td>demo3</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:52</td>
    </tr>
    <tr id="dialog-confirm">
        <td>demo4</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:52</td>
          <td>140</td>
    </tr>
    <tr id="dialog-confirm">
        <td>demo5</td>
        <td>t1@gmail.com</td>
        <td>2014-08-27 12:15:52</td>
          <td>160</td>
    </tr>

    </tbody>
</table>  
</body>
</html>

这是我的PHP脚本来更新芯片dymacilly 

 <?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);
}


?>

请帮帮我。

2 个答案:

答案 0 :(得分：0)

您不需要多次编写document.ready，它应该是html中的一次。 要从ajax请求重新加载数据表，您需要销毁现有表，然后重新绘制它。

将您的数据表初始化代码放在函数drawDataTable中，并在ajax请求成功时调用它。见下面的代码。

$(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: "select"
        }, {
            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");
                }
            }]
        });

    });
});
});

答案 1 :(得分：0)

您正在回复PHP代码中的查询。删除＆＃34; echo＆＃34;从一开始就看看会发生什么：$ sql =＆＃34;更新用户....＆＃34;

使用客户端/服务器体系结构时，能够将服务器作为独立进程进行测试以查看正在进行的操作通常很有用。在这种情况下：

$test=array ('username'=>'test_user_name', 'amount'=>'123.45', 'password'=>'test_password');
$input = isset ($_REQUEST ['test']) ? $test : $_POST;

//  Now use $input instead of $_POST for your source

现在，当你使用myfile.php？test调用你的php文件时，你可以看到结果，而无需通过客户端代码。发布某些内容＆＃34;不起作用＆＃34;并非有用 - 在寻求帮助之前缩小问题范围。

相关问题
最新问题