Как реализовать общую таблицу данных JQuery на странице макета - PullRequest
Новая
       19

Как реализовать общую таблицу данных JQuery на странице макета

0 голосов
/ 01 ноября 2018

Я работаю с MVC. В моем приложении более 30 страниц, и у всех страниц есть своя сетка с различными данными. теперь я хочу реализовать jatery datatables во всей сетке

Эта функция будет реализована во всем приложении, я новичок в MVC, поэтому я не могу выяснить, как я могу реализовать jquery datatable.

Эта запись является общей для всех приложений (главная страница) и используется на всех страницах

Как я могу это реализовать?

Спасибо

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

На главной странице мы можем общий wirte 

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

, поэтому он может применяться во всем приложении, где используется таблица

0 голосов
/ 01 ноября 2018

Для реализации Responsive 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

Чтобы увидеть, как добавить таблицы данных jquery в ASP .NET, вы можете использовать этот шаг для пошагового руководства:

https://www.c -sharpcorner.com / статьи / дисплея данных в-Asp-Net-используя-JQuery-DataTables-плагин /

Основные страницы 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

Надеюсь, это помогло!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...