简体   繁体   English

jQuery Datatables 插件不适用于 ASP.NET MVC

[英]jQuery Datatables plug-in not working with ASP.NET MVC

I am trying to add more functionality to a table in my MVC application by using the jquery datatables plug-in .我正在尝试使用 jquery 数据表插件向我的 MVC 应用程序中的表添加更多功能。 I have added the following to my index.cshtml page to try and turn the table 'dailyreporttable' from a standard table into a datatable:我已将以下内容添加到我的 index.cshtml 页面,以尝试将表“dailyreporttable”从标准表转换为数据表:

<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#dailyreporttable').dataTable();
    });
</script>

However when I preview the page in the browser, the datatables plus in has not been applied to the table, and it remains as a standard table.但是当我在浏览器中预览页面时,datatables plus in 并没有应用到表格中,它仍然是标准表格。 I don't have any experience with MVC or web development so I am not sure what exactly I am doing wrong.我没有任何 MVC 或 Web 开发经验,所以我不确定我到底做错了什么。

You should be adding these references to your BundleConfig.cs file.您应该将这些引用添加到您的 BundleConfig.cs 文件中。

You will probably have a bundle being loaded in _Layout.cshtml:您可能会在 _Layout.cshtml 中加载一个包:

@Scripts.Render("~/bundles/myBundle")

So add the jquery and datatables reference to that particular bundle, eg:因此,将 jquery 和 datatables 引用添加到该特定包中,例如:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(
     "~/Scripts/jquery-1.10.2.min.js"
     "~/Scripts/DataTab....ataTables.js"
));

You can check that the js files are being loaded by looking the the Firebug Net tab (if you're using Firefox)您可以通过查看 Firebug Net 选项卡来检查 js 文件是否正在加载(如果您使用的是 Firefox)

Do you have a reference to the css file??你有对css文件的引用吗? rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"

try changing the order of script loading :尝试更改脚本加载顺序:

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/DataTab....ataTables.js" type="text/javascript"></script>

Because datatables jquery based plugin and it requires jquery methods to run, so you have to include jQuery library first so that all the required methods gets available to the datatable plugin.由于datatables的jQuery基于插件,它需要jQuery方法来运行,所以你必须包括jQuery库首先使所有所需的方法获取提供给datatable插件。

<head>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#dailyreporttable').dataTable();
    });
</script>
</head>
<body>
<table id="dailyreporttable">
</table>
</body>

https://datatables.net/examples/basic_init/zero_configuration.html https://datatables.net/examples/basic_init/zero_configuration.html

$('#dailyreporttable').dataTable();

just move it out of the document.ready()只需将其移出 document.ready()

that seemed to do the trick for me,这似乎对我有用,

another approach would be to use the ClientID另一种方法是使用 ClientID

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM