<apex:page controller="DataTableController">
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-3.6.0.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.DataTables, 'js/jquery.dataTables.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'css/jquery.dataTables.min.css')}"/>
    
    <apex:form id="form">
        <apex:pageBlock title="数据表格">
            <table id="dataTable" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>ID</th>
                        <th>名称</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:repeat value="{!records}" var="record">
                        <tr>
                            <td><input type="radio" name="selectedRow" value="{!record.Id}"/></td>
                            <td>{!record.Id}</td>
                            <td>{!record.Name}</td>
                            <td>{!record.Description__c}</td>
                        </tr>
                    </apex:repeat>
                </tbody>
            </table>
            
            <apex:commandButton value="删除选中行" onclick="deleteSelectedRow(); return false;"/>
        </apex:pageBlock>
    </apex:form>
    
    <script>
        $(document).ready(function() {
            // 初始化DataTable
            var table = $('#dataTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true
            });
            
            // 存储DataTable实例供全局使用
            window.dataTableInstance = table;
        });
        
        function deleteSelectedRow() {
            var selectedId = $('input[name="selectedRow"]:checked').val();
            
            if (!selectedId) {
                alert('请选择要删除的行');
                return;
            }
            
            if (confirm('确定要删除这条记录吗？')) {
                // 调用Apex控制器方法删除记录
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.DataTableController.deleteRecord}',
                    selectedId,
                    function(result, event) {
                        if (event.status) {
                            if (result.success) {
                                // 从DataTable中移除行
                                var row = $('input[value="' + selectedId + '"]').closest('tr');
                                window.dataTableInstance.row(row).remove().draw();
                                alert('删除成功');
                            } else {
                                alert('删除失败: ' + result.message);
                            }
                        } else {
                            alert('远程调用失败: ' + event.message);
                        }
                    }
                );
            }
        }
    </script>
</apex:page>

public class DataTableController {
    // 获取要显示的数据
    public List<CustomObject__c> getRecords() {
        return [SELECT Id, Name, Description__c FROM CustomObject__c LIMIT 100];
    }
    
    // 远程方法用于删除记录
    @RemoteAction
    public static Map<String, Object> deleteRecord(String recordId) {
        Map<String, Object> result = new Map<String, Object>();
        try {
            Database.delete(recordId);
            result.put('success', true);
        } catch (Exception e) {
            result.put('success', false);
            result.put('message', e.getMessage());
        }
        return result;
    }
}