How to get 15000 items from SP list and bind to Jquery table

Question

How to get more than 5000 items from SharePoint List and bind to the Jquery database.

 

Please find the below code what i written and also i added all JS files(jquery.1.12.min.js,Jquery.DataTable.js, and Jquery.Datatable.css)

 

I don't understand where i did the mistake i always getting error like DataTable is not a funtion.

 

Can Anyone please help me on this ASAP.

 

Thanks in advance....

</head>
<Title>
Threshold more than 5000 items
</Title>
<div>
<table id="CustomerGrid" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Requestor</th>
<th>Company</th>
</tr>
</thead>
</table>
</div>
</body>
<script>
var web;
var spItems;
var position;
var nextPagingInfo;
var previousPagingInfo;
//listName = 'Claims',
var pageIndex = 5; // default page index value
var pageSize = 300; // default page size value
var Olist;
var clientcontext;
var camlQuery;
var tableContent='';
var items = [];
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function() {
clientcontext = new SP.ClientContext.get_current();
oList = clientcontext.get_web().get_lists().getByTitle("Claims");
camlQuery = new SP.CamlQuery();
GetListItems();
// var rowCount = $('#CustomerGrid tr').length;
// console.log(rowCount);
});
function GetListItems() {
//Set the next or back list items collection position
//First time the position will be null
camlQuery.set_listItemCollectionPosition(position);
// Create a CAML view that retrieves all contacts items with assigne RowLimit value to the query
camlQuery.set_viewXml("<View>" +
"<ViewFields>" +
"<FieldRef Name='Title'/>" +
"<FieldRef Name='Requestor'/>" +
"<FieldRef Name='Company'/>" +
"</ViewFields>" +
"<RowLimit>" + pageSize + "</RowLimit></View>");
spItems = oList.getItems(camlQuery);
clientcontext.load(spItems);
clientcontext.executeQueryAsync(Function.createDelegate(this,this.onSuccess),Function.createDelegate(this,this.onfail));
}
// This function is executed if the above OM call is successful
// This function render the returns items to html table
function onSuccess() {
var listEnumerator = spItems.getEnumerator();
var item;
while (listEnumerator.moveNext()) {
item = listEnumerator.get_current();
items.push(item.get_fieldValues());
//items.push(item.get_item);
}
console.log(items);
try{
//table.rows.add($(tableHTML)).draw(); //Append each list row to data tabel
$('#CustomerGrid').DataTable({
"aaData": items,
"scrollY":"600px",
"scrollCollapse": true,
"paging": false,
"aoColumns":
[
{
"ID":"ID"
},
{
"mData": "Title",
"render": function(mData,type, full) {
return '<a href="'+mData+'">' + mData + '</a>';
}
},
{
"mData": "Requestor"
},
{
"mData": "Company"
}
]
});
}
catch (e) {
alert(e.message);
}
//return tableContent;
managePagerControl();
}
function onfail(sender, args)
{
alert("fetching failed due to : "+args.get_message());
}
</script>