Alvin Alvin - 11 months ago 60
ASP.NET (C#) Question

Unable to use the sorting function of DataTable

I am currently trying to learn and make use of DataTable in ASP.NET. However, I couldn't do the sorting function out. I did the code, I've the icons out but I am not able to click it or trigger any events. Am I missing out some javascript or am I supposed to do the function out myself?

I am referencing to this website

Here's the code that I've tried

Masterpage (only scripts)

<link href="Content/bootstrap.min.css" rel="stylesheet" />

<!-- Custom CSS -->
<link href="Content/sb-admin.css" rel="stylesheet" />
<link href="Content/customCSS.css" rel="stylesheet" />
<link href="Content/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="Content/DataTables-1.10.12/media/css/jquery.dataTables.min.css" rel="stylesheet" />

<!-- Morris Charts CSS -->
<link href="Content/plugins/morris.css" rel="stylesheet" />

<!-- Custom Fonts -->
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- Bootstrap Core JavaScript -->
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src=""></script>
<script src="Content/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="Content/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="Scripts/plugins/morris/raphael.min.js"></script>
<script src="Scripts/plugins/morris/morris.min.js"></script>
<script src="Scripts/plugins/morris/morris-data.js"></script>


function onPageLoad() {
$(document).on("dblclick", "#tableCourseStructure tbody tr", function () {
var $this = $(this);
var row = $this.closest("tr");
var courseCode = row.find('td:first').text();
window.location.href = "UpdateCourse.aspx?CourseCode=" + courseCode;

<table id="tableCourseStructure" class="table table-striped table-bordered dataTable no-footer hover display" role="grid">
<tr role="row">
<th>Course Code</th>
<th>Course Version</th>
<th>Course Title</th>
<th>Last Modified Date</th>


protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
retrieveBAL retrieveBAL = new retrieveBAL();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "sortingTable();", true);


protected void ddlCourseCategory_SelectedIndexChanged(object sender, EventArgs e)
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);

public string getCourseData()
string data = "";
retrieveBAL retrieveBAL = new retrieveBAL();

foreach (DataRow row in retrieveBAL.retrieveCourseInfoByCategory(ddlCourseCategory.SelectedValue).Tables[0].Rows)
data += "<tr><td>" + row["courseCode"].ToString() + "</td><td>" + row["courseVersion"].ToString() + "</td><td>" + row["courseTitle"].ToString() + "</td><td>" + row["LastModifiedDate"].ToString() + "</td></tr>";

return data;


Ted Ted
Answer Source

It seems that you are missing the actual DataTable() function call that will turn your html table into a DataTable:


Your css may make it look like a DataTable but without the above you will not get any functionality.