Using Select with datatables column filtering and MVC Server Side Processing

Question

I've been working on a project using the JQuery plugin datatables and .NET MVC3 framework. I'm using an AJAX controller to do server side processing. I have also been using the "columnfiltering" datatables plugin to do individual column filtering. It works great with text inputs and number ranges. I am having a problem with the select though. I can get a select field to show up and I even know how to give it specific options in this manner

 $('#example').dataTable()
      .columnFilter({
        aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  }
    });

But I want to have the select auto-populate from the data in the table. Is there any way to do this, I know I could just create another ajax controller and use JQuery to hit that controller to give me the data I want, but I would much rather wrap it into the table controller I already have. Thanks!

markpsmith markpsmith · Accepted Answer · 2015-02-16T16:13:49

You can use fnServerParams if you return json from the MVC controller like this:

return Json(new
{
    param.sEcho,
    iTotalRecords = baseqry.TotalRecordCount,
    iTotalDisplayRecords = baseqry.TotalRecordCount,
    aaData = result,
    selectListData = MySelectlistData
}, JsonRequestBehavior.AllowGet);

Where aaData is the data to populate the datatable, and selectListData is the data for the selectlist.

In the datatable init code, you get the selectListData value like this:

"fnServerData": function (sSource, aoData, fnCallback) {
    $.getJSON(sSource, aoData, function (json) {
        var selectlist = json.selectListData;
    }
    fnCallback(json); // this call populates the datatable
});

Using Select with datatables column filtering and MVC Server Side Processing

1 Answers