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

Question

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

相同的功能将在整个应用程序中实现，我是 MVC 的新学习者，所以我不知道如何通常实现 jquery 数据表。

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

我怎样才能实现它？

谢谢

score 2 · Accepted Answer

要实现响应式 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 母版页

在本教程中，您可以看到他们如何创建新的视图母版页并基于母版页创建新的视图内容页。

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

将数据传递到视图母版页

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

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

希望它有所帮助！

score 1 · Accepted Answer

在母版页我们可以共同写

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

因此它可以应用于使用表的所有应用程序

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

2 回答 2

MVC 母版页

将数据传递到视图母版页

Related

Reference