<h3>DataTables / Server Side Processing (Classic ASP)</h3>

<hr>

<p>Loading some dozens or even hundreds of records at once works fine. But what if you want to browse 1000's? The table below browses (sorts and searches) 10.000 records. Only the records shown are actually loaded. This speeds up the page loadtime (a lot). I found inspiration for this feature <a href="https://datatables.net/forums/discussion/59746/new-classic-asp-server-side-script-for-datatables-1-10-20" target="_blank">here</a> (SlavTheClaw). </p>
<p><small class="text-muted">/default/asp/sampleform21.resx</small></p>
<hr>

<table id="jsExampleSSP" class="table table-striped" style="width:100%">
	<thead>
		<tr>					
			<th>text</th>
			<th>number</th>			
			<th>date</th>			
			<th>country</th>	
			<th style="text-align:center">
				<button type="button" class="btn btn-info btn-sm" onclick="askAspForm(null)">Add&nbsp;new</button>
			</th>				
		</tr>
	</thead>
</table>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
	<div class="modal-content">	 
	  <div class="modal-body">
		  <div id="editForm"></div>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>					
	  </div>
	</div>
  </div>
</div>		


<script>
function askAspForm (id) {
	aspAjax ("post",aspLiteAjaxHandler,"iId=" + id + "&asplTarget=editForm&asplEvent=sampleform22",receiveAspForm)
}

function receiveAspForm(data) {
	$("#exampleModal").modal()
	aspForm(data)	
}

$(document).ready( function () {	
	
	$('#jsExampleSSP').DataTable( {	
		
		"order": [ 0, 'asc' ],
		"lengthMenu": [ 10, 25, 50, 75, 100, 200, 300, 400, 500 ],		
		"responsive": true,
		"serverSide": true,
		"ajax": aspLiteAjaxHandler + '?asplEvent=sampleform21_data',
		"processing": true,
		"columnDefs": [
				{"targets": '_all',"render":$.fn.dataTable.render.text()},
				{"orderable": false, "targets": 4 },
				{"targets": 4,"className": 'dt-body-center'}
			],		
		"columns": [           		
				{ "data": "sText"},
				{ "data": "iNumber" },			
				{ "data": "dDate" },				
				{ "data": "countryName" },
				{  "data": "iId", render: function ( data, type, row ) {				
					return '<button type="button" class="btn btn-primary btn-sm" onclick="askAspForm(' + data + ')">Modify</button>'							
					}
				}
			]
	} );	
});
</script>