如何在 Codeigniter 上使用数据表(尤其是制作搜索框)?

How to use datatables on Codeigniter (especially for making the search box)?

好吧,在我开始之前,我很抱歉英语不好,但我在编程方面知之甚少,尤其是我已经工作了 2 周的 codeigniter。

然后我找到了数据表。如果我可以将数据表与 codeigniter 集成——或者你们称之为任何东西,我发现它很有趣。

我下载了 ignited-datatables 并附加了它,但它仍然无法用于我的项目。

有什么帮助吗?我是 codeigniter 和数据表的新手。不过,我会很感激所有的答案。

P.S : 如果你们需要代码就问吧,我给你们看 ;)

我想您已经有了一个 运行 数据库。 例如,假设我们有一个名为 "cars" 的 table,其中包含汽车及其规格的列表。

cars :
  id    |  brand  | model  | year
   1    |  Ford   | Escort | 1989
   2    |  Audi   | A4     | 2005
  ...   |  ...    | ...    | ...

它在 codeigniter 上的工作原理:

1/配置文件


application/config/database.php.

中设置您的数据库连接值

这里我们正在为数据库 "mydatabase" 设置与本地服务器的连接。 Login/password 是 myusername/mypassword.

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'myusername',
    'password' => 'mypassword',
    'database' => 'mydatabase',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => TRUE,
    'db_debug' => TRUE,
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'autoinit' => TRUE,
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

此处有更多详细信息:http://www.codeigniter.com/user_guide/database/configuration.html

2/ 型号


Codeigniter 是一个 MVC 框架。这意味着您必须将数据库(模型)访问与您显示的内容(视图)或任何其他处理(控制器)分开。 在 application/models/ 中,我们创建一个名为 Cars.php 的新模型:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Cars extends CI_Model
{   
}

在我们的新 class 中,我们将编写一个函数来获取 table 中的所有汽车。 CodeIgniter 使用称为 Active Record 的 ORM。总而言之,它是一种使查询编写更轻松、更安全的工具。

public function getAllCars()
{
    $query = $this->db->get('cars');
    //This how you write *SELECT * FROM cars* with Active Record

    return $query->result(); //The result is an array of objects, each row = an object
}

更多详情: http://www.codeigniter.com/user_guide/general/models.html http://www.codeigniter.com/user_guide/database/active_record.html

3/控制器


现在,我们需要创建一个新的控制器。所以在 application/controllers 中创建一个名为 Cars.php 的新文件:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Cars extends CI_Controller 
{
    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {

    }

}

在我们的新控制器中,我们将调用我们的模型。

public function index()
{
    //First we need to load the model
    $this->load->model('cars');

    //Now we need to get our car list using the function we write on our model
    $car_list = $this->cars->getAllCars();

   //Finally, we send are list to the view so we can display it.
   $data["cars_lst"] = $car_list;
   $this->load->view("mycars", $data); //We are building this view in the next step.
}

更多详情:http://www.codeigniter.com/user_guide/general/controllers.html

4/ 视图


最后一步,输出。在 application/views/ 中创建一个新文件 mycars.php。 请记住,在我们的控制器中,我们调用了该视图并向其发送了一个数组,其中我们的 car_list 位于索引 "car_lst" 处。 我们现在可以将该数组索引用作我们视图中的 var,它将包含我们的汽车列表(还记得模型结果吗?)。

<!DOCTYPE html>
<html>

    <head>
         <!-- Meta, title, CSS, ... -->
    </head>

    <body>
        <table class="table table-hover">
             <thead>
                 <tr>
                     <th>Id</th>
                     <th>Brand</th>
                     <th>Model</th>
                     <th>Year</th>
                 </tr>
             </thead>

             <?php foreach ($car_lst as $c): ?>

             <tr>
                 <td><?php echo $c->id; ?></td>
                 <td><?php echo $c->brand; ?></td>
                 <td><?php echo $c->model; ?></td>
                 <td><?php echo $c->model; ?></td>              
             </tr>

             <?php endforeach; ?>

        </table>
    </body>
</html>

5/ 瞧!


现在,如果我们使用 http://localhost/mysite/index.php/cars/ 访问我们的应用程序,我们应该会看到我们的汽车列表。

这是在codeigniter中处理数据库的方法。当然这是一个简单的预览,但您应该能够理解它的工作原理并找到您自己的解决方案。

你知道www.datatables.net吗? 您可以包括 javascript & css(本地安装):

<!-- DataTables CSS -->
<link href="<?php echo base_url('assets/css/plugins/dataTables/jquery.dataTables.css') ?>" rel="stylesheet" />

<!-- jQuery -->
<script src="<?php echo base_url('assets/js/jquery-1.10.2.min.js') ?>"></script>

<!-- DataTables JS -->
<script src="<?php echo base_url('assets/js/plugins/dataTables/jquery.dataTables.min.js') ?>"></script>

然后,在您的 table 中:

<table id="dataTables-example"> ...</table>

最后,脚本:

$(document).ready( function () {
$('#dataTables-example').DataTable();
} );

我知道问题已经得到解答,但这可能对其他人也有帮助。

如果你想使用纯 javascript 库(没有 jQuery 依赖),你可以使用 Vanilla-DataTables

使用:

将这些添加到您的主文件中

<link href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

然后在您的 js 文件中添加:

var dataTable = new DataTable("#table_list"); //where #table_list is the id of your table

还有很多Options可供选择

或者如果你想要更新的库,你也可以查看 Simple-DataTables

希望对您有所帮助。