文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >从php填充分组的表，并使用ajax json通过jquery进行过滤

问从php填充分组的表，并使用ajax json通过jquery进行过滤
EN

Stack Overflow用户
提问于 2018-08-18 19:59:12
回答 1查看 152关注 0票数 0

我有两个php文件。fetch.php创建经过过滤的数组(来自leagueboxes.php的过滤器)，并通过ajax json将其传递回leagueboxes.php。

fetch.php

代码语言：javascript
复制
<?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

代码语言：javascript
复制
<?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，或者我不能工作我们怎么做呢？这是未分组的数组：-

代码语言：javascript
复制
[{
    "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，等等。

代码语言：javascript
复制
{
    "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
jquery
json
ajax
pdo
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-20 08:15:49

这就是你要找的吗？它简单地遍历查询结果并通过box_id将其放入地图中

代码语言：javascript
复制
$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);

结果：

代码语言：javascript
复制
{
  "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中将结果显示为带有标题的表：

​

代码语言：javascript
复制
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'))
代码语言：javascript
复制
table {
  margin: 2em 0;
  font-family: "Trebuchet MS";
  border-collapse: collapse;  
}

caption {
  margin: 2px 0;
}

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

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

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51908408

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档