Bootstrap美化表格与AJAX动态加载删除查看详解

Bootstrap页面美化与资源引入

部分开发者可能缺乏专业的UI设计能力，为了提升界面视觉效果，可以引入Bootstrap工具库。相较于传统手写CSS，这种方式能更便捷地实现较为美观的页面布局。

本文使用Bootstrap对之前的数据展示表格进行了样式升级，同时对AJAX请求部分进行了重构优化，使整体逻辑更加清晰易读。

此处并未本地下载Bootstrap资源包，而是直接通过网页链接引用在线资源。


<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

需注意：若引用的多个JS文件中包含jQuery，必须确保jQuery库文件排在其他脚本之前加载。

在首页展示中，对数据表格应用了Bootstrap的条纹样式（table-striped），使得界面视觉效果更加整洁美观。


 <h2>内容加载</h2>

 <table class="table table-striped"> <!--从bootstrap中引用了里面的class-->
  <thead>
  <tr>
   <th>水果名称</th>
   <th>水果价格</th>
   <th>水果产地</th>
   <th>操作</th>
  </tr>
  </thead>

  <tbody id="tb">

  </tbody>
 </table>

AJAX数据交互与后端处理

此前编写的AJAX逻辑部分也进行了优化，以避免因括号匹配等问题导致程序运行异常。之前已介绍过jiazaiym.php和shanchu.php的实现，本节补充查看详细信息的xiangqing.php页面逻辑。


<?php
header("Content-type:text/html;charset=utf-8");

$ids=$_POST["ids"];

include("DADB.class.php");
$db=new DADB();
$sql="select * from fruit where ids='{$ids}' ";
$arr=$db->Query($sql,1);

$str="";
foreach($arr as $v)
{
 $str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>

AJAX核心处理代码如下：


<script type="text/javascript">
 Load();
 function Load() {
  $.ajax({
   url: "jiazaiym.php",
   dataType: "TEXT",
   success: function (data) {
    //alert(data);
    var str = "";
    var hang = data.split("|");

    for (var i = 0; i < hang.length; i++) {
     var lie = hang[i].split("^");
     str = str + "<tr><td>" + lie[1] + "</td><td>"
      + lie[2] + "</td><td>" + lie[3] + "</td><td> <button type='button' ids='"+lie[0]+"' class='btn btn-primary sc'>删除</button><button type='button' ids='"+lie[0]+"' class='btn btn-primary ck' data-toggle='modal' data-target='#myModal'>查看</button></td></tr>" //用bootstrp写删除和查看的按钮

    }
     $("#tb").html(str);

     addshanchu();
     chakan();
    }

  })
 }

 //删除页面的方法
 function addshanchu(){
 $(".sc").click(function() {
  var ids = $(this).attr("ids");
  $.ajax({
   url: "shanchu.php",
   data: {ids:ids},
   type: "POST",
   dataType: "TEXT",
   success: function (aa) { //去空格
    if (aa.trim() == "OK") {
     alert("删除成功");
     Load();
    }
    else {
     alert("删除失败");
    }
   }
  })
 })
 }

 //查看的方法：
 function chakan()
 {
  $(".ck").click(function(){
   //显示模态框
//   $('#myModal').modal('show');

   //往模态框里面加内容
   var ids =$(this).attr("ids");

   $.ajax({
    url:"xiangqing.php",
    data:{ids:ids},
    type:"POST",
    dataType:"TEXT",
    success:function(chakan)
    {

     var lie=chakan.split("^");

     var aa="<div>水果名称:"+lie[1]+"</div><div>水果价格："+lie[2]+"</div><div>水果产地："+lie[3]+"</div>";

     $("#nr").html(aa);
    }

   })
  })
 }

前端模态框实现与效果展示

模态框的HTML结构如下，点击相关按钮即可触发弹出模态窗口：


<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>

完成上述代码编写后，页面显示效果如下所示：

Bootstrap页面美化与资源引入

经过上述处理，页面视觉效果显著提升，且通过不同方法封装代码，使得整体结构更加整齐有序。

以上内容为本文的全部分享，希望对读者的学习有所帮助，欢迎继续支持本站。

基于Bootstrap与AJAX的页面美化及数据交互实现

Bootstrap页面美化与资源引入

AJAX数据交互与后端处理

前端模态框实现与效果展示

实用工具推荐