DataTables AltEditor连接MySQL：增删改及行跳转教程请求

针对你遇到的三个问题，下面是具体的实现方案：

AltEditor本身不直接与数据库交互，它通过AJAX和后端接口完成数据通信，后端负责连接MySQL并处理CRUD操作。这里以PHP作为后端示例：

后端接口（PHP） #

创建dt_alteditor_api.php文件，处理数据库连接与数据请求：

<?php
// 数据库配置
$host = 'localhost';
$dbname = '你的数据库名';
$username = '数据库用户名';
$password = '数据库密码';

// 初始化PDO连接
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("数据库连接失败: " . $e->getMessage());
}

$request_method = $_SERVER['REQUEST_METHOD'];

// 根据请求类型处理不同操作
switch($request_method) {
    case 'GET':
        // 查询数据
        $stmt = $pdo->query("SELECT id, name, email, phone FROM 你的表名");
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode(['data' => $data]);
        break;
    case 'POST':
        // 新增数据
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare("INSERT INTO 你的表名 (name, email, phone) VALUES (:name, :email, :phone)");
        $stmt->execute($data);
        echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
        break;
    case 'PUT':
        // 更新数据
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare("UPDATE 你的表名 SET name=:name, email=:email, phone=:phone WHERE id=:id");
        $stmt->execute($data);
        echo json_encode(['success' => true]);
        break;
    case 'DELETE':
        // 删除数据
        $id = $_GET['id'];
        $stmt = $pdo->prepare("DELETE FROM 你的表名 WHERE id=:id");
        $stmt->execute(['id' => $id]);
        echo json_encode(['success' => true]);
        break;
}
?>

前端配置 #

引入必要的资源后，初始化DataTables与AltEditor，指定AJAX接口：

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="path/to/altEditor/dataTables.altEditor.free.js"></script>

<script>
$(document).ready(function() {
    var table = $('#example').DataTable({
        ajax: 'dt_alteditor_api.php',
        columns: [
            { data: 'id', visible: false },
            { data: 'name' },
            { data: 'email' },
            { data: 'phone' }
        ],
        dom: 'Bfrtip',
        buttons: [
            { extend: 'add', editor: table.altEditor() },
            { extend: 'edit', editor: table.altEditor() },
            { extend: 'delete', editor: table.altEditor() }
        ],
        altEditor: {
            ajax: {
                create: { type: 'POST', url: 'dt_alteditor_api.php' },
                edit: { type: 'PUT', url: 'dt_alteditor_api.php' },
                remove: { type: 'DELETE', url: 'dt_alteditor_api.php?id=_id_' }
            }
        }
    });
});
</script>

<table id="example" class="display" style="width:100%"></table>

只需在AltEditor配置中添加editing: "inline"，即可开启行内编辑模式：

altEditor: {
    editing: "inline", // 启用行内编辑
    ajax: {
        create: { type: 'POST', url: 'dt_alteditor_api.php' },
        edit: { type: 'PUT', url: 'dt_alteditor_api.php' },
        remove: { type: 'DELETE', url: 'dt_alteditor_api.php?id=_id_' }
    }
}

点击编辑按钮后，会直接在行内弹出编辑器，修改完成后自动提交到后端接口。

给表格行绑定点击事件，获取行数据后跳转至详情页面，再将数据填充到表单中：

前端行点击事件 #

在DataTables初始化代码后添加：

$('#example tbody').on('click', 'tr', function() {
    var rowData = table.row(this).data();
    // 用sessionStorage传递数据（避免URL泄露敏感信息）
    sessionStorage.setItem('rowData', JSON.stringify(rowData));
    window.location.href = 'detail.html';
});

详情页面（detail.html）填充表单 #

在详情页面中读取存储的数据并填充表单：

<form id="detailForm">
    <input type="hidden" name="id" id="id">
    <div>
        <label>姓名:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label>邮箱:</label>
        <input type="email" name="email" id="email">
    </div>
    <div>
        <label>电话:</label>
        <input type="text" name="phone" id="phone">
    </div>
</form>

<script>
$(document).ready(function() {
    // 读取存储的行数据
    const rowData = JSON.parse(sessionStorage.getItem('rowData'));
    // 填充表单字段
    $('#id').val(rowData.id);
    $('#name').val(rowData.name);
    $('#email').val(rowData.email);
    $('#phone').val(rowData.phone);
    // 清除存储的数据
    sessionStorage.removeItem('rowData');
});
</script>

内容的提问来源于stack exchange，提问作者stycroft