Jquery DataTables FIlter插件 - 如何填充过滤器动态获取数据库中的数据

时间:2012-10-05 16:07:57

标签: jquery asp.net-mvc-3 datatables

我下载了Jquery数据表和Jquery DataTable.Filter插件。

这是我正在处理的代码。

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"}

                    ]
    });

问题:如何在aoColumns中对值进行硬编码,而不是如何从数据库中加载值。我正在使用MVC。我确实有一个方法设置在我的存储库中返回字符串值,如果这有帮助。

1 个答案:

答案 0 :(得分:2)

您可以通过执行jquery ajax调用,然后将Javascript变量设置为可在数据表中使用的响应值,从控制器中检索数据库值。我在下面有一个伪示例。 您的控制器将返回Json响应,该响应可以是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.

如果您从ajax调用中执行发布操作,请记住在Controller Action上包含[HttpPost]属性。

$(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"} 

                ] 
    }); 

});