我想使用 jQuery DataTable 但我收到错误

Question

Error我想用 jQuery DataTable 做多列过滤，但是我得到一个错误，我不知道如何解决。

错误： $(...)DataTable 不是函数 TypeError: $(...).DataTable is not a function 未捕获的类型错误：无法读取未定义的属性“列”

你能帮我解决这个错误吗？

我的 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>

Answer 1

试试这个代码。

我已将此代码 #example table 替换为 #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>