Bootstrap table sorting, filtering, pagination using dataTable.js
<p>I am working on asp.net MVC-5 and created a Bootstrap table to show data 
Now i want to apply pagination, filtering and sorting, for this i searched may articles and found <a href="http://www.codeproject.com/Tips/823490/Bootstrap-Table-With-Sorting-Searching-and-Paging" rel="nofollow noreferrer">this link</a>, the technique is very simple in this link and it's same to what i am doing in my project. Bellow i have included my <code>.js</code> and <code>.css</code> files </p>

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

&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
&lt;link rel="icon" href="favicon.ico" type="image/ico" /&gt;
&lt;link rel="shortcut icon" href="~/favicon.ico" /&gt;
</code></pre>

<p>Bellow is my razor syntax for table </p>

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

<p>At the end i have placed my script </p>

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

<p></p>

<p>Bellow is the controller code </p>

<pre><code>//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 &gt;= '" + 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();
</code></pre>

<p>After that i have placed the events in viewdata <code>ViewData["events"] = events;</code></p>

<p>After doing all this i got bellow result </p>

<p><a href="https://i.stack.imgur.com/76jWV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/76jWV.jpg" alt="enter image description here"></a></p>

<p>No paging, sorting and filtering is enabled </p>

<p>I must be missing something </p>

<p>Any help will be highly appreciated</p>