Question

我有一个模式窗体，该窗体将新行添加到BootstrapTable中。我希望在成功提交表单后重新加载表格，而不重新加载整个页面。

我尝试过：

$('#table').bootstrapTable('refresh');

但是不起作用。我如何实现自己想要的？

这是BootstrapTable：

<table class="table-striped" id="table" data-toggle="table"
                         data-search="true"
                         data-filter-control="true"
                         data-click-to-select="true"
                         data-escape="false"
                         >
                    <thead>
                        <tr>
                            <th data-field="name" data-filter-control="input" data-sortable="true" data-sorter="linksSorter" scope="col"><?= __('Title') ?></th>

                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($tasks as $task):
                            <tr>
                                 <td><?= $task->has('name') ? $this->Html->link($task->name, ['controller' => 'Tasks', 'action' => 'edit', $task->id], ['data-target' => '#exampleFormModal', 'data-toggle'=>'modal']) : '' ?></td>
                            </tr>

                        <?php endif;
                         endforeach; ?>
                    </tbody>
                </table>

这是表单提交的jquery代码：

$(function () {
    $("#DAbtn").click(function () { //Direct Assign button

        //e.preventDefault(); // avoid to execute the actual submit of the form.
        var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "btn").val("Direct Assign");
        $('#newTaskForm').append(input);
        var task = $("#newTaskForm").serialize();


        $.ajax({
            type: 'POST',
            url: '/app/tasks/createTask',
            datatype: 'json',
            data: task,
            success: function( data )
            {
                $('.modal').modal('hide');
                $(".success").fadeIn(500).delay(2000).fadeOut(500);
                $("#newTaskForm")[0].reset();
                clearForm("newTaskForm");

                $('#table').bootstrapTable('refresh');
            }
        });

        return false;

    });
});

这是控制器代码（createTask函数）：

public function createTask($userid = null, $projectid = null, $copiedtaskid = null)
    {
        $this->viewBuilder()->layout(false);
        $this->autoRender = false;
        $http = new Client();


        $task = $this->Tasks->newEntity();
        if ($this->request->is('ajax')) {  
             //....code to create the task......
        }
        $this->response->statusCode(200);
        return $this->response;
}

Answer 1

这是我执行Ajax表单提交的方式：

1。将您的BootstrapTable代码放在一个元素中。

2。在您的经典视图中，您需要调用新创建的元素以显示BootstrapTable（带有适当的$ argumentsArray）。加上标签以供以后的ajax使用：

echo '<div id="container">'.$this->Element('element_name', $argumentsArray).'</div>';

3。确保控制器createTask函数返回元素所需的内容。例如，您需要

$this->set('tasks', $tasks);

您还需要使用它来渲染元素：

$this->render('element_name', 'ajax');

4。替换成您的ajax成功案例：

$('#table').bootstrapTable('refresh');

作者

$('#container').html(data);

Cakephp 3.6.14：以新内容提交Ajax表单后重新加载BootstrapTable内容

1 个答案: