实时搜索Codeigniter无法正常工作

时间:2018-06-12 17:35:15

标签: php codeigniter codeigniter-3 livesearch

我是一名刚毕业的学生,​​我是第一次学习Codeigniter而且我很难帮助我解决问题。我创建了一个记录员工信息的系统。我在我的代码中包含了实时搜索。语法没有错误,但没有显示结果。以下是我的代码。

这是控制器。它的文件名是Crud.php

控制器

public function fetch()
{
  $output = '';
  $query = '';
  if($this->input->post('query'))
  {
   $query = $this->input->post('query');
  }
  $data = $this->Crudmodel->fetch();
  $output .= '
  <div class="table-responsive">
     <table class="table table-bordered">
      <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Job Title</th>
      </tr>
  ';
  if($data->num_rows() > 0)
  {
   foreach($data->result() as $row)
   {
    $output .= '
      <tr>
       <td>'.$row->fname.'</td>
       <td>'.$row->lname.'</td>
       <td>'.$row->job_title.'</td>
      </tr>
    ';
   }
  }
  else
  {
   $output .= '<tr>
       <td colspan="5">No Data Found</td>
      </tr>';
  }
  $output .= '</table>';
  echo $output;
}

这是模型。文件名:Crudmodel.php

模型

public function fetch_data($query){
  $this->db->select("*");
  $this->db->from("employees");

  if($query != ''){
    $this->db->or_like('fname', $query);
    $this->db->or_like('lname', $query);
    $this->db->or_like('job_title', $query);
  }
    $this->db->order_by('id');
    return $this->db->get();
}

视图

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta  http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    </head>
    <body>

        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <h2>Employee Registation</h2>
                </div><br>
                <div class="pull-right">
                    <a class="btn btn-success" href="<?php echo base_url('crud/create') ?>"> Add Employee</a>

                    <a type="button" class="btn btn-danger" href="crud/logout">Logout</a>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Search</span>
                <input type="text" name="search_text" id="search_text" placeholder="Search Employee" class="form-control" />
            </div>
        </div>

        <div id="result"></div>
        <div style="clear:both"></div>

        <table class="table table-bordered">

            <thead>
                <tr>
                <!--    <th>Full Name</th> -->
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Job Title</th>
                    <th width="220px">Action</th>
                </tr>
            </thead>


            <tbody>
                <?php foreach ($data as $employees)
                {
                    ?>
                    <tr>
                        <td> <?php echo $employees->fname; ?></td>
                        <td> <?php echo $employees->lname; ?></td>
                        <td> <?php echo $employees->job_title; ?></td>
                        <td>
                            <form method="DELETE" action="<?php echo base_url('crud/delete/'.$employees->id); ?>">
                                <a class="btn btn-info" href="<?php echo base_url('crud/show/'.$employees->id) ?>"> View</a>


                                <a class="btn btn-primary" href="<?php echo base_url('crud/edit/'.$employees->id) ?>"> Edit</a>
                                <button type="submit" class="btn btn-danger"> Delete</button>
                            </form>
                        </td>
                    </tr>
<?php } ?>
            </tbody>
        </table>

    </body>
</html>

<script>
    $(document).ready(function () {

        load_data();

        function load_data(query)
        {
            $.ajax({
                url: "<?php echo base_url('crud/fetch'); ?>",
                method: "POST",
                data: {query: query},
                success: function (data) {
                    $('#result').html(data);
                }
            })
        }

        $('#search_text').keyup(function () {
            var search = $(this).val();
            if (search != '')
            {
                load_data(search);
            } else
            {
                load_data();
            }
        });
    });
</script>

请帮我解决一下。我们将非常感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

首先,在你的控制器中,你试图调用一个可能不存在的方法:

$data = $this->Crudmodel->fetch();

因为在您的模型中,该方法被命名为&#34; fetch_data&#34;。所以我认为你打算这样做:

$data = $this->Crudmodel->fetch_data();

其次,您没有将查询参数传递给模型的方法。它应该是这样的:

$data = $this->Crudmodel->fetch_data( $query );

这些是帮助你入门的两件必不可少的事情。

另请注意,如果加载了crudmodel,则不会显示。您可能需要:

$this->load->model('crudmodel');

当你加载了Crudmodel时,你不需要大写你的对象用法。所以最后,你应该有这一行:

$data = $this->crudmodel->fetch_data( $query );

答案 1 :(得分:0)

除了我在其他答案中指出的问题外,我想我会帮忙清理一下。虽然没有经过测试,但这可能有所帮助:

这个怎么样:

控制器

public function fetch()
{
    $data = $this->crudmodel->fetch_data();

    echo $this->load->view('snippet', ['data' => $data], TRUE );
}

新视图snippet.php

$output = '
  <div class="table-responsive">
     <table class="table table-bordered">
      <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Job Title</th>
      </tr>
  ';

  if( ! empty( $data ) )
  {
   foreach($data as $row)
   {
    $output .= '
      <tr>
       <td>'.$row->fname.'</td>
       <td>'.$row->lname.'</td>
       <td>'.$row->job_title.'</td>
      </tr>
    ';
   }
  }
  else
  {
   $output .= '<tr>
       <td colspan="5">No Data Found</td>
      </tr>';
  }

  $output .= '</table>';

echo $output;

模型

public function fetch_data()
{
  $query = $this->input->post('query');

  $this->db->from("employees");

  if( ! empty($query) )
  {
    $this->db->or_like('fname', $query);
    $this->db->or_like('lname', $query);
    $this->db->or_like('job_title', $query);
  }

  $this->db->order_by('id','ASC');
  $data = $this->db->get();

  if( $data->num_rows() > 0 )
    return $data->result();

  return NULL;
}

在现有视图中

<script>
    $(document).ready(function () {

        load_data();

        function load_data(query)
        {
            if(query == undefined)
                query = '';

            $.ajax({
                url: "<?php echo site_url('crud/fetch'); ?>",
                method: "POST",
                data: {'query': query},
                dataType: "html",
                success: function (data) {
                    $('#result').html(data);
                }
            })
        }

        $('#search_text').keyup(function () {
            var search = $(this).val();
            if (search != '')
            {
                load_data(search);
            } else
            {
                load_data();
            }
        });
    });
</script>