1
Я работаю над asp.net MVC-5 и создал таблицу Bootstrap для отображения данных Теперь я хочу применить разбиение на страницы, фильтрацию и сортировку, для этого я искал статьи и нашел this link, техника очень проста в этой ссылке, и это то же самое, что я делаю в своем проекте. Пыльник я включил мои .js и .css файлыСортировка, фильтрация, разбиение на страницы загрузочного стола с использованием dataTable.js
<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" />
Беллоу моя бритва синтаксис таблицы
<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();
});
пыльник является кодом контроллера
//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 [email protected]_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;
После всего этого я получил сильфона результат
Нет подкачки, сортировка и фильтрация включена
I должно быть утеряно
Любая помощь будет высоко оценен
Что версия вашего DataTable плагин? Также, если вы используете 'version> 1.10', используйте' $ ('# myTable'). DataTable(); 'вместо' $ ('# myTable'). DataTable(); ' –
Также попробуйте включить сортировку для несколько столбцов в явном виде и посмотрите, работает ли оно. Попробуйте что-то вроде '$ ('# myTable'). DataTable ({order: [[3, 'desc'], [0, 'asc']]});' –
@ parkash: Я загрузил из этой ссылки https://datatables.net/download/ также я изменил .dataTable(); к DataTable(); ничего не происходит –