Add,Edit,Delete rows dynamically

blue16

Hi, i need add, edit and delete rows dynamically on my datatable and i need pass the changes to server side for save data in my database, what is the best way for do this?

I use

boostrap 3.2.0
J2EE

thanks

nigel pasco

Datatables Editor:
http://editor.datatables.net/examples/simple/simple.html

blue16

thanks, but i need add three rows every time and my datatable has different number of columns depends of case

example

I add 3 rows with 6 columns other case is add 3 rows with 10 columns

There is another option

allan

There is another option

Certainly - but you'll need to write some code for it. Do the insert, update , delete on your database with whatever data you require and then use the ajax.reload() method to reload the data for the DataTable. You'll need to write the form and Ajax code if you don't want to use Editor though.

Allan

blue16

The next code add one row successfully, but I need to add 4 rows every time you select "New", and finally the changes will be reflected in the table

It's possible do this or
how do I control the button New for add the rows

 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../../EF_CONNECTOR?service=test",
        table: "#example",
        fields: [{
                label: "Bank",
                name:  "Bank",
                type:  "select",
                ipOpts: [
                    { label: "Bank1", value: "1" },
                    { label: "Bank2", value: "2" },
                    { label: "Bank3", value: "3" },
                    { label: "Bank4", value: "4" },
                    { label: "Bank5", value: "5" }
                ]
            },{
                label: "Field 1",
                name:  "Field 1"
            }, {
                label: "Field 2",
                name:  "Field 2"
            }, {
                label: "Field 3",
                name:  "Field 3"
            }, {
                label: "Field 4",
                name:  "Field 4"
            }, {
                label: "Field 5",
                name:  "Field 5"
            }, {
                label: "Field 6",
                name:  "Field 6"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../../EF_CONNECTOR?service=test",
        columns: [
            { data: "Bank", className: "center" },
            { data: "Field 1" },
            { data: "Field 2" },
            { data: "Field 3" },
            { data: "Field 4" },
            { data: "Field 5" },
            { data: "Field 6" }
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );
} );

allan

Editor will not automatically insert more than 1 row at a time at the moment, If that is a requirement for Editor then you would need to have it submit the create data four times - one for each row. That can be done using the create(), submit() and the submitComplete methods and event.

Allan

blue16

i will use dataTables.js and my own code for do this functionality

thanks