0

jQuery Datatables プラグインを使用しており、テーブルがあるページに追加のコンテンツ (複雑なフィルター) を追加したいと考えています。

通常、コントローラー アクション メソッドはプラグインによって呼び出され、何かを検索したり、列を並べ替えたりするときに使用します。

私が達成したいのは、このアクション メソッドを手動で (Ajax 経由で) 呼び出し、プラグインが通常渡すパラメーターに加えて、複雑なフィルター データを渡すことです。

これは可能ですか？列タイプベースのフィルタリング用のプラグインがあるので、方法が必要だと思います。（非常に似たようなことをするべきだと思います）

問題があれば、ASP.NET MVC でデータテーブルを使用しています。

ありがとう。

4

1 に答える 1

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またはw / eを使用でき、同じように機能します。

ああ、データを手動で更新するには、この質問を見ることができます：ボタンをクリックしたときにjquery datatables fnServerDataをトリガーしてAJAX経由でテーブルを更新するにはどうすればよいですか？

于 2012-07-23T15:31:22.260 に答える