Question

我正在研究asp.net MVC-5并创建了一个Bootstrap表来显示数据现在我想应用分页，过滤和排序，为此我搜索了可能的文章并找到了this link，这个技术在这个链接中非常简单，它与我在项目中所做的相同。我已经包含了我的.js和.css个文件

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" />

Bellow是我的剃刀语法

<table id="myTable" class="table table-bordered table-responsive table-hover">
    <tr>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" >
            Name
        </th>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
            Ocurrence Time
        </th>
        <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
            Recover Time
        </th>
    </tr>
    <tbody>
        @{
        if (ViewData["events"] != null)
        {
        if (ViewData.Values != null && ViewData.Values.Count() > 0)
        {
        foreach (System.Data.DataRow dr in (ViewData["events"] as System.Data.DataTable).Rows)
        {
        <tr>
            <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                <span style="font-size:12px;">@dr[0]</span>
            </td>
            <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                <span style="font-size:12px;">@(string.Format("{0:dd MMMM yyyy hh:mm tt}", dr[1]))</span>
            </td>
            <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                <span style="font-size:12px;"> @(string.Format("{0:dd MMMM yyyy hh:mm tt}", dr[2]))</span>
            </td>
        </tr>
        }
        }
        }
        }
    </tbody>
</table>

最后我放置了我的剧本

<script type="text/javascript">
$(document).ready(function () {
    $('#myTable').dataTable();
});

Bellow是控制器代码

//Getting Events from Database
//string query = "SELECT Distinct DE.Occurrence_Time,DE.Recovery_Time FROM Device_Events DE INNER JOIN ADS_Device_Data AD ON AD.Device_ID=DE.Device_ID WHERE 1=1 ";
string query = "SELECT Distinct  e.Event_Name, de.Occurrence_Time, de.Recovery_Time from Device_Events DE inner join Events e on de.Event_ID = e.Event_ID inner join ADS_Device_Data ad on de.Device_ID = ad.Device_ID where 1=1 ";

if (search != "") {
    query += " AND ad.Device_Serial_Number= '" + search + "'";
}

if (time.ToString() != " ") {
    query += " AND de.Occurrence_Time >= '" + time.ToString() + "'";
}


SqlCommand event_command = new SqlCommand(query, con);

//SqlCommand event_command = new SqlCommand("Select Device_Event_ID,Device_ID,Event_ID,Occurrence_Time,Recovery_Time from [Device_Events] where Device_ID=@device_id", con);
//event_command.Parameters.AddWithValue("@device_id", device_id);

con.Open();
SqlDataReader reader_events = event_command.ExecuteReader();

while (reader_events.Read()) {
    //events.Add(Convert.ToString(reader_events["Event_Name"]));
    //events.Add(Convert.ToString(reader_events["Occurrence_Time"]));
    //events.Add(Convert.ToString(reader_events["Recovery_Time"]));
    events.Rows.Add(Convert.ToString(reader_events["Event_Name"]),
        Convert.ToString(reader_events["Occurrence_Time"]),
        Convert.ToString(reader_events["Recovery_Time"]));



    //events.Add(string.Concat(Convert.ToString(reader_events["Event_Name"]) + " - " +" Occur " + Convert.ToString(reader_events["Occurrence_Time"]) + " - " + " Recover " + Convert.ToString(reader_events["Recovery_Time"]).Replace("\n", Environment.NewLine)));

    //events.Add(string.Concat(" Power Failure " + " Event ID # " + Convert.ToString(reader_events["Event_ID"]) + " Device ID # " + Convert.ToString(reader_events["Device_ID"]) + " Occur at " + Convert.ToString(reader_events["Occurrence_Time"]) + " Recover at " + Convert.ToString(reader_events["Recovery_Time"]).Replace("\n", Environment.NewLine)));
    //events.Add(string.Concat(" Power Failure " + " Event ID # " + Convert.ToString(reader_events["Event_ID"]) + ", Device ID # " + Convert.ToString(reader_events["Device_ID"]) + ", Occured " + Convert.ToString(reader_events["Occurrence_Time"]) + ", Recover " + Convert.ToString(reader_events["Recovery_Time"]).ToList().ToPagedList(page ?? 1, 5)));
}
con.Close();

之后我将事件放在了viewdata ViewData["events"] = events;

中

完成所有这些后，我得到了比较结果

未启用分页，排序和过滤

我一定错过了什么

任何帮助都将受到高度赞赏

Answer 1

使用＆lt; thead ＆gt;表格中的标签

<thead>
                              <tr>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" >
                                    Name
                                </th>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                    Ocurrence Time
                                </th>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                    Recover Time
                                </th>
                            </tr>
</thead>

Answer 2

我知道这是一个旧线程，但是这里没有列出对我有用的解决方案，它仍然出现在Google搜索结果的顶部。尝试将defer添加到datatable.js导入

<script defer type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

如果打开开发人员工具（Chrome浏览器）并单击“网络”，则可以查看文件的加载顺序。即使Jquery.js by出现在HTML文件中的DataTables.js之前，但Jquery可能在DataTables加载时尚未完成加载。添加defer可确保datatables.js文件最后加载。

另外，如果您想知道是否以某种方式加载了jquery的两个实例（此问题的另一个可能原因），则可以在开发人员工具的“网络”下看到它。

使用dataTable.js对Bootstrap表进行排序，过滤，分页

2 个答案: