Динамическое обновление таблицы при обновлении в базе данных в таблицах данных
Когда мы загружаем страницу, таблицы данных загружаются идеально. Когда мы обновляем любую запись через AJAX в таблицах данных, не отображаются какие-либо обновления.
Вот мой код, пожалуйста, помогите мне.
<!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);
}?>
Пожалуйста, помогите мне.
Решение
Вам не нужно писать 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");
}
}]
});
});
});
});
Другие решения
Вы повторяете запрос в своем PHP-коде. Удалите «echo» с самого начала и посмотрите, что произойдет: $ sql = «update users ….»
При использовании клиент-серверной архитектуры часто полезно иметь возможность протестировать сервер как самостоятельный процесс, чтобы увидеть, что происходит. В этом случае:
$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
Теперь, когда вы вызываете свой php-файл с помощью myfile.php? Test, вы можете видеть результаты, не обращаясь к клиентскому коду. Сообщение о том, что что-то «не работает», не очень полезно — сузьте область проблемы, прежде чем обращаться за помощью.
detector