我目前正在尝试在ASP.NET中学习和使用DataTable。但是,我无法完成排序功能。我做了代码,我把图标拿出来但是我无法点击它或触发任何事件。我错过了一些javascript还是我应该自己做这个功能?
我参考了这个网站https://datatables.net/examples/basic_init/table_sorting.html
这是我尝试过的代码
主页(仅限脚本)
<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="http://code.jquery.com/jquery-1.12.3.js"></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>
ASPX
<script>
function onPageLoad() {
$(document).on("dblclick", "#tableCourseStructure tbody tr", function () {
var $this = $(this);
var row = $this.closest("tr");
row.find('td:eq(1)');
var courseCode = row.find('td:first').text();
window.location.href = "UpdateCourse.aspx?CourseCode=" + courseCode;
});
}
</script>
<table id="tableCourseStructure" class="table table-striped table-bordered dataTable no-footer hover display" role="grid">
<thead>
<tr role="row">
<th>Course Code</th>
<th>Course Version</th>
<th>Course Title</th>
<th>Last Modified Date</th>
</tr>
</thead>
<tbody>
<%=getCourseData()%>
</tbody>
</table>
ASPX.CS
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;
}
答案 0 :(得分:3)
您似乎错过了将DataTable()
转换为html table
的实际DataTable
函数调用:
$('#tableCourseStructure').DataTable();
你的css可能看起来像DataTable
但没有上述内容你将无法获得任何功能。