asp repeater and jquery.dataTable
本文关键字:dataTable jquery and repeater asp | 更新日期: 2023-09-27 18:31:12
也许有人可以帮助我。当页面被调用时,排序,分页等...未显示。我只在浏览器中收到此错误:TypeError: $ (...) DataTable is not a function
.
JQuery 在Layout.master
中具有约束力。
对不起,我的英语不好;我希望我已经提供了您需要的所有信息。
.asp:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body table-responsive no-padding">
<table id="nutzer" class="table table-hover table-condensed">
<thead>
<tr>
<th>Nr</th>
<th>Kdnr</th>
<th>Benutzername</th>
<th>Name</th>
<th>E-Mail</th>
<th>Wo/Bereich</th>
<th>Gesperrt</th>
<th>Details</th>
</tr>
</thead>
<tbody data-link="row" class="rowlink">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Nr").ToString()%></td>
<td><%# Eval("ADRNR").ToString() %></td>
<td><%# Eval("Name").ToString()%></td>
<td><%# Eval("Langname").ToString()%></td>
<td><%# Eval("Email").ToString()%></td>
<td><%# Eval("Wo").ToString()%></td>
<td><span class="glyphicon glyphicon-<%# Convert.ToBoolean(Eval("gesperrt").ToString()) ? "ok" : "remove" %>" aria-hidden="true"></span></td>
<td><a href="UserDetails.aspx?nr=<%# Eval("Nr").ToString()%>">Details</a></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</FooterTemplate>
</asp:Repeater>
<script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#nutzer').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false
});
});
</script>
请参考下面的代码可以提供帮助。
<asp:Repeater ID="YourRepeaterId" runat="server">
<HeaderTemplate>
<table class="table table-striped table-bordered table-hover" id="TableId">
<thead>
<tr style="background-color:#1261A6 ;color:white">
<th>Column Name</th>
<th>Column Name</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Column1") %>' />
</td>
<td>
<asp:Label ID="lblNoOfInvestigation" runat="server" Text='<%# Eval("Column2") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
然后在下面添加 jquery 代码。
<script src="jquery.dataTables.min.js"></script>
<link href="jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#TableId').DataTable({
"paging": true,
fixedHeader: true,
scrollY: '60vh',
scrollX: true,
scrollCollapse: true
})
});
</script>