在jquery中使用列设置表的顺序

Question

我有这样的桌子：

​

下面是上表的html，我正在尝试用sox_color和size.Like Color Alphabet A和大小1来订购表，所以one.Should我使用jquery排序插件，或者定制代码可以帮我。

   <table class="configurable-product-table" cellspacing="0">
    <tbody>
        <tr>
            <th>Size</th>
            <th>sox_Colour</th>
            <th>Availability</th>
            <th>&nbsp;</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>

Answer 1

您可以使用一个排序函数，例如

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)

演示：小提琴

Answer 2

一个简单的排序函数可以工作，但是正如chris提到的，DataTables非常适合这类事情。您需要做的就是添加所需的文件，然后调用：

$(document).ready(function() {
     $('.configurable-product-table').DataTable( {
        "aaSorting":[ [0, 'asc'],[1, 'asc'] ], 
        "iDisplayLength": 20, 
        "pageLength": 20,
        "responsive": true
    } );    

} );

工作jsFiddle

Answer 3

辛塞利，我会用DataTables来做这样的工作。或者，您可以将onclick事件附加到表头，并通过ajax重新加载表。显然，在这种情况下，排序是服务器端。