Question

我是ASP.Net MVC的新手，并且一直在致力于将SQL数据库连接到我的项目以显示数据表。我一直在尝试使用简单的html表实现各种功能，最近发现了有关DataTable的信息。看起来它包含了我随意组合的内容，还添加了一些功能，同时清理了很多代码。我遇到的问题是，我似乎无法弄清楚如何使其在html表中很好地播放（因为该表使用Razor语法）。我已按照此处提供的步骤（How to use JQuery Datatable.net with ASP.Net 4 Razor and Twitter Bootstrap）进行操作，似乎对我不起作用。

任何帮助将不胜感激！

@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

您只需要将thead和tbody添加到表中，然后调用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>

和jquery：

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

结合使用JQUERY DataTable和Bootstrap

1 个答案: