如何在PHP页面中点击li元素切换展示单/双Datatable？

我来帮你搞定这个需求，咱们分几个部分一步步实现：

1. 完善HTML结构 #

先把你的列表补全，同时添加Datatable的容器（初始全部隐藏，点击后再显示对应内容）：

<ul class="content-box-tab order_type" style="float: right;margin: 0 !important;padding: 10px 15px 0 0 !important;">
    <li><a sub="paid" class="active">已支付</a></li>
    <li><a sub="unpaid">未支付</a></li>
</ul>

<!-- 已支付Datatable容器 -->
<div id="paid-table-container" style="display: block;">
    <table id="paid-table" class="display" width="100%"></table>
</div>

<!-- 未支付Datatable容器 -->
<div id="unpaid-tables-container" style="display: none;">
    <h3>未支付记录组1</h3>
    <table id="unpaid-table-1" class="display" width="100%"></table>
    <br>
    <h3>未支付记录组2</h3>
    <table id="unpaid-table-2" class="display" width="100%"></table>
</div>

2. JavaScript逻辑（结合jQuery和DataTables） #

这里用jQuery绑定点击事件，根据点击的选项加载对应的表格。注意要处理表格的销毁与重新初始化，避免重复渲染：

// 全局存储Datatable实例，方便后续销毁/刷新
let paidTableInstance = null;
let unpaidTable1Instance = null;
let unpaidTable2Instance = null;

$(document).ready(function() {
    // 页面加载完成后默认加载已支付表格
    loadPaidTable();

    // 绑定tab点击切换事件
    $('.order_type a').on('click', function(e) {
        e.preventDefault();
        // 切换tab的active样式
        $('.order_type a').removeClass('active');
        $(this).addClass('active');
        
        const tabType = $(this).attr('sub');
        
        // 切换容器显示状态
        if (tabType === 'paid') {
            $('#paid-table-container').show();
            $('#unpaid-tables-container').hide();
            // 表格未初始化则加载，否则刷新数据
            if (!paidTableInstance) {
                loadPaidTable();
            } else {
                paidTableInstance.ajax.reload();
            }
        } else if (tabType === 'unpaid') {
            $('#paid-table-container').hide();
            $('#unpaid-tables-container').show();
            // 加载两个未支付表格
            if (!unpaidTable1Instance) {
                loadUnpaidTable1();
            } else {
                unpaidTable1Instance.ajax.reload();
            }
            if (!unpaidTable2Instance) {
                loadUnpaidTable2();
            } else {
                unpaidTable2Instance.ajax.reload();
            }
        }
    });
});

// 加载已支付表格
function loadPaidTable() {
    paidTableInstance = $('#paid-table').DataTable({
        ajax: {
            url: 'get_paid_records.php', // 后端接口地址
            type: 'POST',
            dataType: 'json'
        },
        columns: [
            { title: '订单ID', data: 'order_id' },
            { title: '支付金额', data: 'amount' },
            { title: '支付时间', data: 'pay_time' },
            // 其他列根据你的业务需求添加
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh-CN.json' // 中文语言包，可按需调整
        },
        destroy: true // 允许销毁重绘，避免重复初始化报错
    });
}

// 加载未支付表格1
function loadUnpaidTable1() {
    unpaidTable1Instance = $('#unpaid-table-1').DataTable({
        ajax: {
            url: 'get_unpaid_records_1.php', // 第一个未支付数据接口
            type: 'POST',
            dataType: 'json'
        },
        columns: [
            { title: '订单ID', data: 'order_id' },
            { title: '应付金额', data: 'amount' },
            { title: '创建时间', data: 'create_time' },
            // 其他列
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh-CN.json'
        },
        destroy: true
    });
}

// 加载未支付表格2
function loadUnpaidTable2() {
    unpaidTable2Instance = $('#unpaid-table-2').DataTable({
        ajax: {
            url: 'get_unpaid_records_2.php', // 第二个未支付数据接口
            type: 'POST',
            dataType: 'json'
        },
        columns: [
            { title: '订单ID', data: 'order_id' },
            { title: '客户名称', data: 'customer_name' },
            { title: '逾期天数', data: 'overdue_days' },
            // 其他列
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh-CN.json'
        },
        destroy: true
    });
}

3. PHP后端接口示例 #

以get_paid_records.php为例，连接数据库并返回JSON格式的已支付数据：

<?php
// 数据库连接配置（根据你的实际环境调整）
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询已支付记录（这里的表名和字段请根据你的实际业务调整）
$sql = "SELECT order_id, amount, pay_time FROM orders WHERE status = 'paid'";
$result = $conn->query($sql);

$records = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $records[] = $row;
    }
}

// 返回DataTables要求的JSON格式数据
echo json_encode([
    'data' => $records
]);

$conn->close();
?>

get_unpaid_records_1.php和get_unpaid_records_2.php的逻辑类似，只需修改查询条件或数据源即可，记得做好SQL注入防护（比如使用预处理语句）。

几点注意事项 #

• 确保你已经引入了jQuery和DataTables的CSS、JS文件（可以用CDN或者本地文件）
• 如果两个未支付表格的数据可以从同一个接口返回，也可以修改JS逻辑，一次请求获取两个数据集，减少HTTP请求
• 可以添加加载动画，提升用户体验

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