【发布时间】：2014-11-10 04:06:41
【问题描述】：
从 php 脚本动态更新数据表。我们使用 AJAX 执行以下脚本。这是我的代码搜索不适用于数据表。当我是用户时，sAjaxSource 数据搜索不起作用。没有使用 sAjaxSource 搜索数据。请提供 jsfiddle 示例。分页不起作用。页面限制不起作用。请帮帮我。
<!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 () {
var oTable = "";
$.datepicker.regional[""].dateFormat = 'yy-mm-dd';
$.datepicker.setDefaults($.datepicker.regional['']);
drawDataTable = function()
{
oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'reg_users.php',
"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();
oTable.fnClearTable();
if (data.aaData.length)
oTable.fnAddData(data.aaData);
oTable.fnDraw();
$('#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>
</tbody>
</table>
</body>
</html>
这是 reg_users.php
<?php
define('DB_SERVER', 'localhost'); // Your Database host
define('DB_USERNAME', 'root'); // Your Database user name
define('DB_PASSWORD', ''); // 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 ="";
$dataArr['aaData'] = Array();
while($row = mysqli_fetch_assoc($rs)){
$r = Array();
foreach($row as $key=>$value){
$r[] = "$value";
}
$dataArr['aaData'][] = $r;
}
header('Content-Type: application/json');
echo json_encode($dataArr);
?>
这是 Chips_AddedByAdmin.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);
}
?>
请帮帮我。
【问题讨论】：
标签： php jquery ajax jquery-ui datatable