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

Posted 2023-04-13

【中文标题】我想使用 jQuery DataTable 但我收到错误

【英文标题】：I want to use a jQuery DataTable but I'm getting an error

【发布时间】：2021-06-29 05:23:03

【问题描述】：

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

【问题讨论】：

所以？错误是什么？

$(...)DataTable is not a function TypeError: $(...).DataTable is not a function Uncaught TypeError: Cannot read property 'column' of undefined

也分享你的html。是否包含数据库文件？

【参考方案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>

【讨论】：

谢谢。我做了，但没有任何改变

感谢您的帮助，它在您发送的链接上有效，但在我的项目中无效。

@CNone，你能做一个小提琴吗？