Use JQUERY DataTable with Bootstrap

Question

I am new to ASP.Net MVC and have been working on connecting an SQL database to my project to display tables of data. I have been trying to implement various features using a simple html table and recently found out about DataTable. It looks like it encompasses what I have haphazardly put together and also adds a few features while simultaneously cleaning up a lot of my code. The problem that I am having is that I can't seem to figure out how to make it play nicely with my html table (as the table uses Razor syntax). I have followed the steps provided here (How to use JQuery Datatable.net with ASP.Net 4 Razor and Twitter Bootstrap) and it did not seem to work for me.

Any help would be greatly appreciated!

@model IEnumerable<Grant_Tracker.Models.Old_Work>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Work Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<input type="text" id="date" onkeyup="byDate()" placeholder="Search by date...">

<input type="text" id="name" onkeyup="byName()" placeholder="Search by name...">

<table class="table" id="reportTable">
    <tr>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Date)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.User.User_Name)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Description)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Location)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Hours)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.District.District_Name)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.New_Work.Category_Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.User.User_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Location)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Hours)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.District.District_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.New_Work.Category_Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Work_ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.Work_ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Work_ID })
        </td>
    </tr>
}
</table>

<div>
    <input class="btn btn-success" value="Export" onclick="ExcelReport();" />
    <iframe id="txtArea1" style="display:none"></iframe>
</div>

<script>
    function byDate()
    {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("date");
        filter = input.value.toUpperCase();
        table = document.getElementById("reportTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    function byName()
    {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("name");
        filter = input.value.toUpperCase();
        table = document.getElementById("reportTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    function ExcelReport()
    {
        var tab_text = "<table border='2px'><tr bgcolor='##5cb85c'>";
        var textRange; var j = 0;
        tab = document.getElementById('reportTable'); // Table ID

        for (j = 0; j < tab.rows.length; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
        }

        tab_text = tab_text + "</table>";
        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); // Does not allow links
        tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // Does not allow images
        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // Removes input parameters

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // Used for Internet Explorer
        {
            txtArea1.document.open("txt/html", "replace");
            txtArea1.document.write(tab_text);
            txtArea1.document.close();
            txtArea1.focus();
            sa = txtArea1.document.execCommand("SaveAs", true, "Report.xls");
        }
        else                 
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  // Used for other browsers

        return (sa);
    }
</script>

Answer 1

you just need to add thead and tbody to your table and then call datatable :

<table class="table" id="reportTable">
  <thead>
    <tr>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Date)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.User.User_Name)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Description)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Location)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.Work_Hours)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.District.District_Name)
        </th>
        <th width="150">
            @Html.DisplayNameFor(model => model.New_Work.Category_Name)
        </th>
        <th></th>
    </tr>
  </thead>

  <tbody>
  @foreach (var item in Model)
  {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.User.User_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Location)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Work_Hours)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.District.District_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.New_Work.Category_Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Work_ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.Work_ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Work_ID })
        </td>
    </tr>
  }
  <tbody>
</table>

and jquery :

<script>
  $(".table").DataTable();
</script>