Blank table to use for bulk imports

Jensen010

Hi,
I have something I need to find a solution to, and I'm wondering if Datatables + Editor can handle it.

Basically, we need a way for people to scan or type in information and then upload that to our db either all at once, or by using the inline feature. I had thought about creating a blank table to accomplish this. I have this created, but I have a question.

If I have column headers that match the DB but the rest of the column is blank, is there a way that I can then have users fill in the blanks and have the data write back to the corresponding column in the database? Basically, I need datatables only to POST data to the server instead of pulling data out to display.

Is this doable? Is there any other method of accomplishing bulk imports?

allan

Hi,

Have a look at this blog post which I think will help with what you are looking for.

If you don't want DataTables to pull data from the database on load, don't include the ajax option in the DataTable.

Regards,
Allan

Jensen010

Thank you! That will help me accomplish the majority of what I need here

One question remains, though, but first I'll show some code so you can see what I have:

<table id="upload-table">
  <thead>
    <tr>
      <th>Owner</th><th>Barcode</th>
      <th>SerialNum</th><th>Model</th>
    </tr>
  </thead>
  <tr>
    <td></td><td></td>
    <td></td><td></td>
  </tr>
<!-- Continues for however many rows I want to display... -->
</table>

var uploadEditor = new $.fn.dataTable.Editor({
        table: '#upload-table',
        idSrc: 'ID',
        fields: [ 
            { label: "Owner",                  name: "Owner",      className: "col-sm-5 float-left" },
            { label: "Barcode Number", name: "Barcode",    className: "col-sm-5 float-left" },
            { label: "Serial Number",     name: "SerialNum", className: "col-sm-5 float-left" },
            { label: "Model",                  name: "Model",        className: "col-sm-5 float-left" },
        ]
});
var uploadDataTable = $('#upload-table').DataTable({
        // ajax: { url: srvRoot+"/wp-content/plugins/datatables/php/table-data/assets-table.php", type: "POST" },
        dom: "t",
        scrollX: "1720px",
        scrollY: "550px",
        columnDefs: [
            /*Owner Column*/        { "width": "125px", "targets": 0  },
            /*Barcode Column*/     { "width": "150px", "targets": 1  },
            /*SerialNum Column*/  { "width": "125px", "targets": 2  },
            /*Model Column*/         { "width": "125px", "targets": 3  },
            /*Row Height Control*/ { className: "rowHeight", targets: "_all"}
        ],
        columns: [
            { data: "Owner",       "defaultContent": "<i>Not set</i>" },
            { data: "Barcode",    "defaultContent": "<i>Not set</i>" },
            { data: "SerialNum", "defaultContent": "<i>Not set</i>" },
            { data: "Model",        "defaultContent": "<i>Not set</i>" }
        ],
    }).on( 'click', 'tbody td', function() {
        uploadEditor.inline(this, {
            onBlur:       'submit',
            onReturn:     'submit',
            onEsc:        'blur',
            onFieldError: 'none',
            submit:       'changed',
            drawType:     'full-hold'
        });
    });
    uploadDataTable.draw();

This generates a blank table just fine, however the inline portion is not working (gives me the "Uncaught Unable to find row identifier" error), presumably because it's looking for a data source that's not there. I've reviewed the suggestions in the url appended to that error, but haven't made any headway with it.

Would I need to write a custom button that creates a query to enter data into our DB? If this is the case, what is the name of the data object created by editor? (So I can log it and tailor accordingly)

Thank you for the tremendous amount of help so far, on this and other posts. You have a great product here!

allan

You can't use inline editing to create a new row I'm afraid. Inline editing is for edit only - the row needs to exist in the database already, which is why you are getting an error about the id not existing (it doesn't!).

If you do need to inline create a row, what you have to do is create an empty row in the database, so that Editor "thinks" that it is just editing a regular row.

Allan

p.s. Thanks for your kind words!

Jensen010

Ok, I think I can make that work, I can just create a new table with some blank rows and use a custom button to perform the appropriate query as a bulk action. Thanks for the explanation!