Editor Buttons Not showing up

djustus

My Editor buttons are not showing up.
I have a table that is supposed to display info based on the type of record it is retrieving.
The create, edit, remove buttons dont show up on my table.
As well:
My table columns are fetched dynamically and pushed to an array so it can be used.

The editor fields seem to be set in a static way, so I cant find a way to add them correctly,
This makes it so i cannot edit inline

/***
 * Client side script to process Datatable for Payment Schedule
 * main is created with possibility of exposing functions but nothing is exposed right now except round
 * @context : pSchedule
 */
; //in case of namespace pollution, close any open client side script.
/**
 * Important to pass jQuery
 * @param $
 * @param pSchedule
 * @param window
 * @param document
 * @param undefined
 */

var mainSsu = 'https://system.sandbox.netsuite.com/app/site/hosting/scriptlet.nl?script=808&deploy=1&compid=173762&columns=';
$(document).ready(function() {
    //  var suiteletTable = $('#ps_mainsuitelet').DataTable();
    var recordId = $('#recordid').val();
    var recordType = $('#recordtype').val();
    var columns = $('#columns').val();
    console.log(columns);
    var columnslabels = $('#columnlabels').val();
    console.log(recordId + ' ' + recordType + ' ' + columnslabels);
    var headers = '';
    columnHeadersArray = columnslabels.split(',');

    $('#ps_mainsuitelet thead tr').append('<th>LineId</th>');
    for (var i = 0; i < columnHeadersArray.length; i++) {
        $('#ps_mainsuitelet thead tr').append('<th>' + columnHeadersArray[i] + '</th>');
    }

if(recordType == "salesorder")
{
    var editor = new $.fn.dataTable.Editor({
        ajax : '/api/staff',
        table : '#ps_mainsuitelet',
        fields : [
        {
            label : 'Do Not Print',
            name : 'custcol_dont_print_line_item',
        }, 
        {
            label : 'Line',
            name : 'line',
        },
        {
            label : 'Mfg Code',
            name : 'first_name',
        },
        {
            label : 'PO Vendor',
            name : 'povendor', 
        }
                ]
    });

}
    //  var url = mainSsu + '&recordInternalId=' + recordId + '&recordType=' + recordType + '&actiontype=setValues';
    jQuery.get(mainSsu + encodeURIComponent(columns) + '&recordInternalId=' + recordId + '&recordType=' + recordType, {
        actiontype : 'setValues'
    }).done(function(data) {
        console.log(data);
        createMainDataTable(data);

    });



    
    var mainSuiteletTable;
    function createMainDataTable(data) {
        mainSuiteletTable = $('#ps_mainsuitelet').DataTable({
            data : JSON.parse(data),

            fixedHeader : {
                header : true
            },
            paging : false,

            select : {
                style : 'os',
                selector : 'td:first-child'
            },

            buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
                    ],

            columnDefs : [{
                className : 'select-checkbox',
                targets : 0

            }, 

                    
            {
                className : 'select-checkbox',
                targets : [1],
                visible : false,
                searchable : false
            }]
        });
    }

    var selected = [];
    $('#checkboxes input:checked').each(function() {
        selected.push($(this).attr('name'));
    });

    // Activate an inline edit on click of a table cell
    $('#ps_mainsuitelet').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#delete_button').click(function() {
        console.log('clicked button');
        var ids = $.map(mainSuiteletTable.rows('.selected').data(), function(item) {
            return item[1];
        });
        console.log(ids);
        var ids_string = ids.toString();
        //      var ids_to_send = jQuery.serialize(ids);
        jQuery.ajax({
            type : "POST",
            url : mainSsu + '&recordInternalId=' + recordId + '&recordType=' + recordType,
            data : {
                actiontype : 'delete',
                lineIds : ids_string
            },
            success : function(result) {
                console.log('draw');
                mainSuiteletTable.ajax.reload();
                //              mainSuiteletTable.draw(); // redrawing datatable
            }
        });
    });

});

allan

Hi,

Thanks for the code and screenshot. It looks like the dom parameter is missing from the DataTables initialisation. That option tells DataTables where to put the buttons in the DOM that it creates. You might use:

dom: "Bfrtip",

An example of which is available here.

There is also more detailed information about this available in the documentation.

Regards,
Allan