【问题标题】:Populate grouped tables from php and filtered by jquery using ajax json从 php 填充分组表并使用 ajax json 由 jquery 过滤
【发布时间】:2019-01-25 06:21:29
【问题描述】:

我有两个 php 文件。 fetch.php 创建过滤后的数组(从leagueboxes.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"
    }]
}

谢谢

【问题讨论】:

  • 嗨。据我了解,您的问题是在 php 中创建一个符合您需要的 json 结构,对吗?您能否发布 (1) 您当前的 json 结构示例(echo json_encode($final) 的结果)和 (2) 您想要/期望创建的 json 结构。我认为这将有助于其他人更好地理解您的问题
  • 谢谢。以下是没有分组的json,但在一个表中所有框。

标签: php jquery json ajax pdo


【解决方案1】:

这就是你要找的东西吗?它只是遍历查询结果并通过box_id将其放入map中:

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

【讨论】:

  • 谢谢,如何在 create_list 函数中循环遍历这个数组,以便每个表都有 box_id 作为标题。我想我必须循环两次,以便表格详细信息在标题中。不确定?
  • 谢谢。如果我将来自 ajax 的数组粘贴到您的 const 数据中,它工作正常。但是,如果我尝试直接在 ajax 中使用数据,即 success:function(array){ create_list(array, $('#container')); }
  • 你需要调试它。我不能为你做。例如,可能是因为您需要 JSON.parse(array) 就像您在以前的代码中使用的一样
  • 谢谢。我以为我试过了,但显然没有。它现在完美填充。我现在唯一的问题是每次单击时,都会在旧表下方创建一个新表。如何清除之前的表格?
  • 您可以使用 jquery remove()empty()。谷歌很容易
猜你喜欢
  • 2017-03-18
  • 2011-12-01
  • 1970-01-01
  • 2016-12-29
  • 1970-01-01
  • 1970-01-01
  • 2011-09-17
  • 2010-12-17
  • 2014-08-18
相关资源
最近更新 更多