2012-07-23 4 views
0

jQuery Datatables 플러그인을 사용하고 있는데 내 테이블이있는 페이지에 몇 가지 추가 콘텐츠 (복합 필터)를 추가하고 싶습니다.jQuery Datatables, 수동으로 액션 메소드를 호출 할 수 있습니까?

일반적으로 제어기 조치 메소드는 플러그인을 통해 호출되며, 검색 할 때, 열을 정렬 할 때 등등.

달성하고자하는 것은 수동으로 (Ajax를 통해)이 조치 메소드를 호출하고 플러그인이 정상적으로 전달하는 매개 변수 외에도 복잡한 필터 데이터를 전달하는 것입니다.

이것이 가능합니까? 열 유형 기반 필터링을위한 플러그인이 있으므로 방법이 있어야한다고 생각합니다. (나는 아주 비슷한 일을해야한다고 생각한다.)

ASP.NET MVC가 중요한 데이터 테이블을 사용하고있다.

감사합니다.

답변

4

실제로는 매우 간단합니다. 나는 내가 사용하는 코드 중 일부를 줄 것이다.

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?

+0

죄송합니다 늦게 응답. 고마워. –

+0

안녕하세요 Drakkainen, 귀하의 코드가 멋지다고 생각합니다. 별도의 양식에있는 사용자 정의 필터를 설정 한 후 어떻게 AJAX 호출을 트리거 할 수 있습니까? – finnTheHumin

+0

안녕하세요. 버튼 클릭 이벤트에서 oTable.dataTable() 함수를 바인딩하여 작동 시켰습니다. – finnTheHumin

관련 문제