How to make pagination with pagination js use ajax - html

Question

I'm trying to create a pagination using pagination js. I use the data using ajax and api. When I try to make it there is an error. How do I fix it?
Am I wrong to make the ajax, but if I don't use pagination js the data is visible in the table. I've tried various ways but I don't really understand using pagination js.
function s() {
var FilterObjDTO = []
console.log(FilterObjDTO);
var SortObjDTO = []
console.log(SortObjDTO);
var PagingObjDTO = { offset: 0, totalPerPage:4, paging: false }
console.log(PagingObjDTO);
var willSendToAPI = {
filter: FilterObjDTO, sort: SortObjDTO, paging: PagingObjDTO
}
console.log(willSendToAPI);
$('#DataTable').pagination({
dataSource: function (done) {
$.ajax({
type: 'GET',
url: origin + '/' + 'id-ID' + '/' + 'DataTable',
data: { input: JSON.stringify(willSendToAPI) },
success: function (data) {
console.log(data);
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<table id="DataTable" style="width: 100%">';
html += '<colgroup>';
html += '<col span="1" style="width: 10%;">';
html += '<col span="1" style="width: 14%;">';
html += '<col span="1" style="width: 29%;">';
html += '<col span="1" style="width: 14%;">';
html += '<col span="1" style="width: 14%;">';
//html += '</colgroup>';
//html += '<tr class="table-border" style="background-color:#f4f5fa;">';
//html += '<th>Title</th>';
//html += '<th class="text-center">Type</th>';
//html += '<th class="text-center">Slug</th>';
//html += '<th class="text-center">PDF</th>';
//html += '<th class="text-center">Edit</th>';
html += '<tbody id="table">';
html += '<tr>';
html += '<td>' + data[i].fTitleID + '</td>';
html += '<td>';
html += '<p class="m-auto t-category">' + data[i].fType + '</p>';
html += '</td>';
html += '<td class="text-center">' + data[i].fSlug + '</td>';
html += '<td class="text-center"><a><i class="fas fa-file-download"></i></a></td>';
html += '<td class="text-center"> <button class="button-edit">edit</button></td>';
html += '</tr>';
html += '</tbody>';
html += '</table>';
}
$('#table').html(html);
}
});
pageSize: 5,
autoHidePrevious: true,
autoHideNext: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
}