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 });
    }
});

现在在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);
    }

您需要添加以下对象以从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?

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

1 个答案: