如何在 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
希望对您有所帮助。
好吧,在我开始之前,我很抱歉英语不好,但我在编程方面知之甚少,尤其是我已经工作了 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
希望对您有所帮助。