DataTables not working in asp.net mvc 4

Question

I'm trying to make a website with asp.net mvc 4 & EF6 where user can use sorting, paging & filtering from client side for a table. I'm using DataTables 1.10.4 jQuery plugin for these functions. So far everything loaded perfectly but if I click on the <th> content, columns not get sorting, whatever I type on the filter box, filtering is not working. I don't see any error in my browser console. Here are my codes,

Controller

public ActionResult UserLogin()
    {
        if (Session["UserNAME"] != null)
        {
            var mkimodel = new MkistatVsUserLogin { mkistats = db.mkistats.ToList() };
            return View(mkimodel);
        }
        else
        {
            return RedirectToAction("Home");
        }
    }

View

<table id="mktTable" class="table">
<thead>
<tr>
    <th>CodeName</th><th>% Change</th><th>High Price</th><th>Open Price</th><th>Total Value</th>
</tr>
</thead>
@foreach (var item in Model.mkistats)
{
<tbody>
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_CODE)
    </td>
    <td>
        5%
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_HIGH_PRICE)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_OPEN_PRICE)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_TOTAL_VALUE)
    </td>        
</tr>
</tbody>
}
</table>

_Layout.cshtml

<head>
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
</head>

<body>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/DataTables-1.10.4/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#mktTable').DataTable();
        });        
    </script>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>

Is there something wrong in my code? How can I make dataTables work? Need this help badly. Tnx.

Put alert in your js and check whether your javascript code is working or not — HEEN, Commented Mar 5, 2015 at 5:59
@Sin Oscuras you have a common search textbox or search textbox for each columns ? — Frebin Francis, Commented Mar 5, 2015 at 6:03
@NadeemKhan, I've another jQuery script which I didn't mention here. If that's working so should dataTables. It must be wrong with dataTables plugin. — Shihan Khan, Commented Mar 5, 2015 at 6:04

Mairaj Ahmad · Accepted Answer · 2015-03-05 06:46:02Z

1

Add this in your datatable initialization code.

$('#mktTable').DataTable({
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
});

Here you have to add as many columns as you have in your table. Also you can disable sorting on specific column by setting "bsortable":false. Every column points to index of column in your table.For example if you want to disable sorting on first column you will write like this

$('#mktTable').DataTable({
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
});

Edit

You have written tbody tag in foreach loop. Take this out from foreach loop.

edited Mar 5, 2015 at 6:46

answered Mar 5, 2015 at 6:15

Mairaj Ahmad

14.6k2 gold badges28 silver badges43 bronze badges

Can I skip some, if I want? Or do I must add for all of the columns?
– Shihan Khan
Commented Mar 5, 2015 at 6:17
What you mean by skip ?
– Mairaj Ahmad
Commented Mar 5, 2015 at 6:17
Means, what if I don't want last 3 columns to be sorted should I add bSortable for that also?
– Shihan Khan
Commented Mar 5, 2015 at 6:18
1

yes add bsortable and set it to false for last 3 columns.
– Mairaj Ahmad
Commented Mar 5, 2015 at 6:19
Than see your browser console by pressing F12 and see if there are any errors ?
– Mairaj Ahmad
Commented Mar 5, 2015 at 6:22

| Show 2 more comments

Collectives™ on Stack Overflow

DataTables not working in asp.net mvc 4

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related