How to implement Pagination with dynamic HTML table data via AJAX?

问题

I want to display incoming data from my database to a dynamic HTML table (via AJAX) that should include pagination. I have read about DataTables pagination but I am not sure how to implement it here.

This is the code:

JS code:

$.ajax({
    cache: false,  
    url: {% url 'grab_records' %},
    method: 'GET', 
    datatype: 'json',
    success: function(data) {

        var htmlData = ''; 
        var res = data[0];
        if (res) {
            var count = res.data.length;
            for (i = 0; i < count; i++) { 
                htmlData += '<tr>'
                +'<td id = "records"> '+res.data[i]+' </td>'
                +'</tr>';
            }

        } else {
            htmlData += '<tr>'
            +'<td id = "records"> No data </td>'
            +'</tr>';
        }
        $("#details").append(htmlData);
    },
});

HTML code:

<table id="myTable">
    <thead>
        <tr class="header">
            <th> Employee Records </th>
        </tr>
    </thead>
    <tbody id='details'>

    </tbody>
</table>

How can I add pagination here?

来源：https://stackoverflow.com/questions/60024686/how-to-implement-pagination-with-dynamic-html-table-data-via-ajax