How to use JQuery Datatable.net with ASP.Net 4 Razor and Twitter Bootstrap

Question

I want to use the jQuery Datatable with ASP.net MVC and Twitter bootstrap.

Does anyone have already done this ?

Answer 1

This may be an old post but I just wanted to add how I got things set up. It seems to be easier than how codea did it above.

1) In your view, simply create your table like normal (with a @foreach or some such thing) and give it an ID of jqueryTable. Then download the following 3 files and put them in the ~/Scripts/ and the ~/Content/ folders:

dataTables.bootstrap.css

jquery.dataTables.js

dataTables.bootstrap.js

Now add those files to your BundleConfig.cs file using the following code:

bundles.Add(new ScriptBundle("~/Scripts/datatables").Include(
    "~/Scripts/jquery.dataTables.js",
    "~/Scripts/dataTables.bootstrap.js"));

bundles.Add(new StyleBundle("~/Content/datatables").Include(
    "~/Content/dataTables.bootstrap.css"));

Finally, add the following to the view where you created your table (note that the JS file order matters!):

@Styles.Render("~/Content/datatables")

@section Scripts {
    @Scripts.Render("~/Scripts/datatables")

    
}

The JS code above simply finds your table (with an ID of jqueryTable) and initializes the datatables JS on it. Also, for this to work, the ~/bundles/jquery will need to be included in your _Layout.cshtml file (which it should be by default).