Javascript 刷新引导表

Refresh Bootstrap-table

提问by André Albson

The problem is that I cannot make the table (bootstrap-table) update the data after completion of the registration. I'm trying to do it via JS, but without success. I've tried the following:

问题是我无法bootstrap-table在注册完成后使表 ( ) 更新数据。我正在尝试通过 JS 来做到这一点，但没有成功。我尝试了以下方法：

JS

JS

$.post($form.attr('action'), $form.serialize(), function (result) {
    if (result.status == "true") {
        $(location).attr('href', result.acao.url);
    } else {
        $('#cargo').formValidation('resetForm', true)
        $('#cadastroCargo').modal('hide')
        //ATTEMPT  REFRESH BOOTSTRAP-TABLE:
        $('#teste').bootstrapTable('refresh')
    }
}, 'json');

HTML/PHP

HTML/PHP

    <button class="btn btn-primary pull-right btn-import-user btn-sm" data-toggle="modal" data-target="#cadastroCargo">Novo Cadastro</button>

<!-- Modal -->
<div class="modal fade" id="cadastroCargo" tabindex="-1" data-keyboard="false" data-backdrop="static" role="dialog" aria-labelledby="cargoLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="cargo" action="Cargo/inserir" method="POST" enctype="multipart/form-data" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="cargoLabel">Cadastrar Cargo</h4>
                </div>
                <div class="modal-body">
                    <fieldset>
                        <div class="form-group">
                            <label class="modal-font-body control-label">Informe o Cargo</label>
                            <input name="titulo" type="text" class="form-control input-sm" id="titulo" data-minlength="4" size="35" value="<?= @$cargo->titulo ?>" data-error="Por favor, preencha este campo corretamente!" required>
                            <input type="hidden" name="id"  value="<?= @$cargo->id ?>">
                            <input type="reset" id="configreset" value="reset" hidden>
                        </div>
                        <div id="mensagemSucesso" class="alert alert-success alerta-sucesso" hidden></div>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <input type="submit" id="salvar" value="Salvar" name="salvar" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
</div> 

<table id="teste" name="teste" class="table table-striped" data-toggle="table" data-search="true" data-show-refresh="true" data-show-columns="true"
    <thead>
        <tr>
            <th class="th-small" data-align="left" data-sortable="true">ID</th>
            <th data-align="left" data-sortable="true">Nome</th>
            <th class="th-small">A??es</th>
        </tr>
    </thead>
    <tbody>
        <?php
        foreach ($cargo as $key => $v) {
        ?>
            <tr>
                <td><?= $v->id ?></td>
                <td><?= $v->titulo ?></td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                        <ul class="table-modal dropdown-menu">
                            <li><a data-remote="Cargo/page/visualizar/<?= $v->id ?>" role="button" data-toggle="modal" data-target="#select-modal">Visualizar</a></li>
                            <li><a data-remote="Cargo/page/alterar/<?= $v->id ?>" data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                        </ul>
                    </div>  
                </td>
            </tr>
        <?php } ?>
    </tbody>        
</table>

回答by Yevgeniy Afanasyev

1) fill up html tag on the table named data-url

1) 在名为的表上填写 html 标签 data-url

2) when refresh needed call js function $('#teste').bootstrapTable('refresh')

2）需要刷新时调用js函数 $('#teste').bootstrapTable('refresh')

回答by Daniel Brose

Ofcourse it cant refresh, you havent followed the doco or examples to use a data source that can be refreshed.

当然不能刷新，你没有按照doco或者examples使用可以刷新的数据源。

http://bootstrap-table.wenzhixin.net.cn/documentation/

http://bootstrap-table.wenzhixin.net.cn/documentation/

http://issues.wenzhixin.net.cn/bootstrap-table/

http://issues.wenzhixin.net.cn/bootstrap-table/

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/refresh.html

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/refresh.html

You are using data from htmltype approach, NOT a data-url.

您正在使用data from html类型方法，而不是data-url.

As your printing to the page using php when page first requested, how do you expect the table to know where to get refreshed data from?

当您在第一次请求页面时使用 php 打印到页面时，您如何期望表格知道从哪里获取刷新的数据？

Easier just to fix how you create table, that way you still have dropdowns and ect.

更容易修复你创建表格的方式，这样你仍然有下拉菜单等等。

Look at examples and doco links above and:

查看上面的示例和 doco 链接，以及：

1. Use formattercolumn option to make your dropdowns
2. data-urlto load from data source, see doco for example format
3. just define TH using html, using those 2 new options to handle tbody content

1. 使用formatter列选项制作下拉菜单
2. data-url要从数据源加载，请参阅 doco 示例格式
3. 只需使用 html 定义 TH，使用这 2 个新选项来处理 tbody 内容

Table Options

表选项

https://bootstrap-table.com/docs/api/table-options/https://bootstrap-table.com/docs/api/table-options/

---

---

table#url

表#url

https://bootstrap-table.com/docs/api/table-options/#url

https://bootstrap-table.com/docs/api/table-options/#url

• Attribute:data-url

• Type:String

• Detail:

  A URL to request data from remote site.

  Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples:

  • Without server-side pagination
  • With server-side pagination

• Default:undefined

• Example:From URL

• 属性：data-url

• 类型：字符串

• 细节：

  从远程站点请求数据的 URL。

  请注意，根据是否指定了 'sidePagination' 选项，所需的服务器响应格式会有所不同。请参阅以下示例：

  • 没有服务器端分页
  • 使用服务器端分页

• 默认值：未定义

• 示例：来自 URL

---

---

table#rowStyle (for styling ALL body columns)

table#rowStyle（用于设置所有正文列的样式）

https://bootstrap-table.com/docs/api/table-options/#rowstyle

https://bootstrap-table.com/docs/api/table-options/#rowstyle

• Attribute:data-row-style

• Type:Function

• Detail:

  The row style formatter function, takes two parameters:

  • row: the row record data.
  • index: the row index.

  Support classes or css.

• Default:{}

• Example:Row Style

• 属性：数据行样式

• 类型：功能

• 细节：

  行样式格式化函数，有两个参数：

  • row：行记录数据。
  • index：行索引。

  支持类或 css。

• 默认值：{}

• 示例：行样式

---

---

column#formatter (per-column option)

column#formatter（每列选项）

https://bootstrap-table.com/docs/api/column-options/#formatter

https://bootstrap-table.com/docs/api/column-options/#formatter

• Attribute:data-formatter

• Type:Function

• Detail:

  The context (this) is the column Object.

  The cell formatter function, take three parameters:

  • value: the field value.
  • row: the row record data.
  • index: the row index.
  • field: the row field.

• Default:undefined

• 属性：数据格式化程序

• 类型：功能

• 细节：

  上下文（this）是列对象。

  单元格格式化函数，取三个参数：

  • 值：字段值。
  • row：行记录数据。
  • index：行索引。
  • 字段：行字段。

• 默认值：未定义