How to refresh data table, after save or update

How to refresh data table, after save or update

dan-zdan-z Posts: 10Questions: 2Answers: 0

I am new to programming and I have been trying this for days and still i can't get this data table to refresh after save and update. I used table.ajax.reload() function but it didn't help either.

 if ($('#Person').parsley().isValid()) {

                    var Id = $("#id").val();
                    var FirstName = $("#firstname").val();
                    var LastName = $("#lastname").val();
                    var DOB = $("#dob").val();
                    var SSN = $("#ssn").val();
                    var Email = $("#email").val();
                    var Address = $("#address").val();
                    var PhoneNo = $("#phone").val();


                    var Person = {
                        id: Id,
                        firstname: FirstName,
                        lastname: LastName,
                        dob: DOB,
                        ssn: SSN,
                        email: Email,
                        address: Address,
                        phoneno: PhoneNo
                    };

                    if (Id =="") {
                        $.ajax(
                        {
                            type: "POST",
                            url: "/Details/SavePerson",
                            data: JSON.stringify(Person),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            beforeSend:function(){
                                $('#btnSubmit').attr('disabled', 'disabled');
                            },
                            success: function (data) {
                                $('#Person')[0].reset();
                                $('#btnSubmit').attr('disabled', false);
                                $('#btnSubmit').val('Submit');
                                dataTable.ajax.reload();
                                swal("Done!", "Data has been Saved.!", "success");
                                
                            }
                        }
                       );
                    }
                    else {
                        $.ajax(
                         {
                             type: "POST",
                             url: "/Details/Update",
                             data: JSON.stringify(Person),
                             contentType: "application/json; charset=utf-8",
                             dataType: "json",
                             beforeSend: function () {
                                 $('#btnSubmit').attr('disabled', 'disabled');
                             },
                             success: function (data) {
                                 $('#Person')[0].reset();
                                 $('#btnSubmit').attr('disabled', false);
                                 $('#btnSubmit').val('Submit');      
                                 swal("Done!", "Data has been Updated.!", "success");
                                 ("#persondatatable").Datatable.ajax.reload();
                             }
                         })
                    }
                    $('#Person').parsley().reset();
            }

code for my datatable is

 $(document).ready(function () {
            var dataTable;
            $.ajax({
                url: "/Details/GetAllDetails",
                type: "Get",
                datatype: "json",
                success: function (data) {

                    dataTable = $("#persondatatable").DataTable({
                        select: true,
                        data: data,
                        columnDefs: [
                            {
                                "click": false, "targets": [6],
                                "width": "24%"
                            }
                        ],
                        columns: [
                            { "data": "Id", "visible": false },
                            { "data": "Firstname" },
                            { "data": "LastName" },
                            { "data": "PhoneNo" },
                            { "data": "Email" },
                            { "data": "SSN" },
                             {
                                 "data": "Id", "render": function (data) {

                                     return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'

                                 }
                             }
                        ],

                    })

                        $('#persondatatable tbody tr').on('click', function (e) {
                            var datalist;

                            var id = dataTable.row(this).data().Id;

                            $.ajax({
                                type: 'Post',
                                url: "/Details/ViewDetails/" + id + " ",
                                success: function (data) {

                                    FirstName.textContent = data[0].Firstname,
                                    LastName.textContent = data[0].LastName,
                                    Address.textContent = data[0].Address,
                                    DOB.textContent = data[0].DOBString,
                                    Email.textContent = data[0].Email,
                                    Phone.textContent = data[0].PhoneNo,
                                    SSN.textContent = data[0].SSN
                                }
                            })
                        });
                    } 
                
            });
        })

