Mahmood Rehman
Reputation: 4331
Set order of table using column in jquery
I have table like this :
And below is the html of above table.I am trying to order the table with sox_color and size.Like Color Alphabet A with size 1 will come up first and so one.Should i use jquery sorting plugin for it or custom code can help me.
<table class="configurable-product-table" cellspacing="0">
<tbody>
<tr>
<th>Size</th>
<th>sox_Colour</th>
<th>Availability</th>
<th> </th>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[758][140]" value="17">
</td>
<td>red
<input type="hidden" name="super_attribute_quickshop[758][139]" value="10">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[758]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[761][140]" value="17">
</td>
<td>Pink
<input type="hidden" name="super_attribute_quickshop[761][139]" value="66">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[761]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[764][140]" value="17">
</td>
<td>Orange
<input type="hidden" name="super_attribute_quickshop[764][139]" value="63">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[764]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[767][140]" value="17">
</td>
<td>Light Green
<input type="hidden" name="super_attribute_quickshop[767][139]" value="80">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[767]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[770][140]" value="17">
</td>
<td>Purple
<input type="hidden" name="super_attribute_quickshop[770][139]" value="52">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[770]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[771][140]" value="18">
</td>
<td>Purple
<input type="hidden" name="super_attribute_quickshop[771][139]" value="52">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[771]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[773][140]" value="17">
</td>
<td>Beige
<input type="hidden" name="super_attribute_quickshop[773][139]" value="53">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[773]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[774][140]" value="18">
</td>
<td>Beige
<input type="hidden" name="super_attribute_quickshop[774][139]" value="53">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[774]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[776][140]" value="17">
</td>
<td>Grey
<input type="hidden" name="super_attribute_quickshop[776][139]" value="56">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[776]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[777][140]" value="18">
</td>
<td>Grey
<input type="hidden" name="super_attribute_quickshop[777][139]" value="56">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[777]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[779][140]" value="17">
</td>
<td>Brown
<input type="hidden" name="super_attribute_quickshop[779][139]" value="78">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[779]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[780][140]" value="18">
</td>
<td>Brown
<input type="hidden" name="super_attribute_quickshop[780][139]" value="78">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[780]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[782][140]" value="17">
</td>
<td>Navy
<input type="hidden" name="super_attribute_quickshop[782][139]" value="64">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[782]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[783][140]" value="18">
</td>
<td>Navy
<input type="hidden" name="super_attribute_quickshop[783][139]" value="64">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[783]" value="0">
</td>
</tr>
<tr>
<td>2-8
<input type="hidden" name="super_attribute_quickshop[785][140]" value="17">
</td>
<td>black
<input type="hidden" name="super_attribute_quickshop[785][139]" value="9">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[785]" value="0">
</td>
</tr>
<tr>
<td>6-11
<input type="hidden" name="super_attribute_quickshop[786][140]" value="18">
</td>
<td>black
<input type="hidden" name="super_attribute_quickshop[786][139]" value="9">
</td>
<td>
<p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
</td>
<td>
<input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[786]" value="0">
</td>
</tr>
</tbody>
</table>
Upvotes: 0
Views: 86
Answers (3)
Wesley Smith
Reputation: 19571
A simple sort function would work, but as chris mentions, DataTables is perfectly suited to this kind of thing. All you would need to do is add the required files then call:
$(document).ready(function() {
$('.configurable-product-table').DataTable( {
"aaSorting":[ [0, 'asc'],[1, 'asc'] ],
"iDisplayLength": 20,
"pageLength": 20,
"responsive": true
} );
} );
Working jsFiddle
Upvotes: 1
Arun P Johny
Reputation: 388316
You could use a sort function like
var $tbody = $('.configurable-product-table tbody');
var trs = $tbody.children().slice(1).get();
trs.sort(function (a, b) {
var $atds = $(a).find('td'),
$btds = $(b).find('td');
var c = $atds.eq(1).text().localeCompare($btds.eq(1).text());
if (c == 0) {
c = sizeFormat($atds.eq(0).text()).localeCompare(sizeFormat($btds.eq(0).text()));
}
return c;
})
function sizeFormat(size) {
return size.replace(/\d+/g, function (v) {
return +v < 10 ? '0' + v : v
})
}
$tbody.append(trs)
Demo: Fiddle
Upvotes: 1
Chris
Reputation: 1230
Sincereley I'd use DataTables for jobs like this. Alternatively, you can attach onclick events to the table headers and reload the table via ajax. Obviously ordering is server side in this case.
Upvotes: 0