It is quite simple actually. I have done it plenty of times so I'll give you some of the code I use.
JS:
oTable.dataTable({
"bJQueryUI": true,
"bAutoWidth": false,
"bProcessing": true,
"bDestroy": true,
"sPaginationType": "full_numbers",
"bStateSave": false,
"bServerSide": true,
"bPaginate": false,
"bSort": false,
"bFilter": false,
"sAjaxSource": "/ByUser/DetailsData",
"bDeferRender": false,
"aoColumns": [
{ "sWidth": "5%", "bSearchable": false },
{ "sWidth": "10%", "bSearchable": false },
{ "sWidth": "3%", "bSearchable": false },
{ "sWidth": "6%", "bSearchable": false },
{ "sWidth": "5%", "bSearchable": false },
{ "sWidth": "5%", "bSearchable": false },
{ "sWidth": "5%", "bSearchable": false }
],
"fnInitComplete": function () {
$(oTable).show();
$("#theGrid td:nth-child(1)").addClass("fileID");
$("#theGrid td:nth-child(6)").addClass("taskID");
checkComplianceNoMid("theGrid", 7);
},
"fnServerParams": function (aoData) { //These are the extra parameters from my custom filters
var BU = $("#SLABU").val();
aoData.push({ "name": "BU", "value": BU });
var SLAUser = $("#SLAUSER").val();
aoData.push({ "name": "User", "value": SLAUser });
var SLAStep = $("#SLASTEP").val();
aoData.push({ "name": "Step", "value": SLAStep });
}
});
Now in the Controller:
public ActionResult DetailsData(jQueryDataTableParamModel param, string BU, string User, string step)
{
var context = new OpenTask();
context.CommandTimeout = 120;
IList<SLAOpenTaskPersonDetails> SLAList = context.SLAOpenTaskPersonDetails1.Where(x => x.userid == User).Where(x => x.BU == BU).Where(x => x.SLA_Name == step).ToList();
int rowCount = SLAList.Count();
var list = SLAList.Select(c => new[]{
c.File_no.ToString() ?? null,c.AssuredName.ToString() ?? null,c.Plan_SLA.ToString() ?? null,c.Since_date.ToString() ?? null,
c.Since_Day.ToString() ?? null, c.taskid.ToString() ?? null, c.SLA_compliance.ToString() ?? null
});
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = context.SLAOpenTaskPersonDetails1.Count(),
iTotalDisplayRecords = rowCount,
aaData = list
}, JsonRequestBehavior.AllowGet);
}
You will need to add the following object to get the data from the aoData object:
/// <summary>
/// Class that encapsulates most common parameters sent by DataTables plugin
/// </summary>
public class jQueryDataTableParamModel
{
/// <summary>
/// Request sequence number sent by DataTable,
/// same value must be returned in response
/// </summary>
public string sEcho { get; set; }
/// <summary>
/// Text used for filtering
/// </summary>
public string sSearch { get; set; }
/// <summary>
/// Number of records that should be shown in table
/// </summary>
public int iDisplayLength { get; set; }
/// <summary>
/// First record that should be shown(used for paging)
/// </summary>
public int iDisplayStart { get; set; }
/// <summary>
/// Number of columns in table
/// </summary>
public int iColumns { get; set; }
/// <summary>
/// Number of columns that are used in sorting
/// </summary>
public int iSortingCols { get; set; }
/// <summary>
/// Comma separated list of column names
/// </summary>
public string sColumns { get; set; }
}
Now my function didn't include serverside ordering so here is an example of that:
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
Func<SLAHistoricalDetail, decimal> orderingFunctionDec = (x => sortColumnIndex == 3 ? Convert.ToDecimal(x.quetime) :
Convert.ToDecimal(x.locktime));
Func<SLAHistoricalDetail, string> orderingFunction = (x => sortColumnIndex == 0 ? x.File_no.ToString() :
sortColumnIndex == 1 ? x.Assured_Name.ToString() :
sortColumnIndex == 2 ? x.Plan_SLA.ToString() :
sortColumnIndex == 5 ? x.taskid.ToString() :
x.SLA_Metric.ToString());
var sortDirection = Request["sSortDir_0"];
if (sortDirection == "asc")
{
if (sortColumnIndex == 3 || sortColumnIndex == 4)
{
SLAList = SLAList.OrderBy(orderingFunctionDec).ToList();
}
else
{
SLAList = SLAList.OrderBy(orderingFunction).ToList();
}
}
else
{
if (sortColumnIndex == 3 || sortColumnIndex == 4)
{
SLAList = SLAList.OrderByDescending(orderingFunctionDec).ToList();
}
else
{
SLAList = SLAList.OrderByDescending(orderingFunction).ToList();
}
}
Then you can return the SLAList.
I know this is a lot of code and examples. I can explain any specifics if you want.
Also I'm using ADO.NET but you can use SQL or w/e for your data, works the same.
Oh and to refresh the data manually you can take a look at this question : how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?