成功 AJAX 调用后按 id 在表中显示数据答案

【问题标题】：Display data in a table by its id after successful AJAX call成功 AJAX 调用后按 id 在表中显示数据
【发布时间】：2016-03-21 10:58:59
【问题描述】：

我的页面中有一个搜索输入字段。目前我正在表中成功显示数据库中的数据（id="table_userinfo"）。现在我也想将实时搜索功能添加到我的表中（id="table_userinfo"）。我正在使用 php codeigniter。在我的 user_model 我有：

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

在我的登录控制器中：

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

}

在我的 adminPanel_view 页面中，我有：

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

这是除此表之外我正在使用的搜索栏

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

【问题讨论】：

标签： php jquery ajax codeigniter

【解决方案1】：

在函数 search() 内部将其返回为：

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

在 javascript 内部执行此操作

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

【讨论】：

【解决方案2】：

你的控制器

function search()
{

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

}

在你的 ajax 中添加这一行 dataType:'json';

现在在您的 Success 函数中，您将获得该数据的 json，您可以像这样追加，

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

但请确定您在成功功能中获得的数据量，使用 keyup

【讨论】：