ajax datadables paginate

Mirabouka

hi,
i have a problem with my datatables paginate, so in the first page, my functions works well, but in the second, i can't update or delete my line (buttons) :

my code :

__initPenaltyDataTable: function(){

    var that = this;
    this.__penaltyTable = $('#penaltyHistoricTable').DataTable( {
        'ajax': {
            'url':__CTX__+ "getAllPenalty",
            "dataSrc": $.proxy(function ( json ) {
                this.__penalty = json;
                return json;
            },this)
        },
        'columns': [
            { title: 'Début', data: 'startDate', type : 'sort-date', defaultContent: ''},
            { title: 'Fin', data: 'endDate', type : 'sort-date', defaultContent: ''},
            { title: 'Personne', data: '', defaultContent: '', render:function(data, type, full, meta){return that.renderPersonPenalty(full);}},
            { title: 'Contact', data: '', defaultContent: '', render:function(data, type, full, meta){return that.renderContactPenalty(full);}},
           { title: 'Modifier/Supprimer', data:null, sortable:false, render:function(data, type, full, meta){return that.renderEditPenalty(full);} ,searchable:false }
        ],

});

function renderEditPenalty(data) {
var text = '<img id="update_'+data.id+'" src="./resources/img/edit.png" class="modelButton" title="Modifier"></img>'+
'<img id="remove_'+data.id+'" src="./resources/img/remove.png" class="modelButton" title="Supprimer"></img>';

    var that = this;
    $('#update_'+data.id).on('click', function(){that.__updatePenaltyDialog(data.id);});
    $('#remove_'+data.id).on('click', function(){that.__removeConfirmation(data.id);});

    return text;
},

i don't inderstand, why it works well in the first page, but not in the seconde!