คือผมจะเพิ่มหน้า search ข้อมูลจาก MySQL ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax มาแสดงบนเวปอ่ะคับ เลยไม่รู้จะทำยังไง
ajax_simple.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax simple all in one file</title>
<style type="text/css">
*{
font-family:tahoma, "Microsoft Sans Serif", Verdana;
font-size:12px;
}
</style>
<style type="text/css">
.browse_page{
clear:both;
margin-left:12px;
height:35px;
margin-top:5px;
display:block;
}
.browse_page a,.browse_page a:hover{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:1px solid #CCCCCC;
background-color:#F4F4F4;
color:#333333;
text-align:center;
line-height:18px;
font-weight:bold;
text-decoration:none;
}
.browse_page a:hover{
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
}
.browse_page a.selectPage{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
text-align:center;
line-height:18px;
font-weight:bold;
}
.browse_page a.SpaceC{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:0px dotted #0A85CB;
font-size:11px;
background-color:#FFFFFF;
color:#333333;
text-align:center;
line-height:18px;
font-weight:bold;
}
.browse_page a.naviPN{
width:50px;
font-size:12px;
display:block;
height:18px;
float:left;
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
text-align:center;
line-height:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div style=" text-align:center;margin:auto;width:80%;">
<form id="form_member" name="form_member" method="post" action="">
<table width="500" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="100" align="right"> </td>
<td> </td>
</tr>
<tr>
<td align="right">name</td>
<td align="left"><input name="ratedpower" type="text" id="ratedpower" size="45" /></td>
</tr>
<tr>
<td align="right">pass</td>
<td align="left"><input name="sub_name" type="text" id="sub_name" size="45" /></td>
</tr>
<tr>
<td align="right">insatt</td>
<td align="left"><input name="tf_name" type="text" id="tf_name" size="45" /></td>
</tr>
<tr>
<td align="right">type</td>
<td align="left"><select name="member_type" id="member_type">
<option value="">select</option>
<option value="1">one</option>
<option value="2">two</option>
</select></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input type="button" name="save" id="save" value="Save" />
<input type="button" name="cancel" id="cancel" value="Cancel" />
<input name="h_st_no" type="hidden" id="h_st_no" value="" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"> </td>
</tr>
</table>
</form>
<div id="showData" style="margin:auto;padding:10px;text-align:center;">
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>-->
<script type="text/javascript">
$(function(){
$("#showData").load("ajax_data.php");
$("#save").click(function(){
$.post("ajax_data.php?method=insert",$("#form_member").serialize(),function(){
$("#showData").load("ajax_data.php");
$("#form_member")[0].reset();
});
});
$("#cancel").click(function(){
$("#form_member")[0].reset();
});
$(".browse_page a").live("click",function(event){
event.preventDefault();
var url=$(this).attr("href");
// แสดงแบบปกติ
$("#showData").load(url,function(){
});
//// แสดงแบบ effect สามารถประยุกต์ effect หรือลูกเล่นอื่นๆ ตามต้องการ
// $("#showData").animate({
// opacity:0
// },100,function(){
// $("#showData").load(url,function(){
// $("#showData").animate({
// opacity:1
// },200);
// });
// });
return false;
});
$(".delItem").live("click",function(event){
event.preventDefault();
var idMember=$(this).attr("href");
idMember=idMember.replace("#","");
$(this).parent("td").parent("tr").fadeOut();
$.post("ajax_data.php?method=delete",{id:idMember},function(){
$("#showData").load("ajax_data.php");
});
});
$(".updateItem").live("click",function(event){
event.preventDefault();
var idMember=$(this).attr("href");
idMember=idMember.replace("#","");
$.post("ajax_data.php?method=getupdate",{id:idMember},function(data){
var returnData=data.split("|");
$("#h_st_no").val(returnData[0]);
$("#ratedpower").val(returnData[1]);
$("#install").val(returnData[2]);
$("#tf_name").val(returnData[3]);
$("#sub_name").val(returnData[4]);
});
});
});
</script>
<pre>
CREATE TABLE `tbl_member` (
`member_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`member_name` VARCHAR( 255 ) NOT NULL ,
`member_password` VARCHAR( 255 ) NOT NULL ,
`member_fullname` VARCHAR( 255 ) NOT NULL ,
`member_type` VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
</pre>
</body>
</html>
ajax_data.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
mysql_connect("localhost","root","gnothnapha") or die("Cannot connect the Server");
mysql_select_db("dataedl") or die("Cannot select database");
mysql_query("set character set utf8");
?>
<?php
// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){
global $e_page;
global $querystr;
$urlfile="ajax_data.php"; // ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
$per_page=10;
$num_per_page=floor($chk_page/$per_page);
$total_end_p=($num_per_page+1)*$per_page;
$total_start_p=$total_end_p-$per_page;
$pPrev=$chk_page-1;
$pPrev=($pPrev>=0)?$pPrev:0;
$pNext=$chk_page+1;
$pNext=($pNext>=$total_p)?$total_p-1:$pNext;
$lt_page=$total_p-4;
if($chk_page>0){
echo "<a href='$urlfile?keyword=$keyword&fields=$fields&s_page=$pPrev&querystr=".$querystr."' class='naviPN'>Prev</a>";
}
for($i=$total_start_p;$i<$total_end_p;$i++){
$nClass=($chk_page==$i)?"class='selectPage'":"";
if($e_page*$i<=$total){
echo "<a href='$urlfile?keyword=$keyword&fields=$fields&s_page=$i&querystr=".$querystr."' $nClass >".intval($i+1)."</a> ";
}
}
if($chk_page<$total_p-1){
echo "<a href='$urlfile?keyword=$keyword&fields=$fields&s_page=$pNext&querystr=".$querystr."' class='naviPN'>Next</a>";
}
}
?>
<?php
// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if($_GET['method']=="insert"){
if($_POST['h_st_no']!=""){
$q="UPDATE `tredl` SET `tf_name` = '".$_POST['tf_name']."',
`ratedpower` = '".$_POST['ratedpower']."',
`sub_name` = '".$_POST[' sub_name']."',
`install` = '".$_POST['install']."' WHERE `tredl`.`st_no` ='".$_POST['h_st_no']."' ";
}else{
$q="INSERT INTO `tredl` (
`st_no` ,
`ratedpower` ,
`sub_name` ,
`install` ,
`tf_name`
)
VALUES (
NULL , '".$_POST['st_no']."', '".$_POST['ratedpower']."',
'".$_POST['sub_name']."', '".$_POST['tf_name']."'
);";
}
mysql_query($q);
}
if($_GET['method']=="delete"){
$q="DELETE FROM tredl WHERE st_no='".$_POST['id']."' ";
mysql_query($q);
exit;
}
if($_GET['method']=="getupdate"){
$q="SELECT * FROM tredl WHERE st_no='".$_POST['id']."' ";
$qr=mysql_query($q);
$rs=mysql_fetch_array($qr);
echo $rs['st_no']."|";
echo $rs['ratedpower']."|";
echo $rs['sub_name']."|";
echo $rs['install']."|";
echo $rs['tf_name'];
exit;
}
?>
<?php
//////////////////////////////////////// เริ่มต้น ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?>
<form name="search" method="post" action="ajax_simple.php">
<span class="style35">search</span>
<input name="keyword" type="text" class="Lao" value="<? echo"$keyword"; ?>" />
from
<select name="fields" class="Lao">
<option value="<? echo "$fields"; ?>"></option>
<option value="sub_name">sub</option>
<option value="st_no">id</option>
<option value="install">place</option>
<option value="tf_name">name</option>
<option value="ratedpower">power</option>
</select>
<input name="Submit" type="submit" class="Lao" value="search">
</FORM>
<?php
if(empty($keyword) or empty($fields))
{
$q.="select * from tredl order by st_no asc ";
}
else
{
$q="select * from tredl where $fields like '%$keyword%'";
}
$q="select * from tredl where 1";
//$q.=" ORDER BY st_no DESC ";
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=5; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า
if(!isset($_GET['s_page'])){
$_GET['s_page']=0;
}else{
$chk_page=$_GET['s_page'];
$_GET['s_page']=$_GET['s_page']*$e_page;
}
if(empty($keyword) or empty($fields))
{
$q="SELECT * FROM tredl order by st_no asc";
$q.=" LIMIT ".$_GET['s_page'].",$e_page";
}
else
{
$q= "SELECT * FROM tredl where $fields like '%$keyword%' LIMIT $s_page, $e_page";
}
//$q.=" LIMIT ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){
$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);
}else{
$plus_p=($chk_page*$e_page);
}
$total_p=ceil($total/$e_page);
$before_p=($chk_page*$e_page)+1;
?>
<?php
$arr_typemember=array(
"1"=>"type 1",
"2"=>"type 2"
);
?>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35" height="20" align="center" bgcolor="#CCCCCC">#</td>
<td height="20" align="center" bgcolor="#CCCCCC">name</td>
<td width="150" height="20" align="center" bgcolor="#CCCCCC">type</td>
<td height="20" colspan="2" align="center" bgcolor="#CCCCCC">edite</td>
</tr>
<?php
$i=1;
while($rs=mysql_fetch_array($qr)){
?>
<tr>
<td height="20" align="center"><?=($chk_page*$e_page)+$i?></td>
<td height="20" align="left"> <?=$rs['st_no']?></td>
<td height="20" align="center"> <?=$rs['ratedpower']?></td>
<td width="45" height="20" align="center"><a href="#<?=$rs['st_no']?>" class="updateItem">edite</a></td>
<td width="45" height="20" align="center"><a href="#<?=$rs['st_no']?>" class="delItem">delete</a></td>
</tr>
<?php $i++; } ?>
</table>
<?php if($total>0){ ?>
<div class="browse_page">
<?php
// เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
page_navigator($before_p,$plus_p,$total,$total_p,$chk_page);
?>
</div>
<?php } ?>
<?php
//////////////////////////////////////////// จบ ส่วนเนื้อหาที่จะนำไปใช้ในไฟล์ ที่เรียกใช้ด้วย ajax
?><?php echo $total; ?>
ช่วยหน่อยครับ แก้ไม่ได้สักทีครับ ค้นหาแล้วไม่แสดงผล ไม่รู้เป็นที่อะไร โค๊ดหรือว่า mysql ครับ ดูให้หน่อย ขอบคุณนะครับTag : PHP, MySQL, Ajax
Date :
2011-08-04 04:42:52
By :
nattapongthanan
View :
1104
Reply :
1
จะใช้ ajax ก็ต้องส่ง page และทำตัว Navigator ที่เรียก ajax ตัวนั้นๆ ครับ
ไม่รู้มีใครมีวิธีอื่นไหม แต่ผมทำแบบนี้อะ
Date :
2011-08-04 11:04:46
By :
ikikkok
Load balance : Server 02