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

问题描述 投票：1回答：2

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

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

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

我该如何实现呢？

谢谢

jquery asp.net-mvc-4 datatables master-pages asp.net-mvc-layout
2个回答
2
投票

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

将数据传递给View-Master页面

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

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

希望它有所帮助！

1
投票

在Master页面中我们可以使用普通线

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.