Implement inline grid editing as global function

Question

Hello I have tried to implement inline grid editing in my datatable .It's working.... But I need to implement the inline editing in other tables .... So I would like to make a global function for this .....

But it shows some error .... This is my code ....

var slug='sales'

window.drawDataTable = function(){

        "columnDefs": [
            {
                targets: [10,11,27,28],
                render:function(data){
                    return moment(data).format('LLLL');
                },
            },
             {'targets': '_all',
                'createdCell':  function (td, cellData, rowData, row, col) {
                   $(td).attr('data-pk', rowData['id']);
                   const key = Object.keys(rowData)[Object.values(rowData).indexOf(cellData)];
                   $(td).attr('data-name', key );
               }},
            { targets: [0,1], className: ""},
            //{targets:'_all',className:"querytruncate"},
            {
                "targets": [29,30],
                "orderable": false
            }
        ],
        "fnDrawCallback":function(){
              $('#data_table_list td').editable({
               params: function(params) {
                    var pk = $(this).data('pk');
                    var name = $(this).data('name');
                    var data = {};
                    data['field'] = name;
                    data['value'] = params.value;
                    data['id'] = pk;
                    data['slug']=slug;
                    return data;
               },
               url: "{% url 'request_access' %}",
                 success : function(data) {
                 if (data.status == true) {
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function () {
                    toastr.error('Something went wrong');
                }
             });
        },

}

So I try to implement like this.... in my core.js

           function inline(slug){
                  $('#data_table_list td').editable({
                   params: function(params) {
                        var pk = $(this).data('pk');
                        var name = $(this).data('name');
                        var data = {};
                        data['field'] = name;
                        data['value'] = params.value;
                        data['id'] = pk;
                        data['slug']=slug;
                        return data;
                   },
                   url: "{% url 'request_access' %}",
                     success : function(data) {
                     if (data.status == true) {
                            toastr.success(data.msg);
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function () {
                        toastr.error('Something went wrong');
                    }
                 });
            }

and in my html

        "columnDefs": [
            {
                targets: [10,11,27,28],
                render:function(data){
                    return moment(data).format('LLLL');
                },
            },
             {'targets': '_all',
                'createdCell':  function (td, cellData, rowData, row, col) {
                   $(td).attr('data-pk', rowData['id']);
                   const key = Object.keys(rowData)[Object.values(rowData).indexOf(cellData)];
                   $(td).attr('data-name', key );
               }},
            { targets: [0,1], className: ""},
            //{targets:'_all',className:"querytruncate"},
            {
                "targets": [29,30],
                "orderable": false
            }
        ],
        "fnDrawCallback": inline(slug),