JavaScript动态设置data-field属性无效，Bootstrap Table无法加载对应数据

问题根因 #

你使用的是Bootstrap Table组件，它的默认初始化逻辑是DOM加载完成后自动读取现有表头的data-field属性生成内部列配置缓存，后续你通过JS动态修改、新增表头节点的data-field属性，不会触发组件内部配置的更新，因此新加列无法绑定数据。
同时你的代码存在两个显性问题：

• table标签定义了重复id：thisTable和bk-table，会导致DOM选择器行为异常
• 动态生成表头的逻辑写在了queryParams回调中，这个回调是表格发起数据请求前的参数处理钩子，执行时机远晚于表格初始化，此时表头配置早已固化

修复方案 #

步骤1：关闭自动初始化，移除冗余配置 #

修改table标签，删除data-toggle="table"属性，保留唯一id：

<table id="thisTable"  contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
       data-toolbar="#toolbar"
       data-cookie="true"
       data-cookie-id-table="materialId"
       data-show-columns="true"
       data-show-refresh="true"
       data-show-fullscreen="true"
       data-show-export="true"
       data-height="650"
       data-click-to-select="true"
       data-id-field="id"
       data-show-footer="true"
       data-url="/api/materials/"
       data-query-params="queryParams"
       data-remember-order="true"
       data-pagination="true"
       data-side-pagination="server"
       data-total-field="count"
       data-data-field="results">
    <thead class="thead-dark" >
    <tr contenteditable='true'>
        <th data-field="courseCode" data-sortable="true" data-formatter="renderCourse"></th>
    </tr>
    </thead>
</table>

步骤2：调整表头生成逻辑，手动初始化表格 #

将动态生成表头的逻辑提前到表格初始化之前，所有表头属性配置完成后再调用Bootstrap Table的初始化方法：

const eText_iBookStore  = ['Course Code', 'Course Material Title', 'eISBN/VBID', 'iSBN']

// 页面加载完成/用户选择完上一页参数后，先处理表头
$(function() {
    const addInfo = localStorage['Add_Information']
    if (addInfo == "eText_iBookStore") {
        const tr = $('#thisTable thead tr')[0]
        // 新增表头节点
        for (let i=0;i<eText_iBookStore.length;i++) {
            const th = document.createElement('th')
            tr.appendChild(th)
        }
        // 统一设置表头文本和属性
        $( "#thisTable thead tr th" ).each(function( index ) {
            $(this).text(eText_iBookStore[index])
            // 在此处统一设置所有data-field，避免零散设置遗漏
            switch(index) {
                case 2: 
                    this.setAttribute("data-field", "book.title")
                    break
                // 其他列的data-field在这里补充
                case 3:
                    this.setAttribute("data-field", "book.isbn")
                    break
            }
            // 可统一加排序等公共属性
            this.setAttribute("data-sortable", "true")
        })
    }
    // 所有表头配置完成后，手动初始化表格
    $('#thisTable').bootstrapTable()
})

// 保留原queryParams逻辑，删除其中的表头处理代码
function queryParams(params) {
    params['limit'] = localStorage['Format'];
    params['discipline'] = localStorage['discipline'];
    params['Add_Information'] = localStorage['Add_Information'];
    return params
}

特殊场景：已初始化表格需要动态更新列 #

如果你的场景是表格已经渲染完成后需要切换表头，不要直接修改DOM属性，调用组件提供的refreshOptions方法直接更新列配置即可：

const newColumns = [
    {field: 'courseCode', title: 'Course Code', sortable: true, formatter: renderCourse},
    {field: 'book.title', title: 'Course Material Title', sortable: true},
    // 其他列配置
]
$('#thisTable').bootstrapTable('refreshOptions', {columns: newColumns})

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