从php填充分组表，并使用ajax json通过jquery过滤

时间：2018-08-18 11:59:12

标签： php jquery json ajax pdo

我有两个php文件。 fetch.php创建过滤后的数组（来自agueboxbox.php的过滤器），并将其通过ajax json传递回Leagueboxes.php。

fetch.php 

<?php 

include_once 'dbconfig.php';

if(isset($_GET['filter'])){

    $filter = $_GET['filter'];

    $query ="SELECT box_id, league_id, position, ";
    $query .="(SELECT GROUP_CONCAT(DISTINCT CONCAT(U.first_name, ' 
',U.last_name) SEPARATOR ' & ')FROM reg_players RP,users U ";
    $query .="WHERE RP.id = LE.reg_num AND U.id = RP.user)AS player, ";
    $query .="points, place ";  
    $query .="FROM league_entries LE ";
    $query .="JOIN round_league_boxes2 RLB ON RLB.id = 
LE.round_league_box_id ";
    $query .="JOIN leagues L ON L.id = RLB.league_id ";
    $query .="JOIN boxes B ON B.id = RLB.box_id ";
    $query .="WHERE league_id =:league ";
    $query .="ORDER BY round_league_box_id, position";

    $stmnt = $DB_con->prepare($query);
    $stmnt->bindParam(":league",$filter);
    $stmnt->execute();

    $final=$stmnt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($final);
}
?>

leagueboxes.php 

<?php
include_once 'dbconfig.php';
include_once 'header.php';
?>
<script>
    $(document).ready(function(){
        function create_list(data){
            var table = $('#table');
            table.html('');
            var table_head = $('<tr>');
            table_head.append($('<th>').text('Box'))
            table_head.append($('<th>').text('Position'))
            table_head.append($('<th>').text('Player'))
            table_head.append($('<th>').text('Points'))
            table_head.append($('<th>').text('Place'))
            table.append(table_head);
            for(var x in data){
                var tr = $('<tr>');
                tr.append($('<td>').text(data[x].box_id));
                tr.append($('<td>').text(data[x].position));
                tr.append($('<td>').text(data[x].player));
                tr.append($('<td>').text(data[x].points));
                tr.append($('<td>').text(data[x].place));
                table.append(tr);
            };
        }
        $.ajax({
            url:'fetch.php?filter=1',
            type:'GET',
            success:function(data){
                var d = JSON.parse(data);
//              console.log(d);
                create_list(d);
            }
        });
        $('.filter').on('click',function(){
            var filter = $(this).val();
            var title = $(this).text();
            $('#selected').text(title);
            $.ajax({
            url:'fetch.php?filter='+filter,
            type:'GET',
            success:function(data){
                var d = JSON.parse(data);
//              console.log(d);
                create_list(d);
                }
            });
        });
    });
    </script>
    <style>
        table {
            margin-top:10px;
        }
        table tr {
            border-bottom: 1px solid #ddd;
        }
        table tr th {
            text-transform:uppercase;
            padding:5px 10px;
        }
        table tr td {
            padding:5px 10px;
        }
        table tr:nth-child(odd){
            background:#eee;
        }
    </style>

    <div class="clearfix"></div><br/>
    <div class="container">
        <div class="card-header">
           <h1> League Tables</h1>
        </div>
    </div>
    <div class="container">
        <div class="card-body">

            <button type="button" class="filter btn-primary" value=1>Singles</button>
            <button type="button" class="filter btn-primary" value=2>Ladies Doubles</button>
            <button type="button" class="filter btn-primary" value=3>Mens Doubles</button>
            <button type="button" class="filter btn-primary" value=4>Mixed Doubles</button>
        </div>
        <br>
        <div class="col-md-8 col-md-offset-2" >
            <h3 id="selected">Singles</h3>
        </div>
        <div class="col-md-8 col-md-offset-2" >
            <table class="table table-striped" id="table">
                <caption id="box"></caption>
            </table>
        </div> 
    </div>


<?php include_once 'footer.php'; ?>

我想用box_id填充表格标题，并为过滤后的联赛中的每个框都有一个表格。

我的问题是我认为我无法遍历所产生的数组来将每个位置，玩家，点数和位置放在一个盒子中。我认为也许我需要创建一个嵌套数组。也许在我将其编码为json之前？

我已经使用（PDO :: FETCH_GROUP | PDO :: FETCH_ASSOC）创建一个嵌套数组，然后使用php foreach来使用php填充html，因此我将数据按box_id分组。但是，这似乎无法使用json工作，或者我无法工作该怎么做？ 这是未分组的数组：-

