I am building a feature to display 6 records in an HTML table with a button labeled Load More. The goal is for each click of the button to retrieve another set of 6 records. Here's what I have tried so far:
Within the Controller
[HttpGet]
private JsonResult GetTweetData(int count)
{
try
{
using (var context = new DbContext())
{
var totalRecords = context.ObjTwitterDatas.Count();
var startFrom = 6 * count; // By default, it starts from 0 and retrieves 6 records at a time
var query = context.ObjTwitterDatas.Where(x => x.TwitterDataId >= startFrom && x.TwitterDataId <= totalRecords).Take(6);
var dataContainer = query.ToList();
return Json(dataContainer, JsonRequestBehavior.AllowGet);
}
}
catch (Exception e)
{
return Json(new { success = false, ex = e.Message }, JsonRequestBehavior.AllowGet);
}
}
Implementing Ajax call in the ready method
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: '@Url.Action("GetTweetData" ,"Home")',
contentType: "application/json; charset=utf-8",
data: { count: 0}, // The count will be updated dynamically to load the next 6 records on button click
dataType: "json",
success: function (data) {
if(data.length > 0){
// Append Data to Table
}
else{
alert('No More Records to Load')
}
},
error: function () {
alert("Error");
}
});
});
$('#Btn-More').on("click", function () {
// Need assistance with properly fetching the next set of 6 records eg. 7-12
});
</script>