PHP建站技术分享-从入门到精通_各类知识收集PHP建站技术分享-从入门到精通_各类知识收集PHP建站技术分享-从入门到精通_各类知识收集

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > 工作总结

CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解

管理员 2025-03-07
工作总结
62

在 CodeIgniter (CI) 框架中实现 AJAX 分页全选反选不选 和 批量删除 功能,需要结合前端(HTML + JavaScript)和后端(CI 控制器和模型)来完成。以下是一个完整的实现示例。


1. 数据库设计

假设我们有一个 products 表,用于存储商品信息:

字段名类型说明
idINT商品ID (主键)
nameVARCHAR(255)商品名称
priceDECIMAL(10,2)商品价格
created_atTIMESTAMP创建时间

SQL 示例:

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)

在模型中编写获取商品数据和批量删除的方法。

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 请求和批量删除。

php
复制
<?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 批量删除。

html
复制
<!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. 运行流程

  1. 访问 Product 控制器的 index 方法,显示商品列表和分页链接。

  2. 用户勾选复选框并点击“批量删除”按钮。

  3. 前端通过 AJAX 将选中的商品 ID 发送到 delete_selected 方法。

  4. 后端处理删除请求并返回 JSON 响应。

  5. 前端根据响应结果提示用户并刷新页面。


7. 注意事项

  1. 安全性

    • 在后端验证用户权限,确保只有授权用户才能执行删除操作。

    • 对 AJAX 请求进行 CSRF 保护。

  2. 性能优化

    • 如果数据量较大,可以考虑使用缓存或优化数据库查询。

  3. 用户体验

    • 可以在删除成功后,使用 JavaScript 动态移除已删除的行,而不是刷新整个页面。


通过以上代码,你可以在 CodeIgniter 框架中实现 AJAX 分页、全选/反选/不选和批量删除功能。



本文关键词: CI 框架 ajax 分页 全选 反选

希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, LeCMS, ClassCMS, Fastadmin, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部