我想用jQuery DataTable进行多列筛选,但我得到一个错误,不知道如何解决。
错误:$(...)DataTable不是函数类型错误:$(...)。DataTable不是函数未捕获的类型错误:无法读取未定义的属性“column”
你能帮我解决这个错误吗?
我的HTML代码,
@using MvcOnlineTicariOtomasyon.Models.Siniflar;
@model List<Urun>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<br />
<table id="example" class="display table table-hover" style="width:100%">
<thead>
<tr class="table-active">
<th>ID</th>
<th>Ürün</th>
<th>Marka</th>
<th>Stok Adedi</th>
<th>Alış Fiyatı</th>
<th>Satış Fiyatı</th>
<th>Kategori</th>
<th>Görsel</th>
<th width="10%">Güncelle</th>
<th>Sil</th>
</tr>
</thead>
@foreach (var u in Model)
{
<tbody>
<tr>
<td id="i">@u.UrunId</td>
<td>@u.UrunAd</td>
<td>@u.Marka</td>
<td>@u.Stok</td>
<td>@u.AlisFiyat ₺</td>
<td>@u.SatisFiyat ₺</td>
<td>@u.Kategori.KategoriAd</td>
<td>@u.UrunGorsel</td>
<td width="10%"><a href="/Urun/UrunGetir/@u.UrunId" class="btn btn-warning">Güncelle</a></td>
<td><a href="/Urun/UrunSil/@u.UrunId" class="btn btn-danger">Sil</a></td>
</tr>
</tbody>
}
</table>
<a href="/Urun/YeniUrun/" class="btn btn-primary">Ürün Ekle</a>
<link href="~/dosya/fixedHeader.dataTables.min.css" rel="stylesheet" />
<link href="~/dosya/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/dosya/jquery-3.5.1.js"></script>
<script src="~/dosya/jquery.dataTables.min.js"></script>
<script src="~/dosya/dataTables.fixedHeader.min.js"></script>
<script>
$(document).ready(function () {
// Setup - add a text input to eenter code hereach footer cell
$('#example thead tr').clone(true).appendTo('#example thead');
$('#example thead tr:`enter code here`eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + ' Ara" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
var table = $('#example table').DataTable({
orderCellsTop: true,
fixedHeader: true
});
});
</script>
试试这个代码。
我已经用#example
替换了这个代码#example
。因为您的表ID是“#example”。
<script>
$(document).ready(function () {
// Setup - add a text input to eenter code hereach footer cell
$('#example thead tr').clone(true).appendTo('#example thead');
$('#example thead tr:`enter code here`eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + ' Ara" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true
});
});
</script>