Нужно точно 10 родительских строк с внутренней строкой, используя jquery - PullRequest
Новая
       3

Нужно точно 10 родительских строк с внутренней строкой, используя jquery

0 голосов
/ 25 февраля 2019

enter image description here как показать 10 родительских строк с внутренней строкой на первой странице.

Ниже мой код. 

$(".table thead").css({
  "background": "#616264"
});
$("#innertable thead").css({
  "background": "#616264 "
});
$('th').css({
  "color": "#ffffff"
});
$(".pagination").css({
  "margin-left": "200px"
});
$("td").css({
  "display": "flex",
  "justify-content": "space-between",
  "margin-bottom": "25px"
})
$("table").css({
  "border": "0",
  "border-collapse": "separate",
  "border-spacing": "0 10px",
  "margin-top": "0px",
  "margin-bottom": "0px"
});
$("td[colspan=8]").css({
  "padding": "0"
});
$(".container").css({
  "background": "#f2f2f2"
});
$("td[colspan=8]").css({
  "padding": "0",
  "border-top-width": "0"
});
$(".accordion").css("border-width", "0");
$(".pg-margin-auto").css({
  "margin": "0 auto"
});
$(".tab2").css({
  "margin-top": "0",
  "margin-bottom": "0"
});
$(".tab2 td").css({
  "border-left": "0"
});
$("#dataTable td").css({
  "border-left": "0"
});
$(".spanId").css({
  "color": "#ffd700"
});
$(".table .td").css({
  "vertical-align": "middle"
})

var mydata = [{
    "item": "V400091-Amber Bottle Clear",
    "vendor": "Alpha Packaging",
    "vendor_location": "St. Louis, Mo",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.09",
    "max_cost": "$0.14",
    "total_quantity_sold": "80,000,000",
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Silgan",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },

      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],

  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Berlin",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Silgan",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Silgan",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Silgan",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",

  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",

  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "Bottle",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Silgan",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "business_unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "business_unit": "23-Lock Port",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]

      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
      {
        "vendor_name": "Berry Plastic",
        "location": "Aurora, IL",
        "last_purchase_date": "February 20, 2018",
        "total_unit_purchased": "$0.06"
      },

    ]
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
    "inner_data": [{
        "vendor_name": "Berlin",
        "location": "Aurora, IL",
        "last_purchase_date": "November 2, 2018",
        "total_unit_purchased": "$0.06",
        "product_info": [{
            "business_unit": "04-Kansas City",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          },
          {
            "Business Unit": "02-Dailas",
            "berlin_item": "V400091-Liquor BTL 500ML",
            "last_purchase": "1000 pallets@$0.09",
            "total_unit_purchased": "June 21,2017",
            "average_unit_cost": "$0.14"
          }
        ]
      },
      {
        "vendor_name": "Alpha Packaging",
        "location": "Aurora, IL",
        "last_purchase_date": "January 12, 2018",
        "total_unit_purchased": "$0.06"
      },
    ],
  },
  {
    "item": "V400091-Liquor BTL 500ML",
    "vendor": "Berry Plastic",
    "vendor_location": "Aurora, IL",
    "BU": 23,
    "min_cost": "$0.06",
    "avg_cost": "$0.06",
    "max_cost": "$0.06",
    "total_quantity_sold": "70,000,000",
  },
  {
    "item": "Glass",
    "vendor": "Pune",
    "vendor_location": "NYC",
    "BU": 13692,
    "min_cost": 4000,
    "avg_cost": 6000,
    "max_cost": 8000,
    "total_quantity_sold": 500,
  },
]


