在 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 分页、全选/反选/不选和批量删除功能。
本文关键词: CI 框架 ajax 分页 全选 反选
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, LeCMS, ClassCMS, Fastadmin, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。