Question

I downloaded the Jquery Data Table and the Jquery DataTable.Filter Plugin.

Here is the code i am working on.

var oTable = $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/User/DataProviderAction",
        "bJQueryUI": true
    });

    oTable.columnFilter({ sPlaceHolder: "head:before",
        aoColumns: [{ type: "select", values: ["Box Office", "Concessions"] },
                    { type: "select",values: ["Administrator","Sales People"]},
                    {type: "text"}

                    ]
    });

QUESTION: Instead of hardcoding the values in aoColumns how would I go about getting it to load values from the database. I am using MVC. I do have a method set up returning string values in my repository, if that helps.

Answer 1

You could retreive your database values from from your controller by doing a jquery ajax call and then setting Javascript variables to the response value which you can use in your datatable. I’ve got a pseudo example below.
Your controller would return a Json response, which could be a Model:

YourModel model = new YourModel();
model.DBList1 = SomeValue;
model.DBList2 = SomeOtherValue;
return Json(model); // Use return Json(model, JsonRequestBehavior.DenyGet); if you want to limit access to post only.

If your doing a Post from the ajax call, remember to include the [HttpPost] attribute on the Controller Action.

$(document).ready(function () {

var List1;
var List2;

$.ajax({
    type: "POST",
    url: "Controller URL",
    contentType: "application/json; charset=utf-8",
    ...
    ...
    success: function(response) {
    List1 = response.DBList1;
    List2 = response.DBList2;
    }
});


var oTable = $('#myDataTable').dataTable({ 
    "bServerSide": true, 
    "sAjaxSource": "/User/DataProviderAction", 
    "bJQueryUI": true 
    }); 

    oTable.columnFilter({ sPlaceHolder: "head:before", 
    aoColumns: [{ type: "select", values: List1 }, 
                { type: "select",values: List2 }, 
                {type: "text"} 

                ] 
    }); 

});