如何在布局页面中实现通用jquery数据表

我正在使用MVC，在我的应用程序中，我们有30多个页面，所有页面都有自己的网格和不同的数据。现在我想在所有网格中实现jquery数据表

同样的功能将在所有应用程序中实现，我是MVC的新手，所以我无法找到如何实现jquery datatable

这种写入对于所有应用程序（母版页）都是通用的，并且在所有页面中都使用

我如何实现它

---

感谢您

实现响应式Jquery DataTables导入响应式数据表js和css库文件：

<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

我将在下面留下一个代码片段示例：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
字体系列：“Helvetica Neue”，“Helvetica”，“Roboto”，“Arial”，无衬线；
颜色：#5e5d52；
}
a{
颜色：#337aa8；
}
a:悬停，
a:焦点{
颜色：#4b8ab2；
}
.集装箱{
利润率：5%3%；
}
tr:n个孩子（偶数）{
背景色：#cae0ff！重要；
颜色：黑色；
}
tr:n个孩子（奇数）{
背景色：#e7f1ff！重要；
}
@介质（最小宽度：48em）{
.集装箱{
利润率：2%；
}
}
@介质（最小宽度：75em）{
.集装箱{
利润率：2米自动；
最大宽度：75em；
}
}
.响应表{
宽度：100%；
边缘底部：1.5em；
边界间距：0；
}
@介质（最小宽度：48em）{
.响应表{
字号：0.9em；
}
}
@介质（最小宽度：62em）{
.响应表{
字号：1em；
}
}
.响应表thead{
位置：绝对位置；
剪辑：rect（1px 1px 1px 1px）；
/*IE6，IE7*/
填充：0；
边界：0；
高度：1px；
宽度：1px；
溢出：隐藏；
}
@介质（最小宽度：48em）{
.响应表thead{
位置：相对位置；
剪辑：自动；
高度：自动；
宽度：自动；
溢出：自动；
}
}
.响应表THAD th{
背景色：#1d5eb2；
边框：1px实心#1d5eb2；
字体大小：正常；
文本对齐：居中；
颜色：白色；
}
.响应表THAD th：第一种类型{
文本对齐：左对齐；
}
.响应式桌体，
.响应表tr，
.响应表th，
.响应表td{
显示：块；
填充：0；
文本对齐：左对齐；
空白：正常；
}
@介质（最小宽度：48em）{
.响应表tr{
显示：表格行；
}
}
.响应表th，
.响应表td{
填充：0.5em；
垂直对齐：中间对齐；
}
@介质（最小宽度：30em）{
.响应表th，
.响应表td{
填充：0.75em 0.5em；
}
}
@介质（最小宽度：48em）{
.响应表th，
.响应表td{
显示：表格单元格；
填充：0.5em；
}
}
@介质（最小宽度：62em）{
.响应表th，
.响应表td{
填充：0.75em 0.5em；
}
}
@介质（最小宽度：75em）{
.响应表th，
.响应表td{
填充：0.75em；
}
}
.响应表标题{
边缘底部：1米；
字号：1em；
字体大小：粗体；
文本对齐：居中；
}
@介质（最小宽度：48em）{
.响应表标题{
字号：1.5em；
}
}
.响应表tfoot{
字号：0.8em；
字体：斜体；
}
@介质（最小宽度：62em）{
.响应表tfoot{
字号：0.9em；
}
}
@介质（最小宽度：48em）{
.响应式桌体{
显示：表格行组；
}
}
.响应表tbody tr{
边缘底部：1米；
}
@介质（最小宽度：48em）{
.响应表tbody tr{
显示：表格行；
边框宽度：1px；
}
}
.响应表tbody tr：类型的最后一个{
页边距底部：0；
}
@介质（最小宽度：48em）{
.响应表tbody tr:n类型（偶数）{
背景色：rgba（94,93,82,0.1）；
}
}
.响应表tbody th[scope=“row”]{
背景：#1d5eb2；
字体大小：粗体；
颜色：白色；
}
@介质（最小宽度：30em）{
.响应表tbody th[scope=“row”]{
左边框：1px实心#1d5eb2；
边框底部：1px实心#1d5eb2；
}
}
@介质（最小宽度：48em）{
.响应表tbody th[scope=“row”]{
背景色：透明；
颜色：#5e5d52；
文本对齐：左对齐；
}
}
.响应表tbody td{
文本对齐：右对齐；
}
@介质（最小宽度：48em）{
.响应表tbody td{
左边框：1px实心#1d5eb2；
边框底部：1px实心#1d5eb2；
文本对齐：居中；
}
}
@介质（最小宽度：48em）{
.响应表tbody td：类型的最后一个{
右边框：1px实心#1d5eb2；
}
}
.responsive table tbody td[data type=“currency”]{
文本对齐：右对齐；
}
.响应表tbody td[数据标题]：之前{
内容：attr（数据标题）；
浮动：左；
字号：0.8em；
颜色：rgba（94,93,82,0.75）；
}
@介质（最小宽度：30em）{
.响应表tbody td[数据标题]：之前{
字号：0.9em；
}
}
@介质（最小宽度：48em）{
.响应表tbody td[数据标题]：之前{
内容：无；
}
}

十大动画电影
片名
电影发行
演播室
全球总量
国内生产总值
外汇总额
预算
冻结的
2013
迪士尼
$1,276,480,335
$400,738,009
$875,742,326
$150,000,000
难以置信的2
2018
迪斯尼皮克斯
$1,210,072,582
$606,782,977
$602,369,069
$200,000,000
仆从
2015
普遍的
$1,159,398,397
$336,045,770
$823,352,627
$74,000,000
玩具总动员3
2010
迪斯尼皮克斯
$1,066,969,703
$415,004,880
$651,964,823
$200,000,000
卑鄙的我3
2017
普遍的
$1,034,799,409
$264,624,300
$770,175,109
$80,000,000
寻找多莉
2016
迪斯尼皮克斯
$
<script>
  $(document).ready( function() {

    $('#myTable').DataTable( {
      responsive: true
    });

  });
</script>

<script type="text/javascript">

    //Datatable for search and sorting
    $('.table').DataTable({           
        "fixedHeader": false,
        "lengthChange": false,
        "bPaginate": false,
        "responsive": true,
        "autoWidth": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,            
    });

</script>