DataTables & X-Editable making out of focus items editable

Question

I have a working setup for data-tables and x-editable that allows a user to edit data inline in a table that gets loaded from the database. Once the page loads my code below fires and makes all the editable options editable, except it only seems to work for the first page of results. When you click next, change the number of results or do a search, any items that were not on the first page don't get made editable. I am assuming this is because data-tables hides the data that is not on the current page removing it from the document flow. How can I make sure all my data in the table is editable?

$(document).ready(function () {
    $.fn.editable.defaults.mode = 'inline';
    $('.LocatorID').editable();
    $('.Title').editable();
    $('.Latitude').editable();
    $('.Longitude').editable();
    $('.Website').editable();
    $('.Address').editable();
    $('.City').editable();
    $('.State').editable();
    $('.Zip').editable();
    $('.Country').editable();
    $('.Phone').editable();
});

Answer 1

First, move your x-editable setup into its own function:

function setupXedit() {
    $.fn.editable.defaults.mode = 'inline';
    $('.LocatorID').editable();
    $('.Title').editable();
    ...
}

Then set so that you call the function on every draw:

$('#example').dataTable({
    "fnDrawCallback": function( oSettings ) {
     setupXedit();
     }
});

Answer 2

Do like this: one $('.edit').editable(); inside Datatable fnDrawCallback and one outside .Datatable function

var table = $('#tbldivdsthietlap').DataTable({

            "fnDrawCallback": function( oSettings ) {
                $('.edit').editable();
            }
        });

$('.edit').editable();