Question

I am using jQuery Datatables plugin and I want to add some extra content (complex filters) to page that I have my table.

Normally, controller action method is called by plugin, when I search something, sort the columns and so on.

What I want to achieve is to call this action method manually (via Ajax) and pass my complex filter data to it in addition to parameters that plugin is normally passing.

Is this possible ? I believe there has to be a way, since there is a plugin for column type based filtering. ( I think it should be doing something very similar )

I am using datatables with ASP.NET MVC if it matters.

Thanks.

Answer 1

It is quite simple actually. I have done it plenty of times so I’ll give you some of the code I use.

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

Now in the 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);
    }

You will need to add the following object to get the data from the aoData object:

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

Now my function didn’t include serverside ordering so here is an example of that:

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

Then you can return the SLAList.

I know this is a lot of code and examples. I can explain any specifics if you want.
Also I’m using ADO.NET but you can use SQL or w/e for your data, works the same.

Oh and to refresh the data manually you can take a look at this question : how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?