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

Question

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

Rajan · Accepted Answer · 2019-04-19 17:36:00Z

4

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.

edited Apr 19, 2019 at 17:36

answered Apr 19, 2019 at 17:30

Rajan

1,49714 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaimin Rlogical · Accepted Answer · 2019-04-20 06:24:20Z

0

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>

answered Apr 20, 2019 at 6:24

Jaimin Rlogical

2661 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related