如何在布局页面中实现公共 jquery 数据 table

Question

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

所有应用程序都将实现相同的功能，我是 MVC 的新手，所以我无法找到如何共同实现 jquery 数据表。

该写入对所有应用程序（母版页）是通用的，并在所有页面中使用

我该如何实施？

谢谢

Answer 1

实现一个响应式JqueryDataTables导入响应式数据表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"/>

当 DOM 准备好并设置 responsive: true

时调用此单个函数

<script>
  $(document).ready( function() {

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

  });
</script>

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

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color: #5e5d52;
}

a {
  color: #337aa8;
}

a:hover,
a:focus {
  color: #4b8ab2;
}

.container {
  margin: 5% 3%;
}

tr:nth-child(even) {
  background-color: #cae0ff !important;
  color: black;
}

tr:nth-child(odd) {
  background-color: #e7f1ff !important;
}

@media (min-width: 48em) {
  .container {
    margin: 2%;
  }
}

@media (min-width: 75em) {
  .container {
    margin: 2em auto;
    max-width: 75em;
  }
}

.responsive-table {
  width: 100%;
  margin-bottom: 1.5em;
  border-spacing: 0;
}

@media (min-width: 48em) {
  .responsive-table {
    font-size: 0.9em;
  }
}

@media (min-width: 62em) {
  .responsive-table {
    font-size: 1em;
  }
}

.responsive-table thead {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

@media (min-width: 48em) {
  .responsive-table thead {
    position: relative;
    clip: auto;
    height: auto;
    width: auto;
    overflow: auto;
  }
}

.responsive-table thead th {
  background-color: #1d5eb2;
  border: 1px solid #1d5eb2;
  font-weight: normal;
  text-align: center;
  color: white;
}

.responsive-table thead th:first-of-type {
  text-align: left;
}

.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
  display: block;
  padding: 0;
  text-align: left;
  white-space: normal;
}

@media (min-width: 48em) {
  .responsive-table tr {
    display: table-row;
  }
}

.responsive-table th,
.responsive-table td {
  padding: 0.5em;
  vertical-align: middle;
}

@media (min-width: 30em) {
  .responsive-table th,
  .responsive-table td {
    padding: 0.75em 0.5em;
  }
}

@media (min-width: 48em) {
  .responsive-table th,
  .responsive-table td {
    display: table-cell;
    padding: 0.5em;
  }
}

@media (min-width: 62em) {
  .responsive-table th,
  .responsive-table td {
    padding: 0.75em 0.5em;
  }
}

@media (min-width: 75em) {
  .responsive-table th,
  .responsive-table td {
    padding: 0.75em;
  }
}

.responsive-table caption {
  margin-bottom: 1em;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 48em) {
  .responsive-table caption {
    font-size: 1.5em;
  }
}

.responsive-table tfoot {
  font-size: 0.8em;
  font-style: italic;
}

@media (min-width: 62em) {
  .responsive-table tfoot {
    font-size: 0.9em;
  }
}

@media (min-width: 48em) {
  .responsive-table tbody {
    display: table-row-group;
  }
}

.responsive-table tbody tr {
  margin-bottom: 1em;
}

@media (min-width: 48em) {
  .responsive-table tbody tr {
    display: table-row;
    border-width: 1px;
  }
}

.responsive-table tbody tr:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .responsive-table tbody tr:nth-of-type(even) {
    background-color: rgba(94, 93, 82, 0.1);
  }
}

.responsive-table tbody th[scope="row"] {
  background: #1d5eb2;
  font-weight: bold;
  color: white;
}

@media (min-width: 30em) {
  .responsive-table tbody th[scope="row"] {
    border-left: 1px solid #1d5eb2;
    border-bottom: 1px solid #1d5eb2;
  }
}

@media (min-width: 48em) {
  .responsive-table tbody th[scope="row"] {
    background-color: transparent;
    color: #5e5d52;
    text-align: left;
  }
}

.responsive-table tbody td {
  text-align: right;
}

@media (min-width: 48em) {
  .responsive-table tbody td {
    border-left: 1px solid #1d5eb2;
    border-bottom: 1px solid #1d5eb2;
    text-align: center;
  }
}

@media (min-width: 48em) {
  .responsive-table tbody td:last-of-type {
    border-right: 1px solid #1d5eb2;
  }
}

.responsive-table tbody td[data-type="currency"] {
  text-align: right;
}

.responsive-table tbody td[data-title]:before {
  content: attr(data-title);
  float: left;
  font-size: 0.8em;
  color: rgba(94, 93, 82, 0.75);
}

@media (min-width: 30em) {
  .responsive-table tbody td[data-title]:before {
    font-size: 0.9em;
  }
}

