cshtml页面(Asp.net)中未加载脚本表

Question

我正在用bootstrap开发一个asp.net MVC应用程序。我使用footable使我的表具有响应性。我想要的是当它在移动设备中显示时隐藏一些列。就像这个链接一样。http://fooplugins.github.io/FooTable/docs/examples/basic/hiding-columns.html

我正在尝试用javascript来做这件事。但是我得不到表和数据。我在这里调用了错误的链接，还是这与Bootstrap有关？请帮帮忙。

这是我的cshtmlPage代码-

@{
ViewBag.Title = "BarChart";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Models/css/footable.bootstrap.css" rel="stylesheet" />
<link href="~/Models/css/footable.bootstrap.min.css" rel="stylesheet" />
<script src="~/Models/js/footable.js"></script>
<script src="~/Models/js/footable.min.js"></script>

<script>
$('.table').footable({
    "expandFirst": true,
    "columns": [
        { "name": "id", "visible": false },
        { "name": "firstName", "title": "First Name" },
        { "name": "lastName", "title": "Last Name" },
        { "name": "jobTitle", "title": "Job Title", "breakpoints": "xs" },
        { "name": "started", "title": "Started On", "breakpoints": "xs sm" },
        { "name": "dob", "title": "Date of Birth", "breakpoints": "all" }
    ],
    "rows": [
        { "id": 1, "firstName": "Dennise", "lastName": "Fuhrman", "jobTitle": "High School History Teacher", "started": "November 8th 2011", "dob": "July 25th 1960" },
        { "id": 2, "firstName": "Elodia", "lastName": "Weisz", "jobTitle": "Wallpaperer Helper", "started": "October 15th 2010", "dob": "March 30th 1982" },
        { "id": 3, "firstName": "Raeann", "lastName": "Haner", "jobTitle": "Internal Medicine Nurse Practitioner", "started": "November 28th 2013", "dob": "February 26th 1966" },
        { "id": 4, "firstName": "Junie", "lastName": "Landa", "jobTitle": "Offbearer", "started": "October 31st 2010", "dob": "March 29th 1966" },
        { "id": 5, "firstName": "Solomon", "lastName": "Bittinger", "jobTitle": "Roller Skater", "started": "December 29th 2011", "dob": "September 22nd 1964" },
        { "id": 6, "firstName": "Bar", "lastName": "Lewis", "jobTitle": "Clown", "started": "November 12th 2012", "dob": "August 4th 1991" },
        { "id": 7, "firstName": "Usha", "lastName": "Leak", "jobTitle": "Ships Electronic Warfare Officer", "started": "August 14th 2012", "dob": "November 20th 1979" },
        { "id": 8, "firstName": "Lorriane", "lastName": "Cooke", "jobTitle": "Technical Services Librarian", "started": "September 21st 2010", "dob": "April 7th 1969" }
    ]
});
</script>

<table class="table"></table>

Answer 1

由于您的表加载在脚本之后，请将您的脚本放在jquery的文档就绪函数中，然后重试：

@{ ViewBag.Title = "BarChart"；Layout =“~/视图/共享/_Layout.cshtml”；}

<link href="~/Models/css/footable.bootstrap.min.css" rel="stylesheet" />
<script src="~/Models/js/footable.min.js"></script>

<script>
$(function(){
    $('.table').footable({
        "expandFirst": true,
        "columns": [
            { "name": "id", "visible": false },
            { "name": "firstName", "title": "First Name" },
            { "name": "lastName", "title": "Last Name" },
            { "name": "jobTitle", "title": "Job Title", "breakpoints": "xs" },
            { "name": "started", "title": "Started On", "breakpoints": "xs sm" },
            { "name": "dob", "title": "Date of Birth", "breakpoints": "all" }
        ],
        "rows": [
            { "id": 1, "firstName": "Dennise", "lastName": "Fuhrman", "jobTitle": "High School History Teacher", "started": "November 8th 2011", "dob": "July 25th 1960" },
            { "id": 2, "firstName": "Elodia", "lastName": "Weisz", "jobTitle": "Wallpaperer Helper", "started": "October 15th 2010", "dob": "March 30th 1982" },
            { "id": 3, "firstName": "Raeann", "lastName": "Haner", "jobTitle": "Internal Medicine Nurse Practitioner", "started": "November 28th 2013", "dob": "February 26th 1966" },
            { "id": 4, "firstName": "Junie", "lastName": "Landa", "jobTitle": "Offbearer", "started": "October 31st 2010", "dob": "March 29th 1966" },
            { "id": 5, "firstName": "Solomon", "lastName": "Bittinger", "jobTitle": "Roller Skater", "started": "December 29th 2011", "dob": "September 22nd 1964" },
            { "id": 6, "firstName": "Bar", "lastName": "Lewis", "jobTitle": "Clown", "started": "November 12th 2012", "dob": "August 4th 1991" },
            { "id": 7, "firstName": "Usha", "lastName": "Leak", "jobTitle": "Ships Electronic Warfare Officer", "started": "August 14th 2012", "dob": "November 20th 1979" },
            { "id": 8, "firstName": "Lorriane", "lastName": "Cooke", "jobTitle": "Technical Services Librarian", "started": "September 21st 2010", "dob": "April 7th 1969" }
        ]
    });
});
</script>

您可以看到结果here in jsfiddle