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

Posted 2023-05-07

【中文标题】jQuery Datatables，是不是可以手动调用操作方法？

【英文标题】：jQuery Datatables, Is it possible to manually call action method?jQuery Datatables，是否可以手动调用操作方法？

【发布时间】：2012-07-21 20:21:41

【问题描述】：

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

通常，控制器操作方法由插件调用，当我搜索某些内容时，对列进行排序等等。

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

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

如果重要的话，我正在使用带有 ASP.NET MVC 的数据表。

谢谢。

【参考方案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?

【讨论】：

嗨 Drakkainen，我认为你的代码很酷。设置单独表单的自定义过滤器后，如何触发 ajax 调用？

你好。我通过在按钮单击事件中绑定 oTable.dataTable() 函数来使其工作。

@finnTheHuman 很抱歉有一段时间没有登录该网站...不过很高兴您可以使用它！只是为了添加任何其他读者，您可以使用 jQuery 'on' 功能。这样您就可以指定它是否处于更改、单击或悬停等状态。***.com/questions/11566463/…