@media (min-width: 48em) {
  .responsive-table tbody td[data-title]:before {
    content: none;
  }
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>
<div class="container">
  <table class="responsive-table" id="myTable">
    <caption>Top 10 Animated Films</caption>
    <thead>
      <tr>
        <th scope="col">Film Title</th>
        <th scope="col">Film Released</th>
        <th scope="col">Studio</th>
        <th scope="col">Worldwide Gross</th>
        <th scope="col">Domestic Gross</th>
        <th scope="col">Foreign Gross</th>
        <th scope="col">Budget</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Frozen</th>
        <td data-title="Released">2013</td>
        <td data-title="Studio">Disney</td>
        <td data-title="Worldwide Gross" data-type="currency">,276,480,335</td>
        <td data-title="Domestic Gross" data-type="currency">0,738,009</td>
        <td data-title="Foreign Gross" data-type="currency">5,742,326</td>
        <td data-title="Budget" data-type="currency">0,000,000</td>
      </tr>
      <tr>
        <th scope="row">Incredibles 2</th>
        <td data-title="Released">2018</td>
        <td data-title="Studio">Disney Pixar</td>
        <td data-title="Worldwide Gross" data-type="currency">,210,072,582</td>
        <td data-title="Domestic Gross" data-type="currency">6,782,977</td>
        <td data-title="Foreign Gross" data-type="currency">2,369,069</td>
        <td data-title="Budget" data-type="currency">0,000,000</td>
      </tr>
      <tr>
        <th scope="row">Minions</th>
        <td data-title="Released">2015</td>
        <td data-title="Studio">Universal</td>
        <td data-title="Worldwide Gross" data-type="currency">,159,398,397</td>
        <td data-title="Domestic Gross" data-type="currency">6,045,770</td>
        <td data-title="Foreign Gross" data-type="currency">3,352,627</td>
        <td data-title="Budget" data-type="currency">,000,000</td>
      </tr>
      <tr>
        <th scope="row">Toy Story 3</th>
        <td data-title="Released">2010</td>
        <td data-title="Studio">Disney Pixar</td>
        <td data-title="Worldwide Gross" data-type="currency">,066,969,703</td>
        <td data-title="Domestic Gross" data-type="currency">5,004,880</td>
        <td data-title="Foreign Gross" data-type="currency">1,964,823</td>
        <td data-title="Budget" data-type="currency">0,000,000</td>
      </tr>
      <tr>
        <th scope="row">Despicable Me 3</th>
        <td data-title="Released">2017</td>
        <td data-title="Studio">Universal</td>
        <td data-title="Worldwide Gross" data-type="currency">,034,799,409</td>
        <td data-title="Domestic Gross" data-type="currency">4,624,300</td>
        <td data-title="Foreign Gross" data-type="currency">0,175,109</td>
        <td data-title="Budget" data-type="currency">,000,000</td>
      </tr>
      <tr>
        <th scope="row">Finding Dory</th>
        <td data-title="Released">2016</td>
        <td data-title="Studio">Disney Pixar</td>
        <td data-title="Worldwide Gross" data-type="currency">,028,570,889</td>
        <td data-title="Domestic Gross" data-type="currency">6,295,561</td>
        <td data-title="Foreign Gross" data-type="currency">2,275,328</td>
        <td data-title="Budget" data-type="currency">5,000,000</td>
      </tr>
      <tr>
        <th scope="row">Zootopia</th>
        <td data-title="Released">2016</td>
        <td data-title="Studio">Disney</td>
        <td data-title="Worldwide Gross" data-type="currency">,023,227,498</td>
        <td data-title="Domestic Gross" data-type="currency">1,268,248</td>
        <td data-title="Foreign Gross" data-type="currency">1,959,250</td>
        <td data-title="Budget" data-type="currency">0,000,000</td>
      </tr>
      <tr>
        <th scope="row">Despicable Me 2</th>
        <td data-title="Released">2013</td>
        <td data-title="Studio">Universal</td>
        <td data-title="Worldwide Gross" data-type="currency">0,761,885</td>
        <td data-title="Domestic Gross" data-type="currency">8,061,265</td>
        <td data-title="Foreign Gross" data-type="currency">2,700,620</td>
        <td data-title="Budget" data-type="currency">,000,000</td>
      </tr>
      <tr>
        <th scope="row">The Lion King</th>
        <td data-title="Released">1994</td>
        <td data-title="Studio">Disney</td>
        <td data-title="Worldwide Gross" data-type="currency">7,483,777</td>
        <td data-title="Domestic Gross" data-type="currency">2,783,777</td>
        <td data-title="Foreign Gross" data-type="currency">4,700,000</td>
        <td data-title="Budget" data-type="currency">,000,000</td>
      </tr>
      <tr>
        <th scope="row">Finding Nemo</th>
        <td data-title="Released">2003</td>
        <td data-title="Studio">Pixar</td>
        <td data-title="Worldwide Gross" data-type="currency">6,743,261</td>
        <td data-title="Domestic Gross" data-type="currency">0,843,261</td>
        <td data-title="Foreign Gross" data-type="currency">5,900,000</td>
        <td data-title="Budget" data-type="currency">,000,000</td>
      </tr>
    </tbody>
  </table>
</div>

https://codepen.io/DavidBendahan/pen/zmgMEQ

要查看如何在 ASP .NET 上添加 jquery 数据表，您可以使用此步骤指南：

https://www.c-sharpcorner.com/article/display-data-in-Asp-Net-using-jquery-datatables-plugin/

MVC 主页

在本教程中，您可以了解他们如何创建新视图母版页以及如何基于母版页创建新视图内容页。

https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/views/creating-page-layouts-with-view-master-pages-cs

将数据传递到视图母版页

有两种将数据传递到视图母版页的策略。在所附的 link 中，他们讨论了一个 最简单的解决方案，该解决方案导致应用程序更难维护 。在第二部分，他们 研究了一个更好的解决方案，该解决方案需要更多的初始工作，但会产生更易于维护的 应用程序。

https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/views/passing-data-to-view-master-pages-cs

希望对您有所帮助！

Answer 2

在母版页中我们可以共同编写

<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>

因此它可以应用于您使用 table 的整个应用程序

如何在布局页面中实现公共 jquery 数据 table

How to Implement common jquery data table in layout page

jquery

asp.net-mvc-4

datatables

master-pages

asp.net-mvc-layout

MVC 主页

将数据传递到视图母版页