0
我正在使用jQuery插件Isotope進行排序和過濾。排序和過濾的數據存儲在<tr>中。該表格完美呈現，並且該功能在Firefox中正常工作。但是除了Firefox之外，表格佈局在瀏覽器中崩潰。我無法弄清楚什麼是錯的。請幫忙！jQuery同位素表問題，除了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/[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/