
在 CodeIgniter (CI) 框架中实现 AJAX 分页、全选、反选、不选 和 批量删除 功能,需要结合前端(HTML + JavaScript)和后端(CI 控制器和模型)来完成。以下是一个完整的实现示例。
1. 数据库设计
假设我们有一个 products 表,用于存储商品信息:
| 字段名 | 类型 | 说明 |
|---|---|---|
id | INT | 商品ID (主键) |
name | VARCHAR(255) | 商品名称 |
price | DECIMAL(10,2) | 商品价格 |
created_at | TIMESTAMP | 创建时间 |
SQL 示例:
CREATE TABLE products ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, price DECIMAL(10,2) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
2. 模型 (Product_model.php)
在模型中编写获取商品数据和批量删除的方法。
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class Product_model extends CI_Model {
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* 获取商品列表(分页)
*
* @param int $limit 每页显示数量
* @param int $offset 偏移量
* @return array
*/
public function get_products($limit, $offset) {
$this->db->limit($limit, $offset);
$query = $this->db->get('products');
return $query->result_array();
}
/**
* 获取商品总数
*
* @return int
*/
public function get_total_products() {
return $this->db->count_all('products');
}
/**
* 批量删除商品
*
* @param array $ids 商品ID数组
* @return bool
*/
public function delete_products($ids) {
$this->db->where_in('id', $ids);
return $this->db->delete('products');
}}?>3. 控制器 (Product.php)
在控制器中处理分页、AJAX 请求和批量删除。
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class Product extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('Product_model');
$this->load->helper('url');
$this->load->library('pagination');
}
/**
* 显示商品列表
*/
public function index() {
// 分页配置
$config['base_url'] = site_url('product/index');
$config['total_rows'] = $this->Product_model->get_total_products();
$config['per_page'] = 10; // 每页显示10条
$config['uri_segment'] = 3;
$this->pagination->initialize($config);
$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
// 获取商品数据
$data['products'] = $this->Product_model->get_products($config['per_page'], $page);
$data['pagination'] = $this->pagination->create_links();
// 加载视图
$this->load->view('product_list', $data);
}
/**
* 处理批量删除请求(AJAX)
*/
public function delete_selected() {
if ($this->input->is_ajax_request()) {
$ids = $this->input->post('ids');
if (!empty($ids)) {
$result = $this->Product_model->delete_products($ids);
if ($result) {
echo json_encode(['status' => 'success', 'message' => '删除成功']);
} else {
echo json_encode(['status' => 'error', 'message' => '删除失败']);
}
} else {
echo json_encode(['status' => 'error', 'message' => '未选择商品']);
}
} else {
echo json_encode(['status' => 'error', 'message' => '非法请求']);
}
}}?>4. 视图 (product_list.php)
在视图中实现商品列表、分页、全选/反选/不选功能和 AJAX 批量删除。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>商品列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.pagination a {
margin: 0 5px;
} </style></head><body>
<h1>商品列表</h1>
<form id="product-form">
<table border="1">
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td><input type="checkbox" name="ids[]" value="<?php echo $product['id']; ?>"></td>
<td><?php echo $product['id']; ?></td>
<td><?php echo $product['name']; ?></td>
<td><?php echo $product['price']; ?></td>
<td><?php echo $product['created_at']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<br>
<button type="button" id="delete-selected">批量删除</button>
</form>
<br>
<div class="pagination">
<?php echo $pagination; ?>
</div>
<script>
$(document).ready(function() {
// 全选/反选/不选
$('#select-all').click(function() {
$('input[name="ids[]"]').prop('checked', this.checked);
});
// 批量删除
$('#delete-selected').click(function() {
var ids = [];
$('input[name="ids[]"]:checked').each(function() {
ids.push($(this).val());
});
if (ids.length > 0) {
if (confirm('确定要删除选中的商品吗?')) {
$.ajax({
url: '<?php echo site_url("product/delete_selected"); ?>',
type: 'POST',
data: { ids: ids },
dataType: 'json',
success: function(response) {
alert(response.message);
if (response.status === 'success') {
location.reload(); // 刷新页面
}
},
error: function() {
alert('请求失败,请重试');
}
});
}
} else {
alert('请至少选择一个商品');
}
});
}); </script></body></html>5. 功能详解
1. 分页功能
使用 CI 的
pagination库实现分页。在控制器中配置分页参数,并将分页链接传递到视图。
2. 全选/反选/不选
使用 jQuery 监听全选复选框的点击事件,动态设置所有复选框的状态。
3. 批量删除
使用 AJAX 将选中的商品 ID 发送到后端。
后端接收 ID 数组并调用模型的
delete_products方法进行删除。删除成功后,前端刷新页面以更新数据。
4. AJAX 请求
使用 jQuery 的
$.ajax方法发送 POST 请求。后端返回 JSON 格式的响应,前端根据响应结果提示用户。
6. 运行流程
访问
Product控制器的index方法,显示商品列表和分页链接。用户勾选复选框并点击“批量删除”按钮。
前端通过 AJAX 将选中的商品 ID 发送到
delete_selected方法。后端处理删除请求并返回 JSON 响应。
前端根据响应结果提示用户并刷新页面。
7. 注意事项
安全性:
在后端验证用户权限,确保只有授权用户才能执行删除操作。
对 AJAX 请求进行 CSRF 保护。
性能优化:
如果数据量较大,可以考虑使用缓存或优化数据库查询。
用户体验:
可以在删除成功后,使用 JavaScript 动态移除已删除的行,而不是刷新整个页面。
通过以上代码,你可以在 CodeIgniter 框架中实现 AJAX 分页、全选/反选/不选和批量删除功能。
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, LeCMS, ClassCMS, Fastadmin, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。