$(function() {

  var totRows = mydata.length;
  console.log(totRows);
  var table_body = '<tbody>';
  for (i = 0; i < totRows; i++) {


    // This is main table

    table_body += `<tr id="td1" >
                        <td>
                        <a>
                            <span class="spanId"class="collapsed" data-parent="#accordionExample" aria-expanded="false" data-toggle="collapse" data-target="#innertable">&#8314;&nbsp;&nbsp;</span>
                            </a>
                            <a href="#">${mydata[i]["item"]}</a>
                            </td>
                        <td><a href="#">${mydata[i]["vendor"]}</a></td>
                        <td>${mydata[i]["vendor_location"]}</td>
                        <td>${mydata[i]["BU"]}</td>
                        <td>${mydata[i]["min_cost"]}</td>
                        <td>${mydata[i]["avg_cost"]}</td>
                        <td>${mydata[i]["max_cost"]}</td>
                        <td>${mydata[i]["total_quantity_sold"]}</td>
                      </tr>`
    //This is Table inside table

    if (mydata[i].inner_data) {
      var len = mydata[i].inner_data.length;

      table_body += `<tr id="innerrow"class="collapse show">
    <td colspan="8"><table class="table table-hover" id="innertable">
    <thead><tr>
    <th scope="col">Vendor Name</th>
    <th scope="col">Location</th>
    <th scope="col">Last Purchase Date</th>
    <th scope="col">Total Unit Purchased</th>
    </tr>
   </thead>
    <tbody>`
      for (var j = 0; j < len; j++) {
        table_body += `<tr>
        <td>
        <a><span class="spanId"class="collapsed" data-parent="#accordionExample" aria-expanded="false" data-toggle="collapse" data-target="#producttable">&#8314;&nbsp;&nbsp;</span></a><a href="#">${mydata[i].inner_data[j].vendor_name}</a>
        </td>
      <td>${mydata[i].inner_data[j].location}</td>
      <td>${mydata[i].inner_data[j].last_purchase_date}</td>
      <td>${mydata[i].inner_data[j].total_unit_purchased}</td>
      </tr>`;




        // This is Table inside inner table


        if (mydata[i].inner_data[j].product_info) {
          var len1 = mydata[i].inner_data[j].product_info.length;

          table_body += `<tr id="productinfo"class="collapse show" >
    <td colspan="8">
   <table class="table table-hover" id="producttable">
    <thead>
        <tr>
        <th scope="col">Business Unit</th>
        <th scope="col">Berlin Item</th>
        <th scope="col">Last Purchase</th>
        <th scope="col">Total Unit Purchased</th>
        <th scope="col">Average Unit Cost</th>
        </tr>
  </thead>
  <tbody>`
          for (var k = 0; k < len1; k++) {
            table_body += `<tr>
      <td>${mydata[i].inner_data[j].product_info[k].business_unit}</td>
      <td><a href="#">${mydata[i].inner_data[j].product_info[k].berlin_item}</a></td>
      <td>${mydata[i].inner_data[j].product_info[k].last_purchase}</td>
      <td>${mydata[i].inner_data[j].product_info[k].total_unit_purchased}</td>
      <td>${mydata[i].inner_data[j].product_info[k].average_unit_cost}</td>
      </tr>`;
          }
          table_body += '</tbody></table></td></tr>';
        }
      }
      table_body += '</tbody></table></td></tr>';

    }
  }
  table_body += '</tbody>';
  $('#dataTable').append(table_body);

  $('td > a').on('click', function() {

    $(this).closest('tr').next().find('table:first').toggle();
  });

  var table = '#dataTable'
  var maxRows = 10
  var totalRows = $(table + ' tbody tr').length
  if (totalRows > maxRows) {
    $(table + ' tr:gt(40)').hide();

    var $this = $(table);

    $this.parents('tr').prevAll("tr.menu:first").css("background-color", "yellow");
    var pagenum = Math.ceil(totalRows / maxRows)
    for (var i = 1; i <= pagenum;) {
      $('.pagination').append('<li class="page-item" data-page="' + i + '">\<a class="page-link">' + i++ + '<span class="sr-only">(current)</span></a>\</li>').show();
    }
  }
  $('.pagination li:first-child').addClass('active')
  $('.pagination li').on('click', function() {
    var pageNum = $(this).attr('data-page')
    var trIndex = 0;
    $('.pagination li').removeClass('active')
    $(this).addClass('active')
    $(table + ' tr:gt(0)').each(function() {
      trIndex++
      if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
        $(this).hide()
        $('table table tr').show();
      } else {
        $(this).show()
      }
    });
  });

});
th {
  border-right: none !important;
  border-left: none !important;
  background: #616264 !important;
}

td {
  border-right: none !important;
  border-left: none !important;
  background-color: #ffffff;
  scroll-behavior: smooth;
}

#innertable,
#producttable {
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#innertable td,
#producttable td {
  background-color: #ffffff;
}

#innertable tr,
#producttable tr {
  background-color: transparent !important;
}

#innertable,
#producttable {
  border: 0;
}

#innerrow td[colspan="8"],
#productinfo td[colspan="8"] {
  padding: 0 0 0 24px !important;
  border-top-width: 0 !important;
}

.spanId {
  color: red;
  font-size: x-large;
}

#innertable thead,
#producttable thead {
  background: #616264 !important;
}

#innertable th,
#producttable th {
  color: #ffffff;
}

table #innertable,
table #producttable {
  background: #f2f2f2;
}

tr#innerrow td[colspan="8"],
tr#productinfo td[colspan="8"] {
  background: #f2f2f2;
}

#innertable,
#producttable {
  background: #f2f2f2;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

{{#partial "page"}}

<div class="container">
  <div class="row">
    <div class="accordion" id="accordionExample">
      <table id="dataTable" class="table table-hover">
        <thead>
          <tr>
            <th scope="col">item</th>
            <th scope="col">vendor</th>
            <th scope="col">Vendor Location</th>
            <th scope="col">BU</th>
            <th scope="col">Min Cost</th>
            <th scope="col">Avg Cost&nbsp;</th>
            <th scope="col">Max Cost&nbsp;</th>
            <th scope="col">Total Quantity Sold</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="pg-margin-auto">
      <nav>
        <ul class="pagination">
        </ul>
      </nav>
    </div>
  </div>
</div>

Ожидаемый результат:

Мне нужно 10 родительских строк (#td1) с внутренней строкой. 

$(table+' tr:gt(40)').hide();

$(this).parents("tr").children("td").hide()

td1 - это моя родительская строка

она пыталась использовать селектор, но не работает

Я поражен, любезно помогите всем разобраться в этом.Я много пробовал, но не заметно

  1. аккордеон должен рухнуть первым 2. Один щелчок аккордеона закрывается и расширяется одновременно, это неправильно .. Каждый аккордеон должен открывать и закрывать соответствующий стол

Вышеупомянутый код редактируется. Здесь вы можете проверить код

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

Нет похожих вопросов

...