標籤：分頁 jquer post jquery click i++ type toggle cin
<!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>無標題文檔</title><script src="jquery-1.11.2.min.js"></script><script src="bootstrap.min.js"></script><link href="bootstrap.min.css" rel="stylesheet" type="text/css" /></head><body><h1>顯示資料</h1><table width="100%" border="1" cellpadding="0" cellspacing="0"><tr> <td>代號</td> <td>姓名</td> <td>性別</td> <td>民族</td> <td>生日</td> <td>操作</td> </tr> <tbody id="bg"> </tbody></table><!-- 模態框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title" id="myModalLabel">詳細資料</h4> </div> <div class="modal-body" id="content"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div></body><script type="text/javascript">$(document).ready(function(e) { jiazai();});//載入資料的方法function jiazai(){//非同步$.ajax({url:"123123.php",dataType:"TEXT",success: function(data){var hang = data.split("|");var str = "";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type=‘button‘ value=‘詳情‘ class=‘xiangqing‘ code=‘"+lie[0]+"‘ data-toggle=‘modal‘ data-target=‘#myModal‘ /></td></tr>";}$("#bg").html(str);$(".xiangqing").click(function(){var code = $(this).attr("code");$.ajax({url:"123124.php",data:{code:code},type:"POST",dataType:"TEXT",success: function(d){var lie = d.split("^");var c = "<div>代號："+lie[0]+"</div><div>姓名："+lie[1]+"</div><div>性別："+lie[2]+"</div><div>民族："+lie[3]+"</div><div>生日："+lie[4]+"</div>";$("#content").html(c);}});})}});}</script></html>
分頁面：123123.PHP
把要顯示的代號字母轉換成漢字顯示出來
<?phpinclude("DBDA.class.php");$db = new DBDA();$sql = "select * from info";$attr = $db->Query($sql);for($i=0;$i<count($attr);$i++){$attr[$i][2]=$attr[$i][2]?"男":"女";$sqll = " select name from nation where code = ‘{$attr[$i][3]}‘ ";$de = $db->Query($sqll);$attr[$i][3] = $de[0][0];}// n001^漢族|n002^回族$str = "";foreach($attr as $v){$str .=implode("^",$v)."|";}//echo $str;echo substr($str,0,strlen($str)-1);
分頁面：123124.php
?php
include("DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "select * from info where code=‘{$code}‘";
$attr = $db->Query($sql);
$attr[0][2]=$attr[0][2]?"男":"女";
$sqll = " select name from nation where code = ‘{$attr[0][3]}‘ ";
$de = $db->Query($sqll);
$attr[0][3] = $de[0][0];
$str = "";
foreach($attr as $v)
{
$str .= implode("^",$v)."|";
}
echo substr($str,0,strlen($str)-1);
下面是運行結果
用ajax對資料進行查看人員資訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
