Laravel5.6中Yajra DataTable集成jQuery Uniform单选按钮失效问题

我明白你遇到的麻烦了——在服务端渲染的Datatable里，动态生成的Uniform样式单选按钮没法正常交互，哪怕调用了$.uniform.update()也没效果。这是因为动态新增的DOM元素根本没被Uniform正确初始化，update()方法只能用来更新已经完成初始化的元素状态，没法给新元素绑定Uniform的交互逻辑。

下面是具体的修复方案：

核心问题拆解 #

Yajra Datatable在服务端模式下，每次分页、筛选或者重新绘制表格时，都会生成全新的DOM节点（包括你的单选按钮）。你页面加载时执行的那一次Uniform初始化，只会作用于当时页面上存在的元素，后续动态生成的按钮完全没被Uniform处理过，自然没法正常点击。

修复步骤 #

修改你的Datatable配置中的fnDrawCallback方法，在每次表格绘制完成后，先销毁旧的Uniform实例（避免重复绑定导致冲突），再重新初始化所有新生成的单选按钮：

var oTable = $('.finance_payment_datatable').DataTable({
    processing: false,
    serverSide: true,
    ajax: {
        url: '{!! route('admin.finance.invoice.datatable') !!}',
        data: function (d) {
            var customer_id = $(".customer_select option:selected").val();
            if (typeof customer_id == 'undefined'){
                customer_id = '0';
            }
            if (customer_id !== '0') {
                d.customer_id = customer_id;
            }
        }
    },
    columns: [
        {data: 'maincheck', sortable: false, orderable: false, searchable: false},
        {data: 'invoice_number', name: 'invoice_number', sortable: true},
        {data: 'created_at', name: 'created_at', sortable: true},
        {data: 'outstanding_price', name: 'outstanding_price', sortable: true},
    ],
    order: [[2, 'desc']],
    "pagingType": "full_numbers",
    "language": {
        "emptyTable": "No invoice to display",
        "search": '<span>Filter:</span> _INPUT_',
        "lengthMenu": '<span>Show:</span> _MENU_',
    },
    autoWidth: false,
    'fnDrawCallback': function( oSettings ) {
        // 先销毁已有的Uniform实例，防止重复初始化引发的异常
        $('.styled_color_checkbox').uniform('destroy');
        // 重新初始化所有动态生成的单选按钮
        $(".styled_color_checkbox").uniform({ 
            radioClass: 'choice', 
            wrapperClass: 'border-indigo-600 text-indigo-800' 
        });
    }
});

额外注意事项 #

1. 确保JS加载顺序正确：先加载jQuery，再加载Uniform插件，最后初始化Datatable，避免依赖未加载导致的初始化失败。
2. 如果页面加载时就有表格数据，别忘了在页面初始化阶段也执行一次Uniform初始化（就是你原来的那行代码），确保初始渲染的单选按钮也能正常工作：

$(document).ready(function() {
    // 初始化页面加载时已存在的单选按钮
    $(".styled_color_checkbox").uniform({ 
        radioClass: 'choice', 
        wrapperClass: 'border-indigo-600 text-indigo-800' 
    });
    
    // 初始化Datatable...
});

这样修改后，每次表格重新绘制，新生成的单选按钮都会被Uniform正确初始化，就能正常点击交互了。

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