View
@{
ViewBag.Title = "Test";
}
<h2>Test</h2>
<script>
$(document).ready(function () {
$('#table').DataTable({
"serverSide": true,
"searching": false,
"info": false,
"lengthChange": false,
"ajax": "/Test/Xhr",
"columns": [
{
"data" : "message"
}
]
});
$('#table').on('draw.dt', function (e, settings) {
$('#list').children().remove();
for (var index in settings.json.data) {
var data = settings.json.data[index];
$('#list').append('<li>' + data.message + '</li>');
}
});
$('#table').hide();
});
</script>
<ul id="list"></ul>
<table width="100%" class="display" id="table" cellspacing="0" ></table>
Controller
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DataTablesTest.Controllers
{
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
return View();
}
public ActionResult Xhr(TestListModel requestModel)
{
var responseModel = new TestListModel
{
Draw = requestModel.Draw,
RecordsTotal = 50,
RecordsFiltered = 50,
Data = new List<TestModel>(),
};
responseModel.Data.AddRange(
Enumerable.Range(requestModel.Start.Value, requestModel.Length.Value)
.Select(t => new TestModel { Message = "msg" + t })
);
return Content(JsonConvert.SerializeObject(responseModel), "application/json");
}
public class TestListModel
{
[JsonProperty(PropertyName ="draw")]
public int? Draw { get; set; }
[JsonProperty(PropertyName = "start")]
public int? Start { get; set; }
[JsonProperty(PropertyName = "length")]
public int? Length { get; set; }
[JsonProperty(PropertyName = "recordsTotal")]
public int? RecordsTotal { get; set; }
[JsonProperty(PropertyName = "recordsFiltered")]
public int? RecordsFiltered { get; set; }
[JsonProperty(PropertyName = "data")]
public List<TestModel> Data { get; set; }
[JsonProperty(PropertyName = "error")]
public string Error { get; set; }
}
public class TestModel
{
[JsonProperty(PropertyName = "message")]
public string Message { get; set; }
}
}
}