CODEWITHSUNDEEP
jqueryajaxlaraveldatatable
Tammam
Tammam

Reputation: 438

How do I reload the datatables when I click the button?

I have button "add data", When "add data" is clicked, the datatables will increase in data. but it hasn't been loaded automatically (still reloading manually). how so if the "add data" button is clicked on the automatic reload datatables?

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

Controller

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

Thanks for time

Upvotes: 0

Views: 1490

Answers (2)

Jaimin Rlogical
Jaimin Rlogical

Reputation: 266

Please check below code:

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

Upvotes: 0

Rajan
Rajan

Reputation: 1497

I think you are interested with something like this:

$(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();
} );

For more go here.

If you are interested in reloading data from the API, you can do something like this:

t.ajax.reload();

To learn more on this go here.

Upvotes: 4

Related Questions