javascript - 带有 mvc 项目的 jquery 数据表不起作用

Question

我正在尝试使用 Jquery.Datatable 生成表，该表已生成但没有呈现数据，当开发人员工具打开时出现常规错误，尽管 jquery 和数据表引用按顺序添加到页面， 所以这里有任何帮助

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/jquery.dataTables.js"></script>


 <table id="datatableId" data-url="@Url.Action("Index","Home")" cellspacing="0" width="100%" class="table table-responsive table-bordered table-striped">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Data</th>
                    <th>Actions</th>
                </tr>

            </thead>
            <tbody></tbody>
        </table>


<script>
    var datatable = {
        table: null,
        initializedDataTable: function () {
            var $tablea = $(".table-striped");
            datatable.table = $tablea.DataTable({
                processing: true,
                serverSide: true,
                "alengthMenu": [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]],
                ajax: {
                    url: $tablea.prop("data-url"),
                    type: "POST"
                },
                "columns": [{ "data": "FirstName" },
                { "data": "LasttName" },
                { "data": "Gender" }],

                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var inner = '<div class="btn-group">' +
                                '<button type="button" class="btn btn-secondary dropdwon-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                                'Actions' +
                                '</button>' +
                                '<div class="dropdown-menu">' +
                                '<a href="#"  class="drop-down-item btn btn-default edit" data-id="' + row.id + '" >Edit</a>' +
                                '<a href="#"  class="drop-down-item btn btn-default delete" data-id="' + row.id + '" >delete</a>' +
                                '</div>' +
                                '</div>';

                            return inner;
                        },
                        "targets": -1

                    }
                ],
                "pagingType": "full_numbers"

            });
            datatable.table.on('draw', function () {
                $('button[data-type="delete"]').click(function () {
                    var $button = $(this);

                });
                $('button[data-type="Edit"').click(function () {

                });
            });


        },
        getData: function () {
            if (datatable.table == null) {
                datatable.initializedDataTable();

            } else {
                datatable.table.ajax.reload();
            }
        }

    }

    $(document).ready(function () {
        datatable.getData();
    });
</script>

Answer 1

看来你的文件路径应该是

<script src="~/Scripts/jquery.dataTables.js"></script>

代替

<script src="~/Content/jquery.dataTables.js"></script>

也尝试用下面的代码替换您的本地引用

<script src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" />

因为你使用的jQuery版本太旧了。