如何基于onclick在数据表上填充数据

Question

I have ajax callback already and it based on the clicked button and will pass username then return it like this

and this is my AJAX

$(document).on("click", ".view", function(e){
    e.preventDefault();
    var nomination_result_id = $(this).data('id');

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "json/getNominationVoters",
        data: { nomination_result_id: nomination_result_id }, //PASS DATA 
        success: function(data){ // RECEIVE DATA
            console.log(data);
        }
    });
});

and it open on my modal, this is the content of body

<div class="modal-body">
    <div class="table-responsive">
        <table id="voters" class="table">
            <thead>
                <tr>
                    <th>Nominee</th>
                    <th>Vote Count</th>         
                </tr>
            </thead>
            <tbody>
                ....................
            </tbody>
        </table>
    </div>
</div>

and on my script

<script type="text/javascript">
    $('#voters').DataTable();
</script>

I don't know how to populate cause the ajax callback on documentation are for document.ready() only not on click. Please need help.

Update 1

My Current Script

$.ajax({
    type: "GET",
    dataType: "json",
    url: "{{ URL::route('json/getNominationVoters') }}",
    data: { nomination_result_id: nomination_result_id }, //PASS DATA 
    success: function(data){ // RECEIVE DATA
        console.log(data);
        $.each(data, function(key, value){
            append_tr = "<tr>"+
                            "<td>"+value.firstname+"</td>"+
                            "<td>"+value.lastname+"</td>"+
                        "</tr>";
            $('#voters > tbody:last-child').append(append_tr);      
        });     
    }
});

Result: I've got a "No data.."

Answer 1

HTML Data:

<table id="voters" class="table">

</table>

your scripts are in a document.ready but since your view is loaded after that the scripts don't affect your partial, Use this to solve the Problem

function YourScript(){
   // Your script here
}

and then call this function $('#voters').DataTable(); after you have loaded the partial view

$('#voters').html(data);
YourScript();

Hopefully this helps.