I am using jQuery datatable and Jeditable plugin to edit first column of my table. Jeditable is working fine that it updates the db table and shows the edited value on the table but it only does so after refreshing the page. I want it to be updated without refreshing the page. Here is my code:

JavaScript

$(document).ready(function()
{
var objTable = $(".example").DataTable(
{
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    "order": [[ 1, "asc" ]]
});

$( '.edit' ).each( function()
{

$( this ).editable( 'UpdateDBTableURL',
    {

    'width' : '90%',
    'height' : '80%',
    'tooltip' : 'Click to Edit',
     submit : 'Save',
     cancel : 'Cancel',
     cssclass : "editable",
    'submitdata' :
        {
        'sCompanyID': CompanyID,
        'sAction': 'EditLabel'
        },
     'onClick' : 'submit'

    } );

} );

});

HTML CODE

<table class="example" width="100%">
  <thead>
    <tr>
        <th>Label</th>
        <th>Name</th>
        <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="edit" id="101">&nbsp;</td>
      <td>Mary Kom</td>
      <td>2401 N Main St</td>   
    </tr>
    <tr>
     <td class="edit" id="102"></td>
     <td>David Kom</td>
     <td>2401 N Main St</td>    
    </tr>
 </tbody>
</table>

You may need to fine tune this but I used the datatable createRow function to add the jedit as the row is being built.

    $(document).ready(function () {
        var objTable = $(".example").DataTable(
        {
            "info": false,
            "scrollCollapse": true,
            "paging": false,
            "order": [[1, "asc"]],
            "createdRow": function (row, data) {

                $(row).children(":nth-child(1)").editable('UpdateDBTableURL',
                {

                    'width': '90%',
                    'height': '80%',
                    'tooltip': 'Click to Edit',
                    submit: 'Save',
                    cancel: 'Cancel',
                    cssclass: "editable",
                    'submitdata':
                        {
                            'sCompanyID': CompanyID,
                            'sAction': 'EditLabel'
                        },
                    'onClick': 'submit'

                });
            }
        });
    });