jquery 添加特定数据字段

Question

我正在尝试将 th 添加到具有特定数据字段 attr

的 table

我的table:

 <thead>
                        <tr>
                            <th data-field="id" title="Perfil" data-formatter="addButton" rowspan="2"></th>
                            <th style="text-align: center;" data-sortable="true" rowspan="2">NOMBRE</th>
                            <th style="vertical-align: middle;"  data-sortable="true" rowspan="2">APELLIDO</th>
                            <th style="vertical-align: middle;"  data-sortable="true" rowspan="2">LEGAJO</th>
                            <th style="vertical-align: middle;" data-sortable="true" rowspan="2">SECTOR</th>
                            <th style="vertical-align: middle;"  data-sortable="true" rowspan="2">EMPRESA</th>
                            <th style="text-align: center;" colspan="1" >MAQUINAS</th>
                        </tr>
                        <tr>
                           
                        </tr>
                        <tr>
                            <th data-field="id" title="Perfil" data-formatter="addButton"></th>
                            <th data-field="nombre" data-sortable="true">NOMBRE</th>
                            <th data-field="apellido" data-sortable="true">APELLIDO</th>
                            <th data-field="legajo" data-sortable="true">LEGAJO</th>
                            <th data-field="sector" data-sortable="true">SECTOR</th>
                            <th data-field="empresa" data-sortable="true">EMPRESA</th>


                        </tr>
                    </thead>

然后我在通过 jquery

加载数据时执行此操作

    $("#choferesTable thead tr:eq(0) th:eq(6)").attr('colspan', flotas.length);

    for (let i = 0; i < flotas.length; i++) {
        const alias = flotas[i].nombre;
        $('#choferesTable thead tr:eq(1)').append($(`<th />`, { text: alias }))
        $('#choferesTable thead tr:eq(2)').append($(`<th data-field="ejemplo" />`,{text:""}))

    }

我明白了

我的数据table行[0]是

{ apellido: "Sanchez"
bloqueado: "0"
ejemplo: "SUPERVISOR 2020-12-31"
id: 10002
legajo: "legajo"
nombre: "Carlos"
sector: "sector" }

但是没有工作，因为没有正确显示行数据。如果我直接在 html 上编辑它就可以了

Answer 1

我的 META 是根据 ajax 结果动态添加新列。

达到此目的的一种方法是销毁旧的 table，重新创建它并刷新数据。

 $.ajax({
        url: "../ajax/gestion_choferes.php",
        type: "GET",
        success: function (result) {
           tabla_choferes.bootstrapTable('destroy');
            $("#choferesTable thead tr").html('');
            $('#choferesTable tr').remove();
            $('#choferesTable thead').append('<tr><th data-field="id" title="Perfil" data-formatter="addButton" rowspan="2"></th><th style="text-align: center;" data-sortable="true" rowspan="2">NOMBRE</th><th style="vertical-align: middle;"  data-sortable="true" rowspan="2">APELLIDO</th><th style="vertical-align: middle;"  data-sortable="true" rowspan="2">LEGAJO</th><th style="vertical-align: middle;" data-sortable="true" rowspan="2">SECTOR</th><th style="vertical-align: middle;"  data-sortable="true" rowspan="2">EMPRESA</th><th style="text-align: center;" colspan="1" >MAQUINAS</th></tr>');
            $('#choferesTable thead').append('<tr></tr>');
            $('#choferesTable thead').append('<tr><th data-field="id" title="Perfil" data-formatter="addButton"></th><th data-field="nombre" data-sortable="true">NOMBRE</th><th data-field="apellido" data-sortable="true">APELLIDO</th><th data-field="legajo" data-sortable="true">LEGAJO</th><th data-field="sector" data-sortable="true">SECTOR</th><th data-field="empresa" data-sortable="true">EMPRESA</th></tr>');
            addEquiposTable(result.datos.flotas)
            
            $("#choferesTable").bootstrapTable();
            formatTables();
            $("#choferesTable").bootstrapTable('refresh');
        } // tell jQuery not to set contentType
    })

MORE INFO

jquery 添加特定数据字段

jquery add th with specfic data-field

html

jquery

append