update datatable with button

Question

i have script to load data in datatable, data have successfull load to table, then i want to try update when datatable if new data inserted in database where is show in json, i try update datatable with auto refresh it's just update the json from ajax. then i try to update datatable with button with id refresh but still not working: have ide ?

<button id="Refresh" type="button">Refresh</button>



 $(function dataQR () {
                     $('#showQR').on('show.bs.modal', function(e) {

                     $("#code").empty();
                     $("#code").qrcode($(e.relatedTarget).data('id'));
                 });


                $.ajax({
                    url: "/report/dataGenerateQR.html",
                    dataType: "json",
                    method: "GET",
                    success: function (response) {
                        console.log("Response : "+ response);

                      var table =  $('#QRTable').dataTable({
                            data: response,
                            retrieve: true,
                            paging: true,
                            searching: true,
                            //destroy: false,
                            columns: [
                                {'data': 'amount',"render": $.fn.dataTable.render.number(',', '.', 2, 'Rp. ')},
                                {'data': 'createdate'},
                                {
                                    "data": "codeqr",
                                    "render": function(data, type, row, meta){
                                        if(type === 'display') {
                                            data = '<a href="#showQR" class="fa fa-qrcode" data-toggle="modal" data-target="#showQR" data-id="'+ data +'" style="font-size: 1.6em;"></a>';
                                        }
                                        return data;
                                    },
                                    "orderable": false
                                }
                            ]

                        });



                        //$('#QRTable').dataTable().api().ajax.reload();
                        $(".dataTables_filter input").addClass("form-control");
                        $(".dataTables_length select").addClass("form-control");

                        $("#Refresh").click(function(){
                            table.fnReloadAjax();
                            table.fnDraw();
                        })
                    },

                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log("error bro :"+textStatus);
                    }
                });
                setTimeout(dataQR,2000);
            });

any clue ? thank you.

Answer 1

Here is my solution. I hope it will help you :)

<script> var TableDatatablesAjax = function() {
var e = function() {
        var a = new Datatable;
        a.init({
            src: $("#QRTable"),
            onSuccess: function(a, e) {},
            onError: function(a) {},
            onDataLoad: function(a) {},
            loadingMessage: "Loading...",
            dataTable: {
                lengthMenu: [
                    [10, 20, 50, 100, 150, -1],
                    [10, 20, 50, 100, 150, "All"]
                ],
                 "columnDefs": [ {
                      "targets": 'no-sort',
                      "orderable": false,
                } ],
                pageLength: 10,
                processing: true,
                serverSide: true,
                bFilter:true,
                //pagingType: "full_numbers",
                ajax: {
                    url: "/report/dataGenerateQR.html",
                    data: function ( d ) {
                     d.customLabel='customValue';
                    // d.custom = $('#myInput').val();
                    // etc
                   }
                }, 
                //ordering: !1,
                order: [
                    [1, "asc"]
                ]
            }
        })
    };
return {
    init: function() {
         e()
    }
} }();
jQuery(document).ready(function() {
TableDatatablesAjax.init();

//
$('#replace_with_button_id').click(function()
 {
      var QRTable = $('#QRTable').DataTable();
       QRTable.ajax.reload();
 });

Answer 2

Try this before fnDraw():

   table.dataTable().fnDestroy();