[{
    "box_id": "1",
    "league_id": "1",
    "position": "1",
    "player": "Caroline Hogan",
    "points": "27",
    "place": "0"
}, {
    "box_id": "1",
    "league_id": "1",
    "position": "2",
    "player": "Fran Gordon",
    "points": "11",
    "place": "0"
}, {
    "box_id": "1",
    "league_id": "1",
    "position": "3",
    "player": "Josh Handley",
    "points": "39",
    "place": "0"
}, {
    "box_id": "2",
    "league_id": "1",
    "position": "1",
    "player": "Gillian Shaw",
    "points": "0",
    "place": "0"
}, {
    "box_id": "2",
    "league_id": "1",
    "position": "2",
    "player": "Sally Westwood",
    "points": "0",
    "place": "0"
}, {
    "box_id": "2",
    "league_id": "1",
    "position": "3",
    "player": "Sandy Eley",
    "points": "0",
    "place": "0"
}]

这是分组数组，我无法确定如何定义box_id等。

{
    "1": [{
        "league_id": "1",
        "position": "1",
        "player": "Caroline Hogan",
        "points": "27",
        "place": "0"
    }, {
        "league_id": "1",
        "position": "2",
        "player": "Fran Gordon",
        "points": "11",
        "place": "0"
    }, {
        "league_id": "1",
        "position": "3",
        "player": "Josh Handley",
        "points": "39",
        "place": "0"
    }],
    "2": [{
        "league_id": "1",
        "position": "1",
        "player": "Gillian Shaw",
        "points": "0",
        "place": "0"
    }, {
        "league_id": "1",
        "position": "2",
        "player": "Sally Westwood",
        "points": "0",
        "place": "0"
    }, {
        "league_id": "1",
        "position": "3",
        "player": "Sandy Eley",
        "points": "0",
        "place": "0"
    }]
}

谢谢

1 个答案:

答案 0 :(得分：0)

这是您要寻找的东西吗？它只是循环遍历查询结果，然后按box_id将其放入地图中：

$grouped = [];
foreach ($final as $m) {
  $box_id = $m['box_id'];
  if (empty($grouped[$box_id])) {
    $grouped[$box_id] = [];
  }
  unset($m['box_id']);
  array_push($grouped[$box_id], $m);
}
echo json_encode($grouped);

结果：

{
  "1": [
    {
      "league_id": "1",
      "position": "1",
      "player": "Caroline Hogan",
      "points": "27",
      "place": "0"
    },
    {
      "league_id": "1",
      "position": "2",
      "player": "Fran Gordon",
      "points": "11",
      "place": "0"
    },
    {
      "league_id": "1",
      "position": "3",
      "player": "Josh Handley",
      "points": "39",
      "place": "0"
    }
  ],
  "2": [
    {
      "league_id": "1",
      "position": "1",
      "player": "Gillian Shaw",
      "points": "0",
      "place": "0"
    },
    {
      "league_id": "1",
      "position": "2",
      "player": "Sally Westwood",
      "points": "0",
      "place": "0"
    },
    {
      "league_id": "1",
      "position": "3",
      "player": "Sandy Eley",
      "points": "0",
      "place": "0"
    }
  ]
}

要在js中将结果显示为带标题的表：

const data = {"1":[{"league_id":"1","position":"1","player":"Caroline Hogan","points":"27","place":"0"},{"league_id":"1","position":"2","player":"Fran Gordon","points":"11","place":"0"},{"league_id":"1","position":"3","player":"Josh Handley","points":"39","place":"0"}],"2":[{"league_id":"1","position":"1","player":"Gillian Shaw","points":"0","place":"0"},{"league_id":"1","position":"2","player":"Sally Westwood","points":"0","place":"0"},{"league_id":"1","position":"3","player":"Sandy Eley","points":"0","place":"0"}]};

function create_list(data, container){
  Object.keys(data).forEach((boxId) => {
   container.append(create_table(boxId, data[boxId]));
  });
}

function create_table(boxId, data) {
    var table = $('<table>');
    table.append($('<caption>').text(boxId));
    var table_head = $('<tr>');
    table_head.append($('<th>').text('Position'))
    table_head.append($('<th>').text('Player'))
    table_head.append($('<th>').text('Points'))
    table_head.append($('<th>').text('Place'))
    table.append(table_head);
    for(let x in data){
        let tr = $('<tr>');
        tr.append($('<td>').text(data[x].position));
        tr.append($('<td>').text(data[x].player));
        tr.append($('<td>').text(data[x].points));
  tr.append($('<td>').text(data[x].place));
        table.append(tr);
    }
    return table;
}

create_list(data, $('#container'))
table {
  margin: 2em 0;
  font-family: "Trebuchet MS";
  border-collapse: collapse;  
}

caption {
  margin: 2px 0;
}

caption, th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>

相关问题
最新问题