Display data in a table by its id after successful AJAX call

Question

i have a search input field in my page. currently i am displaying data from the database successfully in a table(id="table_userinfo"). Now i want to add the live search functionality to my table(id="table_userinfo") as well. i am using php codeigniter. in my user_model i have:

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

in my login_controller:

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

}

in my adminPanel_view page, i have:

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

this is the search bar that i am using in addition to this table

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

how do i display the data that i am getting through the Ajax call and show it in the table(id="search_userinfo).

Answer 1

inside of function search() return it as:

echo json_encode($this->user_model->search_userInfo($search));

and inside of javascript do this

<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

Your Controller

function search()
{

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

}

In your ajax add this line dataType:'json';

Now In Your Success function You will get an json for that data ,You can append like this,

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

But Please be sure about amount of data you get in success function, with keyup