// Use a global for the submit and return data rendering in the examples. // Don't do this outside of the Editor examples! var editor; // Display an Editor form that allows the user to pick the CSV data to apply to each column function selectColumns ( editor, csv, header ) { var selectEditor = new $.fn.dataTable.Editor(); var fields = editor.order(); 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) { // Use the host Editor instance to show a multi-row create form allowing the user to submit the data. editor.create( csv.length, { title: 'Confirm import', buttons: 'Submit', message: 'Click the <i>Submit</i> button to confirm the import of '+csv.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 = data[ field.name() ]; for ( var j=0 ; j<csv.length ; j++ ) { field.multiSet( j, csv[j][mapped] ); } } } ); } $(document).ready(function() { // Regular editor for the table editor = new $.fn.dataTable.Editor( { ajax: "../php/staff.php", table: "#example", fields: [ { label: "First name:", name: "first_name" }, { label: "Last name:", name: "last_name" }, { label: "Position:", name: "position" }, { label: "Office:", name: "office" }, { label: "Start date:", name: "start_date", type: "datetime" }, { label: "Salary:", name: "salary" } ] } ); // Upload Editor - triggered from the import button. Used only for uploading a file to the browser var uploadEditor = new $.fn.dataTable.Editor( { fields: [ { label: 'CSV file:', name: 'csv', type: 'upload', ajax: function ( files, done ) { // Ajax override of the upload so we can handle the file locally. Here we use Papa // to parse the CSV. 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 ); } // Tell Editor the upload is complete - the array is a list of file // id's, which the value of doesn't matter in this case. done([0]); } }); } } ] } ); $('#example').DataTable( { dom: 'Bfrtip', ajax: "../php/staff.php", columns: [ { data: 'first_name' }, { data: 'last_name' }, { data: "position" }, { data: "office" }, { data: "start_date" }, { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) } ], select: true, 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: 'Import CSV', action: function () { uploadEditor.create( { title: 'CSV file import' } ); } }, { extend: 'selectAll', className: 'btn-space' }, 'selectNone', ] } ); } );
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter