Editor used to Import and format data

radi8

I just purchased the Editor specifically to be able to import data into a datatable.

I was looking at the example, but my requirements are slightly different. Rather than having a table pre-populated, I need an empty table and then have the user import data into it.

Optimally, I would like to start with just the Import button and then get the data, format/validate it, then display it.

Is this possible with your editor? If so, can I get a sample of how to do it?

kthorngren

If you are referring to this example then it shouldn't matter if there is data in the Datatable or not. Datatables and Editor expect the Datatables columns and the fields options to be defined for the basic Editor functionality to work. The example uses Editor functionality and you can customize it to fit your needs.

Are you expecting to dynamically build the columns based on the CSV file being imported? If so Editor can still be used. The code would need to be refactored to import the CSV, build Datatables based on the CSV then the Editor functionality can be used to update the server database.

If this doesn't help please provide more specifics of how you would like the process to work.

Here is an example you can test and make changes to to experiment:
http://live.datatables.net/yixobehu/1/edit

You can export a CSV from this example to get some data to work with.

Kevin

radi8

I will use your sample.

One question though, is there a way to control where the "New" and "Import" dialogue gets displayed? I am using a standard template that my company uses. This template has various small div's along the top for images.

When clicking on Import or New, the dialogue is in the upper left corner and is not usable.

This functionality appears to be controlled by the UploadEditor function. Can I over ride this?

$("#example").DataTable({
        dom: "Bfrtip",
        columns: [
            { data: 'mcu' },
            { data: 'mid' },
            { data: 'litm' },
            { data: 'shift' },
            { data: 'start_date' },
            { data: 'quantity' }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                         // can I override location here? 
                    } );
                }
            },
        ]
   });

kthorngren

Sounds like a styling issue. The New button wouldn't be affected by the UploadEditor function. Styling issues are almost impossible to debug without seeing the problem. Can you post a link to your page or a test case showing the issues for debugging?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can use this as a base for the Editor code and build up your specific styling.
http://live.datatables.net/guwafemu/1/edit

Maybe you can browser's inspect tool on the New or Import elements to see what is causing it to be placed in the wrong location.

Kevin