실제로는 매우 간단합니다. 나는 내가 사용하는 코드 중 일부를 줄 것이다.
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 });
}
});
:
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);
}
당신은 aoData 오브젝트의 데이터를 얻기 위해 다음과 같은 개체를 추가해야합니다 : 이제
/// <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; }
}
을 내 기능에는 서버 측 주문이 포함되어 있지 않으므로 여기에 그 예가 나와 있습니다.
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();
}
}
그러면 SLAList를 반환 할 수 있습니다.
나는 이것이 많은 코드와 예제라는 것을 알고있다. 네가 원한다면 나는 어떤 세부 사항도 설명 할 수있어. 또한 ADO.NET을 사용하고 있지만 데이터에 SQL 또는 승/전자를 사용할 수 있으며 동일하게 작동합니다.
아, 그리고 수동으로이 질문에 좀 걸릴 수 있습니다 데이터를 새로 고칩니다 : how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?
죄송합니다 늦게 응답. 고마워. –
안녕하세요 Drakkainen, 귀하의 코드가 멋지다고 생각합니다. 별도의 양식에있는 사용자 정의 필터를 설정 한 후 어떻게 AJAX 호출을 트리거 할 수 있습니까? – finnTheHumin
안녕하세요. 버튼 클릭 이벤트에서 oTable.dataTable() 함수를 바인딩하여 작동 시켰습니다. – finnTheHumin