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

【问题标题】：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);

感谢您的时间

【问题讨论】：

标签： jquery ajax laravel datatable

【解决方案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>

【讨论】：