单击按钮时如何重新加载数据表？

Posted 2023-03-14

【中文标题】单击按钮时如何重新加载数据表？

【英文标题】：How do I reload the datatables when I click the button?

【发布时间】：2019-09-09 22:25:02

【问题描述】：

我有按钮“添加数据”，当点击“添加数据”时，数据表会增加数据。但它没有自动加载（仍在手动重新加载）。如果点击自动重新加载数据表上的“添加数据”按钮怎么办？

<script>
$(function() 
    $('#users-table').DataTable(
        processing: true,
        serverSide: true,
        ajax: '/krs/daftarPengajuan',
        columns: [
             data: 'kode_mk', name: 'kode_mk' ,
             data: 'nama_mk', name: 'nama_mk' ,
             data: 'jml_sks', name: 'jml_sks' ,
             data: 'semester', name: 'semester' ,
             data: 'action', name: 'action' 


        ]
    );

);
</script>

控制器

$result = \DB::table('matakuliah')

           ->leftJoin('kurikulum','matakuliah.kode_mk','=','kurikulum.kode_mk')
           ->where('matakuliah.kode_mk',$row->kode_mk)
           ->where('kode_jurusan',$jurusan)
           ->get();
 
 return Datatables::of($result)
  ->addColumn('action', function ($row) 
   $action = '<button class="btn btn-info btn-sm add-data" onClick="tambah_pengajuan(\''.$row->kode_mk.'\',\''.$row->semester.'\')"><i class="fas fa-plus-square"></i> Ambil</button>';

  return $action;
  )

->make(true);

感谢您的时间

【参考方案1】：

我想你对这样的事情很感兴趣：

$(document).ready(function() 
    var t = $('#users-table').DataTable(... // your datatable configuration 
    $('.add-data').on( 'click', function () 
        t.row.add( [
            'data',
            'goes',
            'in',
            'each',
            '<td>'
        ] ).draw( false );
      );

    // Automatically add a first row of data
    $('.add-data').click();
 );

更多go here.

如果您对从 API 重新加载数据感兴趣，可以执行以下操作：

t.ajax.reload(); 

要了解有关此go here 的更多信息。

【参考方案2】：

请检查以下代码：

<script>
$(function() 
   var user_tbl = $('#users-table').DataTable(
        processing: true,
        serverSide: true,
        ajax: '/krs/daftarPengajuan',
        columns: [
             data: 'kode_mk', name: 'kode_mk' ,
             data: 'nama_mk', name: 'nama_mk' ,
             data: 'jml_sks', name: 'jml_sks' ,
             data: 'semester', name: 'semester' ,
             data: 'action', name: 'action' 


        ]
    );
    $('body').on('click', 'a', function() 
        user_tbl.ajax.reload(null,false);
    );
);
</script>