c# - linq query results to datatable in View

Question

Is there any way how to display the linq query results using the datatable in jquery?

Example:

In my controller:

public ActionResult All_Refers()
    {
        var results = db.rms_referred_vw.ToList();
        return PartialView(results);
    }

In my view:

@model IEnumerable<RMSystem.Models.rms_referred_vw>

<table id="example">
<thead>
    <tr>
        <th>Referral ID</th>
        <th>Badge No</th>
        <th>Full Name</th>
        <th>Department</th>
        <th>Email</th>
        <th>Date Hired</th>
        <th>Referred By</th>
        <th>Date Referred</th>
        <th>Is Active?</th>
    </tr>
</thead>
<tbody>

@foreach(var rfp in Model){
    <tr>
        <td>
             @Ajax.ActionLink(Convert.ToString(rfp.rf_id), "Edit_Ref", new { rf_id = rfp.rf_id },
                    new AjaxOptions
                    {
                      HttpMethod = "POST",
                      InsertionMode = InsertionMode.Replace,
                      UpdateTargetId = "target6",
                    }, new  {@style="color:darkblue", title = "Edit Referred Person"})
        </td>
        <td>@Html.DisplayFor(model => rfp.rf_badgeno)</td>
        <td>@Html.DisplayFor(model => rfp.Fullname)</td>
        <td>@Html.DisplayFor(model => rfp.dept)</td>
        <td>@Html.DisplayFor(model => rfp.user_email)</td>
        <td>@Html.DisplayFor(model => rfp.user_datehired)</td>
        <td>@Html.DisplayFor(model => rfp.referredby)</td>
        <td>@Html.DisplayFor(model => rfp.rf_createddate)</td>
        <td>
            @if (rfp.rf_isactive == true) { 
                <text>Yes</text>
            }else{
               <text>No</text>
            }
        </td>
         <td><input type="button" value="Send Email for Regularization"/></td>
    </tr>
    }


</tbody>

But when I try to use this one, I got an error that says

"0x800a138f - JavaScript runtime error: Unable to get property 'fnSetData' of undefined or null reference ,"

What does this mean?

Any idea how should I make the query results be viewed using the datatable format in jquery?

Thank you so much for you help.

Here's my script code:

<script>
    $(function(){
        $("#example").dataTable();
    })
</script>

Answer 1

You have specified 9 columns headers in head and inserting 10 column values in the body.I suspect you forget to add a columns header.Add one more columns header in head tag and check.