在cshtml页面（Asp.net）中未加载Footable

Question

我正在开发一个带有引导程序的 asp.net MVC 应用程序。我已经使用footable 让我的表格响应。我想要的是在移动显示时隐藏一些列。就像在这个链接中一样。 http://fooplugins.github.io/FooTable/docs/examples/basic/hiding-columns.html

我正在尝试使用 javascript 来执行此操作。但我没有得到表格或数据。我在这里调用了错误的链接还是与 Bootstrap 有关？请帮忙。

这是我的cshtml页面代码-

@{
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 = "条形图"; 布局 = "~/Views/Shared/_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