!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>
link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
script src="../FENGZHUANG/jquery-3.1.1.min.js">/script> //先引入jquery的js文件
script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js">/script> //再引入其它的js文件
style type="text/css">
.xq{ margin-left:30px}
/style>
/head>
body>
div class="page-header">
 h1>显示数据
 /h1>
/div>
table class="table table-hover">
 thead>
 tr>
 th width="30%">代号/th>
 th width="30%">名称/th>
 th width="40%">操作/th>
 /tr>
 /thead>
 tbody id="tb">
 //用js向其中添加内容
 /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">times;/button>
  h4 class="modal-title" id="myModalLabel">详细信息/h4>
  /div>
  div class="modal-body" id="nr">

  /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">
//加载数据
Load();
//加载数据的方法
function Load()
{
$.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
  var str = "";
  var hang = data.split("|"); //根据字符串中的|分解
  for(var i=0;ihang.length;i++)
  {
   var lie = hang[i].split("^"); //根据字符串中的^分解
   str = str+"tr>td>"+lie[0]+"/td>td>"+lie[1]+"/td>td>button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除/button>button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看/button>/td>/tr>";
  }
  $("#tb").html(str); //向tbody中输出内容
  addshanchu();
  addxiangqing();
  }
 });
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
  $(".sc").click(function(){
   var code = $(this).attr("code"); //获取删除按钮所在的数据的code
   $.ajax({
   url:"shanchu.php",
   data:{code:code},
   dataType:"TEXT",
   type:"POST",
   success: function(d){
    if(d.trim()=="OK")
    {
    alert("删除成功");
    Load(); //删除完需要加载数据
    }
    else
    {
    alert("删除失败");
    }
   }
   });
   })
}
//给查看详情加事件的方法
function addxiangqing()
{
 $(".xq").click(function(){
 //显示模态框
 $('#myModal').modal('show');
 //在模态框里面显示内容
 var code = $(this).attr("code"); //获取哪一条数据
 $.ajax({
  url:"xiangqing.php",
  data:{code:code},
  dataType:"TEXT",
  type:"POST",
  success:function(data){
  var lie = data.split("^"); 
  var str = "div>民族代号："+lie[0]+"/div>div>民族名称："+lie[1]+"/div>";
  $("#nr").html(str);
  }
 });
 })
}
/script>
/html>

?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
 $str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;

?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code='{$code}'";
if($db->Query($sql,0))
{
 echo "OK";
}
else
{
 echo "NO";
}

?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);