Javascript Jquery数据表多个表

我有一个带有多个选项的下拉列表，可以使用javascript初始化数据表。一切都很好，但当我有两个json数据，我想显示如下，请看这个问题

---

这是代码

HTML

---

我想要的是，当选择team（团队）选项时，将显示如上所示的数据。请提供任何帮助…

您必须自己进行分组。我现在没有时间。查看datatable文档并查找行分组：

更新： 更好的解决方案是：

else if(value= "Chelsea")
{
    table.clear().rows.add(chelseaKeepers.concat(chelseaDefenders)).draw();
}

---

发布一些代码，让我们看看您尝试了什么。您的小提琴坏了。我刚刚修复了你的错误：@duffymo，点击小提琴你会看到所有的代码…@ReaganGallant，首先我没有收到任何错误，其次你的小提琴没有修复问题，我只想当你选择chelsea选项时，显示chelseaKeepers和chelseaDefenders的json数据，如我的问题所示，这就是我想要的，再次感谢：-）或连接两个数组…？@HatteringMouse我实现了你建议的。检查更新的代码。

<select id="playersFilter">
    <option>Choose Players</option>
    <option value="gk">goalkepeers</option>
    <option value="def">Defenders</option>
     <option value="Chelsea">Chelsea</option>
</select>
<table class="display" id="players"></table>

var goalkepeers = [{
    "playerName": "Mignolet",
    "playerClub": "Liverpool",
    "playerValue": "5.0",
    "playerPoints": "89"
}, {
    "playerName": "de Gea",
    "playerClub": "Manchester",
    "playerValue": "6.7",
    "playerPoints": "120"
}];
var defenders = [{
    "playerName": "Ivanovic",
    "playerClub": "Chelsea",
    "playerValue": "7.8",
    "playerPoints": "100"
}, {
    "playerName": "Mertesacker",
    "playerClub": "Arsenal",
    "playerValue": "7.7",
    "playerPoints": "110"
}];

var chelseaKeepers= [{
    "playerName": "Courtois",
    "playerClub": "chelsea",
    "playerValue": "5.5",
    "playerPoints": "121"
}, {
    "playerName": "Begovic",
    "playerClub": "chelsea",
    "playerValue": "5.0",
    "playerPoints": "106"
}];

var chelseaDefenders= [{
    "playerName": "Ivanovic",
    "playerClub": "Chelsea",
    "playerValue": "7.8",
    "playerPoints": "100"
}, {
    "playerName": "Terry",
    "playerClub": "chelsea",
    "playerValue": "7.0",
    "playerPoints": "177"
}];

var aoColumns = [{
    "sTitle": "Name",
    "mDataProp": "playerName"
}, {
    "sTitle": "Club",
    "mDataProp": "playerClub"
}, {
    "sTitle": "Value",
    "mDataProp": "playerValue"
}, {
    "sTitle": "Points",
    "mDataProp": "playerPoints"
}];
var table = $('#players').DataTable({
    "iDisplayLength": 15,
    "columns": aoColumns,
    "order": [
        [3, "desc"]
    ],
        "destroy": true
});
$("#playersFilter").change(function () {
    var value = this.value;
    if (value == "gk") {
        table.clear().rows.add(goalkepeers).draw();
    } else if (value == "def") {
        table.clear().rows.add(defenders).draw();
    } else {
        table.clear().draw();
    }
});

else if(value= "Chelsea")
{
    table.clear().rows.add(chelseaKeepers.concat(chelseaDefenders)).draw();
}