jquery - 如何在布局页面中实现常见的jquery数据表

Question

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

相同的功能将在所有应用程序中实现，我是 MVC 的新学习者，所以我无法找出如何通常实现 jquery 数据表。

该写入对于所有应用程序(母版页)都是通用的，并在所有页面中使用

我该如何实现它？

谢谢

Answer 1

要实现响应式 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"/>

当 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">$1,276,480,335</td>
        <td data-title="Domestic Gross" data-type="currency">$400,738,009</td>
        <td data-title="Foreign Gross" data-type="currency">$875,742,326</td>
        <td data-title="Budget" data-type="currency">$150,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">$1,210,072,582</td>
        <td data-title="Domestic Gross" data-type="currency">$606,782,977</td>
        <td data-title="Foreign Gross" data-type="currency">$602,369,069</td>
        <td data-title="Budget" data-type="currency">$200,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">$1,159,398,397</td>
        <td data-title="Domestic Gross" data-type="currency">$336,045,770</td>
        <td data-title="Foreign Gross" data-type="currency">$823,352,627</td>
        <td data-title="Budget" data-type="currency">$74,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">$1,066,969,703</td>
        <td data-title="Domestic Gross" data-type="currency">$415,004,880</td>
        <td data-title="Foreign Gross" data-type="currency">$651,964,823</td>
        <td data-title="Budget" data-type="currency">$200,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">$1,034,799,409</td>
        <td data-title="Domestic Gross" data-type="currency">$264,624,300</td>
        <td data-title="Foreign Gross" data-type="currency">$770,175,109</td>
        <td data-title="Budget" data-type="currency">$80,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">$1,028,570,889</td>
        <td data-title="Domestic Gross" data-type="currency">$486,295,561</td>
        <td data-title="Foreign Gross" data-type="currency">$542,275,328</td>
        <td data-title="Budget" data-type="currency">$175,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">$1,023,227,498</td>
        <td data-title="Domestic Gross" data-type="currency">$341,268,248</td>
        <td data-title="Foreign Gross" data-type="currency">$681,959,250</td>
        <td data-title="Budget" data-type="currency">$150,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">$970,761,885</td>
        <td data-title="Domestic Gross" data-type="currency">$368,061,265</td>
        <td data-title="Foreign Gross" data-type="currency">$602,700,620</td>
        <td data-title="Budget" data-type="currency">$76,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">$987,483,777</td>
        <td data-title="Domestic Gross" data-type="currency">$422,783,777</td>
        <td data-title="Foreign Gross" data-type="currency">$564,700,000</td>
        <td data-title="Budget" data-type="currency">$45,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">$936,743,261</td>
        <td data-title="Domestic Gross" data-type="currency">$380,843,261</td>
        <td data-title="Foreign Gross" data-type="currency">$555,900,000</td>
        <td data-title="Budget" data-type="currency">$94,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 母版页

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

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

将数据传递到 View 母版页

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

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

希望对您有帮助!