Refresh datatable in JS function using previously declared datatable inside jquery onReady

Question

Please see my code and look at oTable variable in which I have stored my DataTable to do some actions like refreshing it later. When I'm deleting a record and trying to use oTable inside my deleteProduct() function, it's showing me oTable is not defined. Is there a way to get rid on this?

$(document).ready(function(){
var oTable = $('#products').DataTable(
    {
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "bAutoWidth": true,
        "pageLength": 25,
        'columnDefs': [
            {
                "targets": [0],
                "visible": true,
                "sortable": true,
                "responsivePriority": 0,
                "searchable": true
            },
            {
                "targets": [1],
                "visible": true,
                "sortable": true,
                "responsivePriority": 1,
                "searchable": true
            },
            {
                "targets": [2],
                "visible": true,
                "sortable": false,
                "responsivePriority": 2,
                "searchable": false,
                className: "JustifyText"
            },
            {
                "targets": [3],
                "visible": true,
                "sortable": false,
                "responsivePriority": 3,
                "searchable": false,
                "width":"8%"
            },
            {
                "targets": [4],
                "visible": true,
                "sortable": false,
                "responsivePriority": 4,
                "searchable": false
            },
            {
                "targets": [5],
                "visible": true,
                "sortable": false,
                "responsivePriority": 4,
                "searchable": false
            },
        ],
        initComplete: function() {
            var api = this.api();
            var throttle;
            $(".dataTables_filter input").unbind().bind("input", function(e) {
                var item = $(this);
                if (!throttle)
                    throttle = setInterval(function() {
                        searchTerm = $.trim($(item).val());
                        $(item).val(searchTerm);
                        clearInterval(throttle);
                        throttle = '';
                        api.search(searchTerm).draw();
                    }, 1500);
                return;
            });
        },
        "ajax": {
            url     : 'get-products',
            type    : "post",
            "data"  : function (d) {
                d.status    = $("input[name='status[]']").map(function(){
                                if($(this).prop("checked") == true) return $(this).val();
                                return ;
                            }).get();
                d.action    = "/get-products";
                
            },
            error: function () { 
                $(".products-error").html("");
                $("#products").append('<tbody class="products-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
            }
        },
        "fnDrawCallback": function (oSettings) {
            var page_length = oSettings._iDisplayLength;
            var filtered_records = oSettings.json.recordsFiltered;
            if (filtered_records <= page_length) {
                $('#products_paginate').hide();
            } else {
                $('#products_paginate').show();
            }
        }
    }
);
});


function deleteProduct(id) {
            $.ajax({
                url: 'deleteProduct.php',
                type: "post",
                data: {"id":id },
                async: false,
                dataType: "json",
                success: function (data) {
                        alert('Deleted');
                        setTimeout(function () {
                            oTable.ajax.reload();
                        }, 500);
                      
                },
                error: function () {
                    alert('Not Deleted');
                }
            });
}

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/fc-3.2.2/fh-3.1.2/r-2.1.0/sc-1.4.2/datatables.min.css" />
</head>
<body>
<table class="table table-striped dataTable" id="products">

                                    <thead>
                                        <tr>
                                            <th >Product Name</th>
                                            <th >Product Color</th>
                                            <th >Price</th>
                                            <th >Type</th>
                                            <th >Stock</th>
                                            <th >Free Shipping</th> 
                                            <th class="tbl_sfl_6">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                            <td >Waching machine</td>
                                            <td >Grey</td>
                                            <td >$150</td>
                                            <td >Electric</td>
                                            <td >22</td>
                                            <td >Yes</td> 
                                            <td ><a href="#" onclick="deleteProduct(1)">Delete</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                                </body>
</html>

While you could declare the variable outside and then assign to it inside (leave off the `var` inside) - it sounds like you have an inline handler that needs access to it, which [may only reference global variables](https://stackoverflow.com/a/59539045), in which case a much better approach would be to add the event listener properly using JavaScript instead. eg `$('someButton').on('click', () => console.log(name));` — CertainPerformance, Jul 13 '22 at 06:48
hi, @CertainPerformance i've updated my question. hope this can explain what i need to do. however, your suggestion make sense but not resolving my issue. — Nads, Jul 13 '22 at 07:15
It sure will - all you need to do is refactor the inline handlers (which are terrible practice) to proper event handlers — CertainPerformance, Jul 13 '22 at 07:16

Refresh datatable in JS function using previously declared datatable inside jquery onReady

0 Answers0