Datatable refresh after jquery ajax

jigar311982

Hi,
I have one form where i enter all information required and then that data will be added to datatable as column values,
I tried to create jquery, see below,

    $("#manform").submit(function(event) {
            event.preventDefault();
            $("#LoadingImage").show();
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>index.php/admin/administration/add_manager",
                    data: $("#manform").serialize(),
                    success: function(message) {


                        $("#LoadingImage").hide();
                        $('#manform')[0].reset();
                        var objData = jQuery.parseJSON(message);
                                var row = $("<tr/>")
                                $("#managerlist").prepend(row); /
                                row.append($("<td>").html('<input type="checkbox"/>'));

                                row.append($("<td>" + objData.manager_firstname + "</td>"));
                                row.append($("<td>" + objData.manager_lastname + "</td>"));
                                row.append($("<td>" + objData.manager_email + "</td>"));


                                        //var oTable = $('#managerlist').dataTable();

                                          // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
                                          //oTable.fnDraw()         

                    }

                });
    });

With help of this query i can append row and information is populated in datatable, and view in html page.
But how can i refresh table so that it will get values and id for next task, like update, delete etc,

I could not able delete, update after adding this, but i can view in table,
I tried as table fnDraw but it not worked,
How to do this?

Thanks for help,

allan

See the FAQs. In short you need to use the API to add new rows.

Allan

jigar311982

Hello Allan,

Thanks, its adding new row and update total number of rows, but row is empty and throw below message
--DataTables warning: table id=managerlist - Requested unknown parameter '0' for row 4. For more information about this error, please see http://datatables.net/tn/4

I had tried as per below code,

   success: function(message) 
                        {
                            $("#LoadingImage").hide();
                            $('#manform')[0].reset();
                            var objData = jQuery.parseJSON(message);
                            var table = $('#managerlist').DataTable();
 
                                    table.row.add( {
                                            "select": "select",
                                            "firstname":       objData.manager_firstname,
                                            "lastname":   objData.manager_lastname,
                                            "email":     objData.manager_email,
                                            "delete": "delete",
                                            
                                        } ).draw();

i have 5 column that is need to update,
i get return response of my form submit as below,

{"manager_id":"144","manager_gender":"","manager_firstname":"Roshni","manager_lastname":"Patel","manager_email":"r@2.com","manager_password":"81dc9bdb52d04dc20036dbd8313ed055","manager_designation":"","manager_phone":"","manager_mobile":"","is_active":"1","manager_created":"2015-02-26 16:39:02","manager_updated":"0000-00-00 00:00:00","manager_lastlogin":"0000-00-00 00:00:00","manager_image":""}

How can i pick required values from this array and show in added row?

allan

Can you use the debugger so I can see what would be causing that issue.

Allan

jigar311982

http://debug.datatables.net/ozipox

allan

You haven't used columns.data to tell DataTables to expect data in an object form (i.e. with the name firstname).

Allan

jigar311982

Hello Allan,

Thank you but now i am lost with combining row.add() and columns.data()
Can you help me how can i create columns.data for my JSON,

{"manager_id":"144","manager_gender":"","manager_firstname":"Roshni","manager_lastname":"Patel","manager_email":"r@2.com","manager_password":"81dc9bdb52d04dc20036dbd8313ed055","manager_designation":"","manager_phone":"","manager_mobile":"","is_active":"1","manager_created":"2015-02-26 16:39:02","manager_updated":"0000-00-00 00:00:00","manager_lastlogin":"0000-00-00 00:00:00","manager_image":""}

I tried with this,

var objData = jQuery.parseJSON(message);

                        var table = $('#managerlist').DataTable(

                         {
                          "ajaxSource": "sources/objects.txt",
                          "columns": [
                            { "data": "manager_id" },
                            { "data": "manager_firstname" },
                            { "data": "manager_lastname" },
                            { "data": "manager_email" },
                            { "data": "manager_gender" }
                          ]
                        }
                        );

                                table.row.add( {
                                        "select": "manager_id",
                                        "firstname":       "manager_firstname",
                                        "lastname":   "manager_lastname",
                                        "email":     "manager_email",
                                        "delete": "manager_gender",

                                    } ).draw();

after doing this i got below tow alerts,

DataTables warning: table id=managerlist - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

DataTables warning: table id=managerlist - Requested unknown parameter '0' for row 5. For more information about this error, please see http://datatables.net/tn/4

Here is debug data again,
http://debug.datatables.net/eneqos

Sorry, i am new to datatable,

Thank you Allan,

allan

Did you read through the information at http://datatables.net/tn/4 ? You need to set those parameters when you initialise the DataTable the first time.

Allan

jigar311982

Hello Allan,

OK, can you help me where are first initialisation parameters stored? in which JS?

jigar311982

Hello Allan,

Finally, it solved by adding this in start of my html,

$(document).ready( function () {
$('#managerlist').DataTable({
"columns": [
{ "data": "manager_firstname" },
{ "data": "manager_firstname" },
{ "data": "manager_lastname" },
{ "data": "manager_email" },
{ "data": "manager_gender" }
]
});
});

Thank you,