在 ajax 里遍历 显示数据 到页面

控制器

public function search()
{
	$data = $_POST;
	$search = $data['name'];
	// 模糊查询
	$result = DB::name('biaoqian')->where('biaoqian_name','like',"%".$search."%")->select();  /
	if($result)
	{
		$returnData = ['code'=>3, 'shuju'=>$result,'info'=>'成功'];
	}else{
		$returnData = ['code'=>4, 'shuju'=>$result,'info'=>'失败'];
	}
	
	return json_encode($returnData,JSON_UNESCAPED_UNICODE);	
	echo $returnData;
	die;
	
} 

html 页面

<table class="table">
   <tr>
    <th>ID</th>
    <th>分类名称</th>
    <th>编辑</th>
    <!-- <th>添加</th> -->
    <th>删除</th>
   </tr>
  {foreach $biaoqian as $v}
	<!-- // 这是循环不能加id = "tableT",要不每个tr出来都是一样的id,会报错 -->
    <tr class='tableT'> 
        <td class="center">{$v.id}</td>
        <td>{$v.biaoqian_name}</td>
        <td class="center">
         <a href="admin/biao/edit_page?edit_id={$v.id}" title="编辑" class="link_icon">&#101;</a>
        </td>
        <!-- ajax 删除 -->
        <td class="center">
         <a href="javascript:;" delete_id="{$v['id']}" id="delete" title="删除" class="link_icon">&#100;</a>
        </td>
    </tr>
	 {/foreach}   
  </table>

js 中

<script type="text/javascript">

$("#searchbutton").click(function(){
    var name = document.getElementById('search').value;
    // alert(name);

     $.ajax({
            url:'admin/biao/search.html', 
            type:'POST',
            data:{
               "name": name,
            },
            dataType:'json',
            success:function(data){
                var data2 = JSON.parse(data);
                var item = "";
                $(".table").empty(); //清空
                for(var i = 0 ; i < data2.shuju.length; i++) {
                  item += 
                  "<tr><td>"+data2.shuju[i].id+"</td><td>"+data2.shuju[i].biaoqian_name+"</td><td class='center'><a href='admin/biao/edit_page?edit_id="+data2.shuju[i].id+"' title='编辑' class='link_icon'>&#101;</a></td><td class='center'><a href='javascript:;' delete_id="+data2.shuju[i].id+" id='delete' title='删除' class='link_icon'>&#100;</a></td></tr>";
		
                 // item += "<tr><td>"+data2.shuju[i].id+"</td><td>"+data2.shuju[i].biaoqian_name+"</td></tr>"; 
                }
                $(".table").append(item);   // 显示到里面
            },
            error:function(data){
                alert(222);
                console.log(data);
            }
        })  
    
})

猜你喜欢

转载自blog.csdn.net/qq_39835505/article/details/85158896