Jquery Datatables 多个表

Question

我有一个包含多个选项的下拉列表，使用 javascript 初始化数据表。一切正常，但当我有两个 json 数据要显示如下时，问题就来了，请看这个 fiddle

Chelsea Goalkepeers
______________________________________________________________________________
playerName    | Player Club |  Player Value  | player Points

______________________________________________________________________________
Chelsea Defenders
______________________________________________________________________________
playerName    | Player Club |  Player Value  | player Points

这是代码

HTML

<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>

JAVASCRIPT

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();
    }
});

我想要的只是选择团队选项时显示的数据，如上所示。任何帮助请...

Answer 1

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

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

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

https://jsfiddle.net/x1y0kmfo/24/

Jquery Datatables 多个表

Jquery Datatables multiple tables

javascript

datatable

jquery

datatables