Question

我的页面中有一个搜索输入字段。目前我正在表中成功地显示数据库中的数据（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;
    }
}

在我的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);

}

在我的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）。

Answer 1

在函数search（）内部将其返回为：

echo json_encode（$ this-＆gt; user_model-＆gt; 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>

Answer 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';

现在你成功的功能你将得到一个json的数据，你可以这样追加，

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

但请确保您在成功功能中获得的数据量 keyup

成功进行AJAX调用后，通过其ID显示表中的数据

2 个答案: