Question

我有一张桌子，上面满是数据库的记录。另外，我还有一个按钮来添加新记录。输入新记录的所有数据并按提交按钮后，我想在不重新加载页面的情况下更新表的内容（不使用F5）。我正在努力寻找解决方案，因此欢迎提出任何建议。

这是我的代码。

数据库

db.define_table('Student',
                Field('name', 'string', label='Name'),
                Field('last_Name', 'string', label='Last Name'),
                Field('age', 'integer', label='Age'),
                Field('nationality', 'string', label='Nationality'),
               )

控制器（Tools.py）

def studentNew():
    formStudent=crud.create(db.Student)
    if formStudent.accepted:
        response.js = '(function($) {$("#myModalADD").modal("hide");}(jQuery));'  //hide modal after press submit button
        response.flash = 'Record added successfully!' //displays message after press submit
    return dict(formStudent=formStudent)

查看

<script>
    $(document).ready(function(){
       tabla= $('#table').DataTable( {
           'scrollX': true,
           'responsive':true,
           'sRowSelect': "single",
          });
</script>

<div id="some_btn"><a class="btn btn-success btn-mini" data-target="#myModalADD" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="icon-search icon-white"></i> Add New Student</a></div>

<table id="table" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
   <thead>
       <tr>
          <th>Name</th>
          <th>Last Name</th>
          <th>Age</th>
          <th>Nationality</th>
       </tr>
    </thead>
    <tbody>
        {{for student in formListar:}}
            <tr>
                <td>{{=student.Student.name}}</td>
                <td>{{=student.Student.last_name}}</td>
                <td>{{=student.Student.age}}</td>
                <td>{{=student.Student.nationality}}</td>
            </tr>
        {{pass}}
    </tbody>
</table>

<div id="myModalADD" class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <h4 class="modal-title">Add New Student</h4>
      </div>
      <div class="modal-body"> {{=LOAD('Tools','studentNew', ajax=True, ajax_trap=True)}}</div>
      <div class="modal-footer">
          <div class="col-md-6 col-md-offset-3 ">
        <button type="button" id="cancelar" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
         </div>
      </div>
    </div>
  </div>
</div>

提交操作后更新表内容

0 个答案: