如何在Laravel+jQuery项目中为数据表进度栏加载数据库动态值

• JS逻辑问题：$(document).ready()的回调参数默认是jQuery对象本身，不是你自定义的SHAP_abs，你没有从页面拿到数据库存储的SHAP_abs字段值，直接计算得到的progressBarVal必然是NaN，进度条生成逻辑完全失效。
• 数据类型问题：SHAP_abs是varchar类型，你没有做显式的数值转换就直接做乘法运算，会出现非预期的计算结果。
• 选择器逻辑问题：全局用$(".progress")选择所有进度容器，会给页面上所有条目都追加同一个进度条，多条数据的场景下进度条会重复叠加、和对应行数据完全不匹配。
• 模板语法问题：<div class="progress">标签没有闭合，不符合HTML语法规范。
• 数据传递问题：Blade模板里没有把每行对应的$corr->SHAP_abs值传递到前端，JS无法获取每行对应的进度值。

修复方案示例 #

1. Blade模板代码调整 #

把每行对应的SHAP值存到元素的data属性，同时闭合标签：

@foreach($Correlations_list as $corr)
    @if($corr->Variable == $row )
    <td class="col-md-4">
        <!-- 将当前行的SHAP_abs存入data属性，和条目一一绑定 -->
        <div class="progress" data-shap="{{ $corr->SHAP_abs }}"></div>
    </td> 
    @endif
@endforeach

2. JS代码调整 #

遍历每个进度容器，单独处理每行的进度值：

<script type="text/javascript">    
$(document).ready(function(){  
    // 逐个处理每个进度条容器
    $(".progress").each(function(){
        // 读取data属性的SHAP值，显式转浮点型适配varchar存储格式
        let shapVal = parseFloat($(this).data('shap'));
        // 非法值兼容处理
        if(isNaN(shapVal)) shapVal = 0;
        let progressBarVal = (shapVal * 100).toFixed(2);
        let progressHtml = `<div class='progress-bar progress-bar-striped active' role='progressbar' 
                    aria-valuenow="${progressBarVal}" aria-valuemin="0" aria-valuemax="100" 
                    style="width:${progressBarVal}%">${progressBarVal}%</div>`;    
        $(this).append(progressHtml);    
    })
});    
</script>

控制器代码无需调整，如果需要更稳妥的数值处理，可以在Correlation模型中添加SHAP_abs字段的访问器，提前做数值转换。

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