Javascript 一页中有多个引导表-文志新

我试图在同一页中有两个引导表，但它只加载第二个脚本中的一个。谁能帮我弄清楚什么是不允许我这么做的

我认为这是一个id冲突，但我不确定，因为两个id调用相同会导致麻烦，但我想知道这里发生了什么

我使用的脚本与一样，但我将脚本与HTML分开

如果我加载一个脚本，效果会很好

角色表

<table id="tableRoles"
   data-toolbar="#toolbarRoles"
   data-search="true"
   data-show-refresh="true"
   data-show-toggle="true"
   data-show-columns="true"
   data-show-export="true"
   data-detail-view="false"
   data-minimum-count-columns="2"
   data-show-pagination-switch="true"
   data-pagination="true"
   data-id-field="RoleID"
   data-page-list="[10, 25, 50, 100, ALL]"
   data-show-footer="false"
   data-side-pagination="server"
   data-url="modules/registrarRoles/getRoles.php"
   data-sort-name="RoleID"
   data-sort-order="asc"
   data-row-style="rowStyleRoles">
</table>

<table id="tableUsers"
 data-toolbar="#toolbar"
 data-search="true"
 data-show-refresh="true"
 data-show-toggle="true"
 data-show-columns="true"
 data-show-export="true"
 data-detail-view="false"
 data-detail-formatter="detailFormatter"
 data-minimum-count-columns="2"
 data-show-pagination-switch="true"
 data-pagination="true"
 data-id-field="UserID"
 data-page-list="[10, 25, 50, 100, ALL]"
 data-show-footer="false"
 data-side-pagination="server"
 data-url="modules/registrarUsuarios/getUsuarios.php"
 data-response-handler="responseHandler"
 data-sort-name="UserID"
 data-sort-order="asc"
 data-row-style="rowStyle">
</table>

---

是否存在两次桌子停留在同一位置的可能性？你可以看到浏览器的两个元素吗？不，它们位于不同的位置，我将更新一个图片，是否有可能两次将表保留在同一位置？你们可以看到浏览器的两个元素吗？不，它们在不同的位置，我会更新一张图片

var $tableRoles = $('#tableRoles'),
    data, 
    selections = [];
    console.log('working');
function initTable() {
    $tableRoles.bootstrapTable({
        height: getHeight(),
        columns: [
            [
                {
                    title: 'Roles',
                    colspan: 8,
                    align: 'center'
                }
            ],
            [
                {
                    field: 'RoleID',
                    title: 'ID',
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    searchable: true,
                    footerFormatter: totalTextFormatter
                }, {
                    field: 'RoleName',
                    title: 'Nombre de Rol',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Description',
                    title: 'Descripcion',
                    sortable: true,
                    align: 'center',
                    footerFormatter: totalNameFormatter
                }, {
                    field: 'RoleGroupID',
                    title: 'Grupo',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Status',
                    title: 'Status',
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    searchable: true,
                    footerFormatter: totalTextFormatter
                },{
                    field: 'activeFromDate',
                    title: 'Activo Desde',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'activeUntilDate',
                    title: 'Activo Hasta',
                    sortable: true,
                    align: 'center'
                },  {
                    field: 'operate',
                    title: 'Acciones',
                    align: 'center',
                    events: operateEventsRoles,
                    formatter: operateFormatterRoles
                }
            ]
        ]
    });