Question

我试图在视图中添加数据表，但是在控制台中收到以下错误。到目前为止，数据表尚未出现。我需要添加某个软件包吗？我在共享布局中添加了对数据故事的引用。

 Uncaught TypeError: $(...).DataTable is not a function
at Object.init (Index:157)
at HTMLDocument.<anonymous> (Index:191)
at fire (jquery-1.12.4.js:3232)
at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
at Function.ready (jquery-1.12.4.js:3582)
at HTMLDocument.completed (jquery-1.12.4.js:3617)

这是我的视图视图：

    <button onclick="myFunction()" class="btn btn-info">Having Trouble</button>

    <script>
        function myFunction() {
            alert("If your file fails to download it may be because of a special character used in the file name e.g. & or + or = etc. Please change the name and upload again ");
        }
    </script>


    <center>

        @if (@TempData["msg1"] != null)
        {
            <div class="alert alert-success alert-dismissable" style="width:65%">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                @TempData["msg1"]
            </div>
        }

        @if (@TempData["msg"] != null)
        {
            <div class="alert alert-danger alert-dismissable" style="width:65%">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                @TempData["msg"]
            </div>
        }


        <h2>Attachments- Job ID: @Session["IdSes"]</h2>



        @using (Html.BeginForm("UploadImage", "AttachmentsUser", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <fieldset class="form-horizontal" style="width:70%">
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-4"> <input type="file" name="photo" style="color:black" /><br /> </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <input type="submit" value="Upload File" class="btn btn-warning" />
                        </div>
                    </div>
                </div>

                <div><br /></div>
            </fieldset>
        }



        <div class="panel panel-default list-panel" id="list-panel">

            <div class="panel-body">
                <table id="file_list" class="table table-striped table-bordered" style="width:70%;color:#0057a4"></table>
            </div>
        </div>

    </center>



    @section Scripts
   {
        <script type="text/javascript">
            var assetListVM;

            $(function () {

                assetListVM = {
                    dt: null,

                    init: function () {

                        dt = $('#file_list').DataTable({
                            "serverSide": true,
                            "processing": true,
                            "ajax": {
                                "url": "@Url.Action("GetFiles","AttachmentsUser")",
                                "data": function (d) {
                                    d.s = $('input[type=search]').val();
                                }
                            },
                            "columns": [
                                { "title": "FileName", "data": "file_name", "searchable": true },
                                {
                                    "title": "Actions",
                                    "data": "file_name",
                                    "searchable": false,
                                    "sortable": false,
                                    "render": function (data, type, full, meta) {
                                        return '<a href="@Url.Action("Download","AttachmentsUser")?file=' + data + '" class="download">Download</a> | <a href="@Url.Action("Delete","AttachmentsUser")?file=' + data + '" class="delete">Delete</a>';
                                    }
                                }
                            ],

                        });
                    },

                    refresh: function () {
                        dt.ajax.reload();
                    }
                }

                $('body').on('keyup', 'input[type=search]', function () {
                    assetListVM.refresh();
                });
                // initialize the datatables
                assetListVM.init();
            });

        </script>
    }

如何解决此错误？这是一个朋友的代码，可以在他们的项目中使用，所以我认为这可能是我需要的软件包，但我不确定。

共享视图：

    <div class="body-content">
    @RenderBody()
    <hr />

    <footer align="center">
        <p>&copy; @DateTime.Now.Year - LotusWorks</p>

    </footer>

</div>

@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/DataTables")
@RenderSection("scripts", required: false)

捆绑配置：

  public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
               "~/Scripts/jquery-ui-{version}.js"));
        //css  
        bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(
               "~/Content/jquery-ui.css"));

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
        "~/Scripts/DataTables/jquery.dataTables.min.js",
        "~/Scripts/DataTables/dataTables.bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/datatables").Include(
                  "~/Content/DataTables/css/dataTables.bootstrap.css"));
    }

Answer 1

$（...）。DataTable不是函数

这意味着与datatable相关的js文件在此页面中不可用。请以某种方式确保要调用datatable函数的页面上有js个相关的必需DataTable()文件。然后错误就会消失。

ASP。 NET MVC数据表TypeError：$（...）。DataTable不是函数

1 个答案: