Блог

В настоящее время я пытаюсь изучить и использовать DataTable в ASP.NET . Однако я не смог выполнить функцию сортировки. Я выполнил код, у меня есть значки, но я не могу щелкнуть по нему или вызвать какие-либо события. Я пропускаю какой-то javascript или я должен выполнить эту функцию самостоятельно?

Я ссылаюсь на этот веб-сайт https://datatables.net/examples/basic_init/table_sorting.html

Вот код, который я пробовал

Masterpage (только скрипты)

   <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;

    }
 

Кажется, что вам не хватает фактического DataTable() вызова функции, который превратит ваш html table в DataTable :

 $('#tableCourseStructure').DataTable();
 

Ваш css может сделать его похожим на a DataTable , но без вышеупомянутого вы не получите никакой функциональности.