如何使用Table对JSON数据进行排序并创建分页？

Question

我有一个问题，关于如何在HTML表中对一些JSON数据进行排序。 atm我已经完成了所以价格在页面加载时排序，但我希望能够点击“产品”按名称对产品进行排序，并且还可以点击“价格”按价格对产品进行排序。

带有分页，每页最多可以有5个产品。

我能够获得这个JSON的下拉列表吗？ （我想要一个不同大小的下拉列表）

{"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Lyngby BK Udebanesokker 2016/17", "sizes": "37-39, 40-42, 43-45, 46-48", "kid_adult": "1", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/153339/a49c1aad13e9.jpg", "package": "0", "price": "119,00", "url": "https://www.unisport.dk/fodboldtroejer/lyngby-bk-udebanesokker-201617/153339/", "online": "1", "price_old": "119,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153339_maxi_0.jpg", "id": "153339", "women": "0"}

这是我的HTML：

        <div class="container-fluid row">
        <header class="container">
            <a href="#" class="logo-btn" tabindex="1" style="margin:5px;"><img src="https://unisport-assets.s3.amazonaws.com/styleguide/img/logo.svg" alt="Logo"></a>
        </header>

    <div class="col-md-12">
        <table id="product_table" class="table table-responsive table-md">
            <thead>
                <tr>
                    <th onclick="sortProduct">Product</th>
                    <th></th>
                    <th>Sizes</th>
                    <th onclick="sortPrice">Price</th>
                    <th>Delivery</th>
                </tr>
            </thead>

            <tbody>

            </tbody>

        </table>
        </div>
    </div>
        <script src="js/bootstrap.js"></script>

    </div>

以及我在标签中包含/链接的文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" data-semver="3.1.1" data-require="jquery"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js" data-semver="1.10.0" data-require="jqueryui"></script>
    <script src="js/script.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" data-semver="1.10.0" data-require="jqueryui" />

这是我的脚本文件，它将JSON数据放入表中按价格排序：

 $(document).ready(function(){
    //$.getJSON("unisport.json", function(data){
        var json = [{"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Lyngby BK Udebanesokker 2016/17", "sizes": "37-39, 40-42, 43-45, 46-48", "kid_adult": "1", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/153339/a49c1aad13e9.jpg", "package": "0", "price": "119,00", "url": "https://www.unisport.dk/fodboldtroejer/lyngby-bk-udebanesokker-201617/153339/", "online": "1", "price_old": "119,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153339_maxi_0.jpg", "id": "153339", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5", "sizes": "XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg", "package": "0", "price": "359,00", "url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/", "online": "1", "price_old": "799,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg", "id": "157128", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Select N\u00e5l Protection - Sort", "sizes": "One Size", "kid_adult": "0", "free_porto": "0", "image": "https://dhmmnhg6rkouo.cloudfront.net/product/157755/8900b1658d61.jpg", "package": "0", "price": "9,00", "url": "https://www.unisport.dk/fodboldudstyr/select-nal-protection-sort/157755/", "online": "1", "price_old": "9,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157755_maxi_0.jpg", "id": "157755", "women": "0"}, {"is_customizable": "0", "delivery": "4-8 dage", "kids": "0", "name": "Tottenham Plakat", "sizes": "One Size", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/112510/dcfeadc1fe6e.jpg", "package": "0", "price": "49,00", "url": "https://www.unisport.dk/fodboldtroejer/tottenham-plakat/112510/", "online": "1", "price_old": "49,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/112510_maxi_0.jpg", "id": "112510", "women": "0"}, {"is_customizable": "0", "delivery": "2-3 dage", "kids": "1", "name": "Tyrkiet Hjemmebanetr\u00f8je 2016/17 ARDA B\u00f8rn", "sizes": "Boys XS: 122-128 cm, Boys S: 128-137 cm, Boys M: 137-147 cm, Boys XL: 158-170 cm", "kid_adult": "0", "free_porto": "0", "image": "https://d2qmfz594u0oa4.cloudfront.net/product/146876/6c06c5fc7489.jpg", "package": "0", "price": "546,00", "url": "https://www.unisport.dk/fodboldtroejer/tyrkiet-hjemmebanetrje-201617-arda-brn/146876/", "online": "1", "price_old": "679,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/146876_maxi_0.jpg", "id": "146876", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "1", "name": "Lyngby BK Hjemmebaneshorts 2016/17 B\u00f8rn", "sizes": "164 cm", "kid_adult": "0", "free_porto": "0", "image": "https://d2qmfz594u0oa4.cloudfront.net/product/153341/6e413d078950.jpg", "package": "0", "price": "67,00", "url": "https://www.unisport.dk/fodboldtroejer/lyngby-bk-hjemmebaneshorts-201617-brn/153341/", "online": "1", "price_old": "269,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153341_maxi_0.jpg", "id": "153341", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Chelsea 3. s\u00e6t 2016/17", "sizes": "", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/153638/46da93725847.jpg", "package": "1", "price": "767,00", "url": "https://www.unisport.dk/fodboldtroejer/chelsea-3-st-201617/153638/", "online": "1", "price_old": "1.117,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153638_maxi_0.jpg", "id": "153638", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "1", "name": "Lyon Udebaneshorts 2017/18 B\u00f8rn", "sizes": "128 cm, 140 cm, 152 cm, 164 cm, 176 cm", "kid_adult": "0", "free_porto": "0", "image": "https://d2ij1pxeion66i.cloudfront.net/product/161439/f0930fdcda2d.jpg", "package": "0", "price": "269,00", "url": "https://www.unisport.dk/fodboldtroejer/lyon-udebaneshorts-201718-brn/161439/", "online": "1", "price_old": "0,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/161439_maxi_0.jpg", "id": "161439", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Chelsea Sutteflaske", "sizes": "One Size", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/155823/db1499b2e8b0.jpg", "package": "0", "price": "35,00", "url": "https://www.unisport.dk/fodboldtroejer/chelsea-sutteflaske/155823/", "online": "1", "price_old": "59,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/155823_maxi_0.jpg", "id": "155823", "women": "0"}, {"is_customizable": "1", "delivery": "2-3 dage", "kids": "1", "name": "Manchester United M\u00e5lmandstr\u00f8je 2016/17 B\u00f8rn DE GEA 1", "sizes": "176 cm", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/154012/adc11e972215.jpg", "package": "0", "price": "479,00", "url": "https://www.unisport.dk/fodboldtroejer/manchester-united-malmandstrje-201617-brn-de-gea-1/154012/", "online": "1", "price_old": "0,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/154012_maxi_0.jpg", "id": "154012", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Barcelona Hjemmebanes\u00e6t 2016/17", "sizes": "", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/155778/a4b3c8136e8e.jpg", "package": "1", "price": "799,00", "url": "https://www.unisport.dk/fodboldtroejer/barcelona-hjemmebanest-201617/155778/", "online": "1", "price_old": "1.057,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/155778_maxi_0.jpg", "id": "155778", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "0", "name": "PUMA evoPOWER Vigor 3 FG - Gul/Navy/Orange", "sizes": "EU 39/UK 6, EU 40/UK 6\u00bd, EU 40\u00bd/UK 7, EU 41/UK 7\u00bd, EU 42/UK 8, EU 42\u00bd/UK 8\u00bd, EU 43/UK 9, EU 44/UK 9\u00bd, EU 44\u00bd/UK 10, EU 45/UK 10\u00bd, EU 46/UK 11, EU 46\u00bd/UK 11\u00bd, EU 47/UK 12", "kid_adult": "0", "free_porto": "0", "image": "https://dhmmnhg6rkouo.cloudfront.net/product/156164/8c08260eab5f.jpg", "package": "0", "price": "559,00", "url": "https://www.unisport.dk/fodboldstoevler/puma-evopower-vigor-3-fg-gulnavyorange/156164/", "online": "1", "price_old": "699,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/156164_maxi_0.jpg", "id": "156164", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Lejerbo BK - Baselayer L/\u00c6 Hvid", "sizes": "X-Large, XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://dhmmnhg6rkouo.cloudfront.net/product/153150/ebb844871ed0.jpg", "package": "0", "price": "279,00", "url": "https://www.unisport.dk/team-sport/lejerbo-bk-baselayer-l-hvid/153150/", "online": "1", "price_old": "279,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153150_maxi_0.jpg", "id": "153150", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "1", "name": "Lyon Hjemmebanes\u00e6t 2017/18 Mini-Kit B\u00f8rn", "sizes": "92cm, 98cm, 104cm, 110cm, 116cm", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/161437/1379174ec063.jpg", "package": "0", "price": "499,00", "url": "https://www.unisport.dk/fodboldtroejer/lyon-hjemmebanest-201718-mini-kit-brn/161437/", "online": "1", "price_old": "0,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/161437_maxi_0.jpg", "id": "161437", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Nike Benskinneholdere Bl\u00e5", "sizes": "One Size", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/58304/4f5cb7b9e8f4.jpg", "package": "0", "price": "49,00", "url": "https://www.unisport.dk/benskinner/nike-benskinneholdere-bla/58304/", "online": "1", "price_old": "49,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/58304_maxi_0.jpg", "id": "58304", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Under Armour H\u00e6ttetr\u00f8je Sportstyle Fleece - Gr\u00e5/Sort", "sizes": "X-Large", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/157466/46d070fad1e4.jpg", "package": "0", "price": "449,00", "url": "https://www.unisport.dk/fodboldudstyr/under-armour-httetrje-sportstyle-fleece-grasort/157466/", "online": "1", "price_old": "599,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157466_maxi_0.jpg", "id": "157466", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Lyngby BK Hjemmebanes\u00e6t \u00c5rgang 2006 Drenge", "sizes": "", "kid_adult": "0", "free_porto": "0", "image": "https://dhmmnhg6rkouo.cloudfront.net/product/92025/81ab22a22d8a.jpg", "package": "1", "price": "575,00", "url": "https://www.unisport.dk/team-sport/lyngby-bk-hjemmebanest-argang-2006-drenge/92025/", "online": "1", "price_old": "687,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/92025_maxi_0.jpg", "id": "92025", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "1", "name": "Barcelona Hjemmebanes\u00e6t 2016/17 B\u00f8rn", "sizes": "", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/155777/a4b3c8136e8e.jpg", "package": "1", "price": "725,00", "url": "https://www.unisport.dk/fodboldtroejer/barcelona-hjemmebanest-201617-brn/155777/",
         "online": "1", "price_old": "907,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/155777_maxi_0.jpg", "id": "155777", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "1", "name": "Chelsea 3. s\u00e6t 2016/17 B\u00f8rn", "sizes": "", "kid_adult": "0", "free_porto": "0", "image": "https://d23m35kqv7rxx3.cloudfront.net/product/153643/46da93725847.jpg", "package": "1", "price": "822,00", "url": "https://www.unisport.dk/fodboldtroejer/chelsea-3-st-201617-brn/153643/", "online": "1", "price_old": "917,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153643_maxi_0.jpg", "id": "153643", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "1", "name": "Valencia Hjemmebanetr\u00f8je 2016/17 B\u00f8rn", "sizes": "128 cm, 140 cm, 152 cm, 164 cm", "kid_adult": "0", "free_porto": "0", "image": "https://d2ij1pxeion66i.cloudfront.net/product/150173/038c84829a39.jpg", "package": "0", "price": "238,00", "url": "https://www.unisport.dk/fodboldtroejer/valencia-hjemmebanetrje-201617-brn/150173/", "online": "1", "price_old": "529,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/150173_maxi_0.jpg", "id": "150173", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "Under Armour H\u00e6ttetr\u00f8je Sportstyle Fleece - Gr\u00e5/Sort", "sizes": "X-Small, Small, Medium, Large, X-Large, XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/157462/1bdb5c5fc155.jpg", "package": "0", "price": "539,00", "url": "https://www.unisport.dk/fodboldudstyr/under-armour-httetrje-sportstyle-fleece-grasort/157462/", "online": "1", "price_old": "599,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157462_maxi_0.jpg", "id": "157462", "women": "0"}, {"is_customizable": "0", "delivery": "1-2 dage", "kids": "0", "name": "adidas Tr\u00e6nings T-Shirt Tango - Bl\u00e5", "sizes": "X-Small, Small, Medium, Large, X-Large, XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://dhmmnhg6rkouo.cloudfront.net/product/156965/cfab84a549b6.jpg", "package": "0", "price": "136,00", "url": "https://www.unisport.dk/fodboldudstyr/adidas-trnings-t-shirt-tango-bla/156965/", "online": "1", "price_old": "249,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/156965_maxi_0.jpg", "id": "156965", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "0", "name": "Dortmund Hjemmebanetr\u00f8je 2016/17 Champions League", "sizes": "Medium, Large, X-Large, XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://dxjm75mafwy8p.cloudfront.net/product/153166/e16bceb44120.jpg", "package": "0", "price": "324,00", "url": "https://www.unisport.dk/fodboldtroejer/dortmund-hjemmebanetrje-201617-champions-league/153166/", "online": "1", "price_old": "649,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/153166_maxi_0.jpg", "id": "153166", "women": "0"}, {"is_customizable": "0", "delivery": "4-8 dage", "kids": "0", "name": "Leeds United Blade Puttercover + Mark\u00f8r", "sizes": "One Size", "kid_adult": "0", "free_porto": "0", "image": "https://d34aj0jffcqapo.cloudfront.net/product/134179/252672733f41.jpg", "package": "0", "price": "189,00", "url": "https://www.unisport.dk/fodboldtroejer/leeds-united-blade-puttercover-markr/134179/", "online": "1", "price_old": "189,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/134179_maxi_0.jpg", "id": "134179", "women": "0"}, {"is_customizable": "1", "delivery": "1-2 dage", "kids": "0", "name": "Newcastle United 3. Tr\u00f8je 2016/17", "sizes": "X-Small, Small, Medium, Large, X-Large, XX-Large", "kid_adult": "0", "free_porto": "0", "image": "https://d2qmfz594u0oa4.cloudfront.net/product/152795/64a37e3df0f8.jpg", "package": "0", "price": "324,00", "url": "https://www.unisport.dk/fodboldtroejer/newcastle-united-3-trje-201617/152795/", "online": "1", "price_old": "649,00", "currency": "DKK", "img_url": "https://s3-eu-west-1.amazonaws.com/product-img/152795_maxi_0.jpg", "id": "152795", "women": "0"}];
        var product_data = '';

        json.sort(function(a,b) { return parseFloat(a.price) - parseFloat(b.price) } );
        //json.sort(function(a,b) { return parseFloat(b.name) - parseFloat(a.name) } );

        $.each(json, function(key, value){
            product_data += '<tr>';
            product_data += '<td><a href="#">'+value.name+'</a></td>';
            product_data += '<td><img style="height:50px;width:50px;" src="'+value.image+'"></td>';
            product_data += '<td>'+value.sizes+'</td>';
            product_data += '<td><s>'+value.price_old+'</s><br /><b>'+value.price+'<br />'+value.currency+'</b></td>';
            //product_data += '<td><s>'+value.price_old+'</s></td>';
            product_data += '<td>'+value.delivery+'</td>';
            product_data += '</tr>';
        });
        $('#product_table').append(product_data);
    });
//});

这是我的桌子现在看起来如何的图片

（JSON和JS不是我最强的一面）