引用所有必需的文件时,数据表功能不起作用

时间:2018-12-11 13:50:58

标签: jquery asp.net-mvc datatables

这里是Bundle.Config文件。

using System.Web;
using System.Web.Optimization;

namespace DataTableDemo
{
    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",
                        "~/Scripts/datatables/jquery.datatables.js"  // This is the datatable script file.
                        ));

            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/datatables/datatables.bootstrap.js",  // This is the datatable bootstraip script file.
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/css/datatables.bootstrap.css",      // This is the datatable bootstrap css file.
                      "~/Content/site.css"));
        }
    }
}

_布局页面!所有脚本均已渲染。

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Global.asax文件...已配置捆绑包。

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

这是实际表所在的索引页。 看!一切都好。 但是DataTable在智能感知中没有显示。 并在运行模式下。数据表不起作用。

(查询代码写在页面底部...)

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

<table id="students" class="table table-bordered">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Gender</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Rehan Shah</td>
        <td>flyrehan786@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Hamza Shah</td>
        <td>solday66@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Rizwan Ullah</td>
        <td>rizwanullah939@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Mahboob Ur Rehman</td>
        <td>No Email</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Zeeshan Ali</td>
        <td>zali5095@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Ahmad Saeed</td>
        <td>No Email</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Hazrat Nawab</td>
        <td>No Email</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Hameed Ali Shah</td>
        <td>HaliShah@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Irfan Ullah</td>
        <td>irfancsit555@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>Adil Shah</td>
        <td>adil@gmail.com</td>
        <td>Male</td>
        <td>Pakistan</td>
    </tr>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    </tr>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    </tr>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    <tr>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
        <td>BlaaBlaaBlaa</td>
    </tr>
</table>

@section scripts{
    <script>
        jQuery(document).ready(function () {
            $("#students").DataTable();
        });
    </script>    
}

输出:

enter image description here enter image description here

0 个答案:

没有答案