jQuery Datatables，是否可以手动调用动作方法？

Question

我正在使用jQuery Datatables插件，我想添加一些额外的内容（复杂的过滤器）页面，我有我的表。

通常情况下，当我搜索某物，对列进行排序等等时，控制器动作方法会被插件调用。

我想实现的是手动调用此操作方法（通过Ajax），并将我的复杂过滤器数据传递给它，除了插件通常传递的参数。

这可能吗？我相信有一种方法，因为有一个基于列类型的过滤插件。 （我认为它应该做一些非常相似的事情）

我在ASP.NET MVC中使用数据表（如果它很重要）。

谢谢。

Answer 1

其实很简单。我已经做了很多次，所以我会给你一些我使用的代码。

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或w/e作为数据，工作原理相同。

哦，刷新数据手动你可以在这个问题一起来看看：how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?