var editor; // use a global for the submit and return data rendering in the examples

​

            function selectColumns ( editor, csv, header ) {

                var selectEditor = new $.fn.dataTable.Editor();

                var fields = editor.order();

​

                var toUpdate = []; // array of records to update

                var toUpdateIds = []; // array of the IDs of the records to update

​

                var toCreate = []; // array of the records to create

                var table = $('#vocabulary').DataTable();

                var fieldData;

                function parseCSV(PKField) {

                    var colData = table.column(0).data().toArray();

                    for (var j =0; j < csv.length; j++){

                        var get_CSV_ID = csv[j][PKField];

​

                        toCreate = colData.filter((number) => {

                            return number = colData.includes(get_CSV_ID);

                        });

​

                        console.log("2: " + toCreate);

                        toCreate.push(csv[j]);

                    }

                }

​

                function createRecords() {

                    if (toCreate.length > 0) {

                        editor.create(toCreate.length, {

                            title: 'Confirm import',

                            buttons: 'Submit',

                            message: 'Click the <i>Submit</i> button to confirm the import of ' + toCreate.length + ' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'

                        });

                        for (var i = 0; i < fields.length; i++) {

                            var field = editor.field(fields[i]);

                            var mapped = fieldData[field.name()];

                            for (var j = 0; j < toCreate.length; j++) {

                                field.multiSet(j, toCreate[j][mapped]);

                            }

                        }

                    }

                }

​

​

                for ( var i=0 ; i<fields.length ; i++ ) {

                    var field = editor.field( fields[i] );

                    selectEditor.add( {

                        label: field.label(),

                        name: field.name(),

                        type: 'select',

                        options: header,

                        def: header[i]

                    } );

                }

​

                selectEditor.create({

                    title: 'Map CSV fields',

                    buttons: 'Import '+csv.length+' records',

                    message: 'Select the CSV column you want to use the data from for each field.',

                    onComplete: 'none'

                });

                selectEditor.on('submitComplete', function(e, json, data, action) {

                fieldData = data;

                var getID= data[editor.field('id').name()];

​

                parseCSV(getID);

​

                if (toUpdate.length > 0) {

                    editor.one('submitComplete', function() {

                        createRecords();

                    });

                } else {

                    createRecords();

                }

            });

            }

​

​

            $(document).ready(function() {

                editor = new $.fn.dataTable.Editor( {

                    ajax: "editor/extension/staff.php",

                    table: "#vocabulary",

                    fields: [ 

                        {

                        label: "A/A:",

                        name: "id"

                        },

                        {

                            label: "Ideogram:",

                            name: "ideogram"

                        }, {

                            label: "pinyin:",

                            name: "pinyin"

                        }, {

                            label: "type:",

                            name: "type"

                        }, {

                            label: "meaning:",

                            name: "meaning"

                        }

                    ]

                } );

​

                var uploadEditor = new $.fn.dataTable.Editor( {

                    fields: [ {

                        label: 'CSV file:',

                        name: 'csv',

                        type: 'upload',

                        ajax: function ( files, done ) {

                            Papa.parse(files[0], {

                                header: true,

                                skipEmptyLines: true,

                                complete: function (results) {

                                    if ( results.errors.length ) {

                                        console.log( results );

                                        uploadEditor.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );

                                    }

                                    else {

                                        selectColumns( editor, results.data, results.meta.fields );

                                    }       

                                    done([0]);

                                }

                            });

                        }

                    } ]

                } );

                            $('#vocabulary').DataTable( {

                    dom: "Bfrtip",

                    order: [[ 1, 'asc' ]],

                    columns: [

                        {

                            data: null,

                            defaultContent: '',

                            className: 'select-checkbox',

                            targets:   0,

                            orderable: false

                        },

                        { data: "id"},

                        { data: "ideogram" },

                        { data: "pinyin" },

                        { data: "type" },

                        { data: "meaning" }

                    ],

                    select: {

                        style:    'os',

                        selector: 'td:first-child'

                    },

                    buttons: [

                        { extend: "create", editor: editor },

                        { extend: "edit",   editor: editor },

                        { extend: "remove", editor: editor },

                        {

                            extend: 'csv',

                            text: 'Export CSV',

                            className: 'btn-space',

                            exportOptions: {

                                orthogonal: null

                            }

                        },

                        {

                            text: "Copy",

                            action: function ( e, dt, node, config ) {

                                var tblData = this.rows('.selected').data();

                                //console.log(tblData);

                                var tmpData;

                                var count=0;

                                $.each(tblData, function(i, val) {

                                    tmpData = tblData[i];

                                    count = count + 1;

                                    $.post('testing.php', {

                                        data: tmpData

                                    }, function(response) {

                                        //$('#content').html(response);

                                        console.log(response);

                                    });

                                });

                                console.log(count); 

                            }

                        },

                        {

                            text: 'Import CSV',

                            action: function () {

                                uploadEditor.create( {

                                    title: 'CSV file import'

                                } );

                            }

                        },

                        {

                            extend: 'selectAll',

                            className: 'btn-space'

                        },

                        'selectNone',

                    ]

                } );

            } );