单击按钮后如何重新加载数据表?

时间:2019-04-19 17:14:30

标签: jquery ajax laravel datatable

我有一个按钮“添加数据”,单击“添加数据”时,数据表的数据将增加。但尚未自动加载(仍然手动重新加载)。如果在自动重载数据表上单击“添加数据”按钮,怎么办?

<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);

感谢您的时间

2 个答案:

答案 0 :(得分:3)

我认为您对这样的东西感兴趣:

$(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

答案 1 :(得分:0)

请检查以下代码:

<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>