badge in a select to show an accountant

Question

badge in a select to show an accountant

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I am looking for a way to display a list that contains the number of students per room, that is:

Ex:

HTML

<div class="form-group">
   <select class="form-control" name="selecgrupo" id="selecgrupo">
     <option>Seleccione Grupo</option>
   </select>
</div>
<br>

JQUERY

$.ajax({
    url: 'list_group',
    type: 'POST',
})
.done(function(answer)
{
    var result = $.parseJSON(answer);

    for (var i = result.length - 1; i >= 0; i--)
    {                   
        $("#selecgrupo").append("<option value='" + result[i].id_grupo+ "'>" + result[i].grupo +  "</option>");
    }
})      
.fail(function(){
    console.log("error");
});

PHP

Returns the answer in JSON and with append ready the id and the group and in HTML I show that list ...

CONTROLLER

public function list_group(){
   $response = $this->list_group_model->list_group();
   echo json_encode($response);
}

MODEL

public function list_group(){
   $sql= $this->db->conn_id->execute("
     SELECT id_group, group
     FROM grupos
     ORDER BY group DESC");   

   return $sql;
}

Ex:

GRUPO A
GRUPO B
GRUPO C

You need to list that list with the number of students:
Ex:

GRUPO A      20
GRUPO B      11
GRUPO C      30

Thank you.

javascript jquery html5 php ajax

asked by JDavid 02.01.2017 в 15:18

source

2 answers

0

Assuming you have 3 tables:

Groups
Students
Group_study

You can do a group by and a join to bring the number of students. For example:

select sg.group_id, g.name, count(s.student_id) as 'cant'
  from study_group sg
inner join groups g on sg.group_id = g.group_id
inner join students s on sg.student_id = s.student_id
group by sg.group_id, g.name order by g.name asc;

And in JS:

$.ajax({
  url: 'list_group',
  type: 'POST'
})
.done(groups => {
  groups.forEach(function (group) {
    $('#selecgrupo').append(
      '<option value="${group.group_id}">${group.grupo} - (${group.cantidad})</option>'
    );
  });
});

It will render something like:

<option value="a294d">Grupo 1 - (45)</option>

You can see this sqlfiddle to try it out.

answered by 02.01.2017 в 16:12

Place a link in an android cardview connected to the database in Firebase Sessions do not appear when I make a call by ajax

score 0 · Accepted Answer

If what you need is something like the following: (Execute the code to visualize)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">


<select class="selectpicker">
  <option data-content="<span class='label label-success'>50</span> GRUPO A ">GRUPO A</option>
  <option data-content="<span class='label label-success'>20</span> GRUPO B ">GRUPO B</option>
  <option data-content="<span class='label label-success'>30</span> GRUPO C ">GRUPO C</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

You must bear in mind the following:

PHP

Change the query you have in the Model so that the number of students per group also returns, eg

SELECT grupos.id_group, grupos.group, COUNT(estudiantes.id_estudienta) cant 
FROM grupos INNER JOIN estudiantes ON grupos.id_group = estudiantes.id_group 
GROUP BY grupos.id_group, grupos.group 
ORDER BY group DESC

HTML

Include in addition to the bootstrap the following extended library for selects link

javascript

Your JavaScript should look similar to the following:

for (var i = result.length - 1; i >= 0; i--)
{                   
   $("#selecgrupo").append("<option value='" + result[i].id_grupo+ "' data-content='<span class=\"label label-success\">" + result[i].cant + "</span> " + result[i].grupo + " '>" + result[i].grupo +  "</option>");
}