0
Ich benutze jQuery Plugin Isotope zum Sortieren und Filtern. Die Daten, die sortiert und gefiltert werden, werden in einer <tr> gespeichert. Die Tabelle ist perfekt gerendert und die Funktionalität funktioniert gut in Firefox. Aber das Tabellenlayout stürzt in Browsern außer Firefox ab. Ich bin nicht in der Lage herauszufinden, was falsch ist. Bitte helfen Sie!jQuery Isotope Tabelle Problem außer Firefox
$(document).ready(function() {
$(window).load(function() {
var $container = $('.busResultsContainer').isotope({
itemSelector: '.busResults',
layoutMode: 'masonry',
getSortData: {
earliest: '[data-earliest] parseInt',
late: '[data-earliest] parseInt',
fastest: '[data-timeTaken] parseInt'
},
sortAscending: {
earliest: true,
late: false,
fastest: true
}
});
// Sorting Feature
$(".sortByBtn").on("click", function() {
sortByVal = $(this).data("sort-by");
console.log(sortByVal);
$container.isotope({
sortBy: sortByVal
});
});
});
});.hidden {
display: none;
}
.busResultsHeading tr th:nth-child(1),
.busResults td:nth-child(1),
.busResultsHeading tr th:nth-child(2),
.busResults td:nth-child(2),
.busResultsHeading tr th:nth-child(3),
.busResults td:nth-child(3) {
width: 15%;
}
.busResultsHeading tr th:nth-child(4),
.busResults td:nth-child(4),
.busResultsHeading tr th:nth-child(5),
.busResults td:nth-child(5),
.busResultsHeading tr th:nth-child(6),
.busResults td:nth-child(6),
.busResultsHeading tr th:nth-child(9),
.busResults td:nth-child(9) {
width: 10%;
}
.busResultsHeading tr th:nth-child(7),
.busResults td:nth-child(7),
.busResultsHeading tr th:nth-child(8),
.busResults td:nth-child(8) {
width: 7.5%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/isot[email protected]/dist/isotope.pkgd.min.js"></script>
<div>
<button class="btn btn-default btn-primary sortByBtn" data-sort-by="earliest">Earliest</button>
<button class="btn btn-default btn-info sortByBtn" data-sort-by="late">Latest</button>
<button class="btn btn-default btn-success sortByBtn" data-sort-by="fastest">Fastest</button>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" style="table-layout: fixed; width: 100%;">
<thead class="busResultsHeading">
<tr>
<th>Operators</th>
<th>Bus Types</th>
<th>Timing</th>
<th>Duration</th>
<th>Distance</th>
<th>Bus Number</th>
<th>Seats</th>
<th>Fare</th>
<th>Schedule</th>
</tr>
</thead>
<tbody class="busResultsContainer">
<tr class="PublicTravels FastPassenger seatyes busResults col-md-12 padding00" data-earliest="1493001000" data-timetaken="180000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">8:00 AM - 8:50 AM</b>
</td>
<td>
0h 50m
</td>
<td>
70 Km(s)
</td>
<td>PB 93 234</td>
<td>9</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 93 234</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>07:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>07:15</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>07:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>08:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>08:10</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>08:30</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>08:50</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>08:50</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>08:55</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>09:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="PublicTravels FastPassenger seatyes busResults col-md-12 padding00" data-earliest="1493029800" data-timetaken="306000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">4:00 PM - 5:25 PM</b>
</td>
<td>
1h 25m
</td>
<td>
70 Km(s)
</td>
<td>PB 889</td>
<td>7</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 889</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>15:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>15:20</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>15:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>16:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>16:15</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>17:10</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>17:25</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>17:35</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>17:50</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>18:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492984800" data-timetaken="252000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">3:30 AM - 4:40 AM</b>
</td>
<td>
1h 10m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>02:05</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>02:15</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>02:30</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>03:00</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>03:30</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>04:25</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>04:35</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>04:40</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>04:50</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>05:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492998300" data-timetaken="126000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">7:15 AM - 7:50 AM</b>
</td>
<td>
0h 35m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>06:00</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>06:10</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>06:20</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>06:40</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>07:15</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>07:30</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>07:50</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>07:50</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>07:55</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>08:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Codepen: http://codepen.io/linktoahref/full/JNKgJZ/