Answers

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    Since you aren't using ajax the dataTable.ajax.reload(); isn't going to work as there is no Datatables Ajax config. Instead of using jQuery Ajax to fetch the Datatables data use ajax along with ajax.dataSrc set to "". The docs have an example of this. Then the dataTable.ajax.reload(); should work.

    Kevin

  • dan-zdan-z Posts: 10Questions: 2Answers: 0

    I used this syntax but it didn't work, here is my code for update after changes

     $.ajax(
                                     {
                                         type: "POST",
                                         url: "/Details/Update",
                                         data: JSON.stringify(Person),
                                         contentType: "application/json; charset=utf-8",
                                         dataType: "json",
                                         beforeSend: function () {
                                             $('#btnSubmit').attr('disabled', 'disabled');
                                         },
                                         success: function (data) {
                                             $('#Person')[0].reset();
                                             $('#btnSubmit').attr('disabled', false);
                                             $('#btnSubmit').val('Submit');
                                             swal("Done!", "Data has been Updated.!", "success");
                                             //$('#persondatatable').DataTable().ajax.reload();
                                             dataTable.destroy();
                                             $('#persondatatable').DataTable({
                                                 "ajax": {
                                                     "url": "/Details/GetAllDetails",
                                                     "dataSrc": "dataTable"
                                                 }
                                             });
                                         }
                                     })
    

    above code outputs a json result like

    [{Id: 3, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danudhdhara", LastName: "wijesooriya",…},…]
    0: {Id: 3, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danudhdhara", LastName: "wijesooriya",…}
    1: {Id: 4, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danushka", LastName: "jayasooriya",…}
    2: {Id: 16, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Thushara", LastName: "Hettigoda",…}
    3: {Id: 17, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Sanduni", LastName: "Jayasooriya",…}
    4: {Id: 18, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Madushan", LastName: "Herath",…}
    5: {Id: 19, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Minidu", LastName: "Jayasooriya",…}

    which is updated but does not show any changes in my data table

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    What I meant was to change the code in your second code snippet above. Remove the jQuery Ajax request and change it so that Datatables uses -option ajax to initially fetch the data. Then you can use ajax.reload().

    Kevin

  • dan-zdan-z Posts: 10Questions: 2Answers: 0

    I have done as you said, now the console popups error
    "Cannot read property 'length' of undefined"

    function getData()
                {
                    var dataTable;
                    
                        debugger;
                        dataTable = $('#persondatatable').DataTable({
    
                            "ajax": {
                                "url": "/Details/GetAllDetails",
                                "type": "Get",
                                "data":data,
                                "datatype": "json",
                                "select": true,
                                "columnDefs": [
                                    {
                                        "click": false, "targets": [6],
                                        "width": "25%"
                                    }
                                ],
                                "columns": [
                                    { "data": "Id", "visible": false },
                                    { "data": "Firstname" },
                                    { "data": "LastName" },
                                    { "data": "PhoneNo" },
                                    { "data": "Email" },
                                    { "data": "SSN" },
                                     {
                                         "data": "Id", "render": function (data) {
                                             return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'
    
                                         }
                                     }
                                ],
    
                            }
                        })
    }
    

    but i have been passing only six parameters for six columns and seventh column is for
    actions.

    Please can i have an explanation for this.

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    The reason is that you have all the Datatables options inside the ajax option. Should look more like this:

    function getData()
                {
                    var dataTable;
                     
                        debugger;
                        dataTable = $('#persondatatable').DataTable({
     
                            "ajax": {
                                "url": "/Details/GetAllDetails",
                                "type": "Get",
                                "data":data,
                                "datatype": "json",
                            },  // add this
                                "select": true,
                                "columnDefs": [
                                    {
                                        "click": false, "targets": [6],
                                        "width": "25%"
                                    }
                                ],
                                "columns": [
                                    { "data": "Id", "visible": false },
                                    { "data": "Firstname" },
                                    { "data": "LastName" },
                                    { "data": "PhoneNo" },
                                    { "data": "Email" },
                                    { "data": "SSN" },
                                     {
                                         "data": "Id", "render": function (data) {
                                             return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'
     
                                         }
                                     }
                                ],
     
                            } // remove this
                        })
    }
    

    Kevin

  • dan-zdan-z Posts: 10Questions: 2Answers: 0

    nothing really changed, but i have recorded this in the following link with out data

    Seven columns are there in the data table

    i am taking six values from database
    they are

    Id, Firstname, Lastname, Phoneno , Email and SSN

    seventh column is action column and i am taking the Id to that column as well

    I tried deleting first column Id, from table and reinitialized but another error popped up saying
    "Cannot read property 'length' of undefined"

    can i have an explanation for this

    http://live.datatables.net/dorenuha/1/edit

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    That examples looks like it should work - I removed ajax and added with data, see here.

    If that doesn't help, please can you create a test case that replicates the problem.

    Colin

  • dan-zdan-z Posts: 10Questions: 2Answers: 0

    the above array worked fine, but why doesn't retrieved data from database doesn't initialize it still says Cannot read property 'length' of undefined.

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    Are all the fields present in the Ajax response? Can you post a couple of records here, please - what you posted above was truncated on each record so doesn't give the full picture.

    Colin

  • dan-zdan-z Posts: 10Questions: 2Answers: 0

    All the fields requested are present in the ajax request, but it doesn't show up in the data table.

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    Colin asked to see the data which you aren't providing. Without that its impossible to help. If its a large data set then use the debugger to collect the information. Provide the resulting ID so the developers can take a look at the JSON response.

    Kevin

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    I tried deleting first column Id, from table and reinitialized but another error popped up saying
    "Cannot read property 'length' of undefined"

    Did you remove both the column in both Datatables and the HTML table? They need to match.

    Kevin

Sign In or Register to comment.