In-Line Editing

hubone

I installed script using the http://editor.datatables.net/generator/index

I want to allow In line editing (where I can click on a cell and edit it instead of clicking the edit button. How do I do that?

Also how can I have a field where I can attach an image?

allan

Hi,

Generator is a quick start tool only - it does not show all of the options of Editor. To get the full use from Editor you need to use its API - specifically for inline editing you would use the inline() method. There is an example available on the site.

Also how can I have a field where I can attach an image?

Use the upload field type. Example.

Allan

hubone

Allan thanks a lot for your help, but I'm very confused. basically right now I'm trying to use the examples/inline-editing/responsive.html because I don't know how to setup my own page. I'm trying to edit the field names in that page, and in the staff.php page and in the database but I'm getting the JSON error.

Basically I want all text fields about 10 different fields that I want to name, 1 other field to upload image, and 1 field that auto generate a number (that no one is allowed to edit). I want to be able to inline edit those fields.

hubone

I dont understand how to use API?

allan

Did you successfully use Generator to create an editable table? If so, then all you need to do is use the inline() method like in the example I linked to:

    $('#example').on( 'click', 'tbody td', function (e) {
        editor.inline( this );
    } );

Obviously you need to change the table id from example to whatever your table id is.

Allan

hubone

I ended up copying whatever existed as the sample and duplicated it to whatever the columns I want, and changed them in staffhtml.php, staff.php. it works now!

Now I want to add scroll bar because I have so many columns.

allan

scrollX. See also the full options list and the examples.

Allan

hubone

can you tell me the steps?

I put this code where?
$('#example').DataTable( {
ajax: '/api/data',
deferRender: true,
scrollY: true,
scroller: true
} );

allan

Have a look inside the Javascript file that Generator creates (table.{name}.js) - you'll find the DataTables initialisation in there.

Allan