Test_Fiddle_KB_2016
HTML
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="content/dataTables-1.10.4/scripts/dataTables.bootstrap.js"></script>
<div>
<table id="example" class="table table-striped table-bordered" cellspacing="0" cellpadding="2" width="100%">
<thead>
<tr>
<th>Job</th>
<th>Customer</th>
<th>Planner</th>
<th>Description</th>
<th>SO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
CSS
<link href="content/dataTables-1.10.4/css/dataTables.bootstrap.css" rel="stylesheet">
JavaScript
$(document).ready(function () {
var dt = $('#example').DataTable({
processing: true,
serverSide: true,
pagingType: 'full_numbers',
ajax: {
url: 'http://localhost:49317/WebService2.asmx/GetTableData',
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dataSrc: 'data'
},
columns: [
{ data: 0 },
{ data: 1 },
{ data: 2 },
{ data: 3 },
{ data: 4 }
],
order: [[1, 'asc']]
});