Display list data in jQuery tables without using Data View web part

Hi folks,

I did a small POC in my project to fetch data using REST API and feed the results into jQuery data tables. Using this we can apply sorting, paging, filtering to the results received.
Please check the code below.

<script type="text/javascript" charset="utf8" src="../SiteAssets/Scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

Job Status: <input type="text" id="Status">

<input type="button" value="Get Records" onclick="LoadRecords($('#Status').val());" >

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Source</th>
<th>Client Number</th>
</thead>
</table>

<script type="text/javascript">
console.log(_spPageContextInfo.webAbsoluteUrl);
function LoadRecords(state)
{
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SAP Batch Jobs')/items?$select=Job_x0020_Name,Title,Source,Client_x0020_Number&$filter=(Title eq '"+state+"')&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){

$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "Job_x0020_Name" },
{ "mData": "Title" },
{ "mData": "Source" },
{ "mData": "Client_x0020_Number" }
]
});

});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script>

For complete details of jQuery plugin, please check the below link
http://summit7systems.com/who-needs-a-data-view-web-part-sharepoint-rest-and-datatables-net/