John Ayers John Ayers - 16 days ago 6
HTML Question

DataTables & X-Editable making out of focus items editable

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

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();
     }
});
Comments