成功したAJAXコールの後、IDでテーブルにデータを表示

Question

私は自分のページに検索入力フィールドを持っています。私は現在、データベースからのデータをテーブル（id = "table_userinfo"）に表示しています。今、私はライブ検索機能を私のテーブル（id = "table_userinfo"）に追加したいと思います。私はphp codeigniterを使用しています。私user_modelで 私は持っている：私のlogin_controllerで

function search_userInfo($keyword) 
{ 
    $this->db->like('DeviceName',$keyword); 
    $this->db->or_like('RegistrationDateTime',$keyword); 
    $this->db->or_like('LastUpdateDateTime',$keyword); 
    $this->db->or_like('AppVersion ',$keyword); 
    $this->db->or_like('iOSVersion',$keyword); 
    $this->db->or_like('DeviceDID',$keyword); 
    $this->db->or_like('DeviceToken',$keyword); 
    $query = $this->db->get('userinfo'); 
    if($query) 
    { 
     return $query->result(); 
    } 
    else 
    { 
     return NULL; 
    } 
} 

：私のadminPanel_viewページで

function displayDatabase() 
{ 
    $data['tableInfo']=$this->user_model->fetchData(); 
    $this->load->view('adminPanel_view',$data); 

} 
function search() 
{ 

    $search=$this->input->post('searchString'); 
    $data['tableInfo']=$this->user_model->search_userInfo($search); 

} 

、私が持っている：

<script> 
 

 
    $('#search').keyup(function(){ 
 

 
     var input_data = {searchString: $('#search').val() }; 
 
      //console.log(input_data); 
 
      $.ajax({ 
 
       type:"POST", 
 
       url:base_url+'index.php/login_controller/search', 
 
       data:input_data, 
 
       success:function(data){ 
 
        if(data.length>0) 
 
        { 
 
         console.log(data); 
 
        } 
 

 
       } 
 
      }); 
 
    }); 
 

 
</script>

<table class="table table-bordered table-hover table-full-width" id="table_userinfo"> 
 
<thead> 
 
<tr> 
 
    <th>Serial No.</th> 
 
    <th class="hidden-xs">Device Name</th> 
 
    <th>Device Type</th> 
 
    <th>RegistrationDateTime </th> 
 
    <th>LastUpdateTime</th> 
 
    <th>LastPushNotificationSent</th> 
 
    <th>Actions</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<?php //print_r ($tableInfo);exit;?> 
 
<?php $no=0;?> 
 
<?php foreach($tableInfo as $r): ?> 
 
    <tr> 
 

 
     <td><?php echo $no ?></td> 
 
     <td><?php echo $r->DeviceName ?></td> 
 
     <td><?php echo $r->DeviceType ?></td> 
 
     <td><?php echo $r->RegistrationDateTime ?></td> 
 
     <td><?php echo $r->LastUpdateDateTime ?></td> 
 
     <td><?php echo $r->LastPushNotificationSent ?></td> 
 
     <td><?php echo "Actions" ?></td> 
 

 
    </tr> 
 
    <?php $no+=1;?> 
 
<?php endforeach; ?> 
 
</tbody> 
 
</table>

が、これは検索です私が使っているバーOこの表

<div id="" class="dataTables_filter"> 
 
      <label> 
 
       <input placeholder="Search" class="form-control input-sm" aria-controls="sample_1" type="text" id="search" name="search_userinfo"> 
 
      </label> 
 
     </div>

は、どのように私はAjaxの呼び出しを通じて取得していたデータを表示し、テーブル（ID = "search_userinfo）でそれを表示します。あなたのアヤックスで

Answer 1

：エコーjson_encode

（の$ this - > user_model-> search_userInfo（$検索））;

この

<script> 

$('#search').keyup(function(){ 

    var input_data = {searchString: $('#search').val() }; 
     //console.log(input_data); 
     $.ajax({ 
      type:"POST", 
      url:base_url+'index.php/login_controller/search', 
      data:input_data, 
      dataType: "json", 
      success:function(data){ 
       $("#table_userinfo").html(" "); //clear everything from table 

       data.forEach(function(entry) { 
       $("#table_userinfo").append("<td>"+entry.DeviceName+"</td><td>"); 
        //just add everything here 
}); 

      } 
     }); 
}); 

</script> 

Answer 2

あなたのコントローラー

function search() 
{ 

    $search=$this->input->post('searchString'); 
    $data['tableInfo']=$this->user_model->search_userInfo($search); 
print_r(json_encode($data['tableInfo']));exit 

} 

dataType:'json'この行を追加します。

あなたの成功の機能であなたはそのデータのJSONを取得しますさて、あなたはこのように追加することができ、

$.each(data, function(i, item) { 
    alert(item.DeviceName); // append data where you need to append 
});​ 

しかしからkeyup

で、あなたは成功の機能で取得するデータの量について確認してください機能の検索（）としてそれを返すの内側