JQuery Datatables Add Row

Question

I'm trying to create a table that a user can add, edit, and delete elements in. I'm using the datatables plugin. Here's the tutorial for what I want to do. Here is my html code:

<p><button class="editor_create">Add new person</button></p>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="reg_more" width="100%">
        <thead>
            <tr>
                <th width="30%">First Name</th>
                <th width="18%">Last Name</th>
                <th width="18%">Phone</th>
                <th width="18%">Email</th>
                <th width="18%">Ethnicity</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
    </table>

And here's the jquery code:

$(document).ready(function(e) {
$('#reg_more').dataTable({
                "bLengthChange": false,
                "bInfo": false,
                "bPaginate": false,
                "bStateSave": true,
                "rowHeight": 'auto',
                "bFilter": true,
                "bSort": false,
                "bAutoWidth": false,

                "aoColumns": [
                    { "mDataProp": "First Name" },
                    { "mDataProp": "Last Name" },
                    { "mDataProp": "Phone" },
                    { "mDataProp": "Email", "sClass": "center" },
                    { "mDataProp": "Ethnicity", "sClass": "center" },
                    {
                        "mDataProp": null, 
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_edit">Edit</a>',
                        "bSortable": false,
                        "bSearchable": false
                    },
                    {
                        "mDataProp": null, 
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_remove">Delete</a>',
                        "bSortable": false,
                        "bSearchable": false
                    }
                ]
            }); 
        }
        $("#submit").show();
        window.scrollTo(0,document.body.scrollHeight);
    });

    var editor = new $.fn.dataTable.Editor( {
        "domTable": "#reg_more"
    } );

    //style="display:none;"
    //$("#addbtn").click(addrow);

    editor.add( [ 
      {
          "label": "First Name:",
          "name": "fname"
      }, {
          "label": "Last Name:",
          "name": "lname"
      }, {
          "label": "Phone:",
          "name": "phone"
      }, {
          "label": "Email:",
          "name": "email"
      }, {
          "label": "Ethnicity:",
          "name": "ethnicity"
      }
    ] );

    $('button.editor_create').on('click', function (e) {
        e.preventDefault();

        editor.create(
            'Add new person',
            {
                "label": "Add",
                "fn": function () {
                    editor.submit()
                }
            }
        );
    } );

    $('#reg_more').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit(
            $(this).parents('tr')[0],
            'Edit record',
            {
                "label": "Update",
                "fn": function () { editor.submit(); }
            }
        );
    } );

    $('#reg_more').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.message( "Are you sure you want to remove this row?" );
        editor.remove(
            $(this).parents('tr')[0],
            'Delete row', 
            {
                "label": "Update",
                "fn": function () {
                    editor.submit()
                }
            }
        );
    } );
});

The add button ends up submitting the form rather than opening up a small form where the user can input all the information. How do I make it popup a small window like in the tutorial where the "create new record" button opens up a form?

score 1 · Answer 1 · answered Sep 16 '12 at 19:43

1

Change this part:

    }
    $("#submit").show();
    window.scrollTo(0,document.body.scrollHeight);
});

to this:

    $("#submit").show();
    window.scrollTo(0,document.body.scrollHeight);

(Remove the extra } and });

answered Sep 16 '12 at 19:43

Lian

2,197
2
15
16

that breaks the entire code. The if ends up not having a closing bracket and the change function ends up not having a closing bracket. – Richard Sep 16 '12 at 20:19
This answer does in fact fix the code in the question. Please check that the posted code is the same. – Owlvark Sep 16 '12 at 21:45
@Richard, your code had syntax errors. I also don't see a change function in your code. Please update. – Lian Sep 18 '12 at 06:05

score -2 · Answer 2 · edited Dec 11 '13 at 23:31

-2

.ui-dialog 
{ 
    margin-top:-300px;margin-left:400px;
}

edited Dec 11 '13 at 23:31

Malachi

3,205
4
29
46

answered Dec 11 '13 at 22:59

Eddy13

51
2

JQuery Datatables Add Row

2 Answers2

Linked