Trying to get the editing to work

kenrights

Hi Guys,

I'm trying to get the inline editing to work as shown in the example. Here's my post-changes live.datatables.net.
Here is my pre-changes live.datatables.net.

I added these entries to the html:

<!-- needed for editing tables per https://editor.datatables.net/examples/inline-editing/simple --> 
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
    <!-- THE NEXT ONE MIGHT BE THE WRONG PATH -->
    <link href="../../extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />

I added a whole bunch of stuff to the javascript that I saw on the inline-editing page.

I've really broken it pretty bad. My search and cog icon are gone. There is only 1 check box that doesn't work. Does anyone have any suggestions?

colin

Hi @kenrights ,

In your example, you haven't initialised Editor, so it's just a plain DataTable. For Editor to work, you need to initialise that also, like this.

Cheers,

Colin

kenrights

Sorry for the delay. I'm taking another online programming class.

As soon as I make this change from:
dom: "Bfrtip",
to:
dom: "Bfrip", // notice i removed 't'.

With the 't' removed, I can no longer select the row and then click the Edit or Delete buttons above. I don't like the 't' option because it shows the pagination and info at the bottom (e.g. "Showing 1 to 10 of 57 entries") and I want it at the top because I'm designing for mobile and the list of entries could be significant.

Is this a bug? Where or how should I report it?

Also, if I add these options:
colReorder: true, // ability to move columns around
fixedHeader: true, //makes header sticky as you scroll down

Neither will take effect.

Finally, perhaps I should post another question so correct me if I should. How do I get the [New], [Edit], [Delete] buttons that you added to show up under the cog icon like the other options?
buttons: [ 'copy', 'csv', 'print', 'excel', 'pdf' ]

Thank you

kthorngren

Try adding the t to the end: dom: "Bfript",.

Also, if I add these options:
colReorder: true, // ability to move columns around
fixedHeader: true, //makes header sticky as you scroll down
Neither will take effect.

Did you include the FixHeader and ColReorder JS and CSS files?

Kevin

colin

Hi @kenrights ,

Finally, perhaps I should post another question so correct me if I should. How do I get the [New], [Edit], [Delete] buttons that you added to show up under the cog icon like the other options?

Those are Editor buttons, so you'll need to include those buttons (as well as the JS and CSS files) as in these examples.

Cheers,

Colin

kenrights

Hi @kthorngren,

You are AWESOME!!! Those two suggestions fixed the issues. See here. Even though you nearly did it for me, I still had to use my own head to append the buttoms, find the right libraries, etc. It was painful for me but, forced me to learn. Now I need to get this stuff working in my local install.

I'll be back I'm sure...