如何从json格式显示时间表

时间:2017-07-12 06:55:16

标签: php codeigniter

这里我正在进行学校管理时间表创建,已经创建了类名称(LKG)和部分名称(A)的时间表。这里我将分享我的数据库结构。

  

time_table(表名)

timeTableId  classId  sectionId  subjectId  teacherId  dayId  period

   1           LKG      A         Tamil        X       Monday    1
   2           LKG      A         Tamil        X       Monday    3
   3           LKG      A         Hindi        X       Monday    2
   4           LKG      A         English      X       Monday    4
   5           LKG      A         Science      X       Monday    5
   6           LKG      A         Maths        X       Monday    6
   7           LKG      A         Science      X       Monday    7
   8           LKG      A         Hindi        X       Monday    8
    9           LKG      A         Tamil        X       Tuesday    1
   10           LKG      A         Tamil        X       Tuesday    3
   11           LKG      A         Hindi        X       Tuesday    2
   12           LKG      A         English      X       Tuesday    4
   13           LKG      A         Science      X       Tuesday    5
   14           LKG      A         Maths        X       Tuesday    6
   15           LKG      A         Science      X       Tuesday    7
   16           LKG      A         Hindi        X       Tuesday    8

现在我想显示时间表这样

  

预期答案

Day  Period1 Period2 Period3 Period4 Period5 Period6 Period7 Period8

Monday  Tamil  Hindi  Tamil  English  Science Maths  Science  Hindi
Tuesday  Tamil  Hindi  Tamil  English  Science Maths  Science  Hindi
  

我的HTML表格

<table id="timeTableList" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Day</th>
                  <th>Peroid 1</th>
                  <th>Peroid 2</th>
                  <th>Peroid 3 </th>
                  <th>Peroid 4</th>
                  <th>Peroid 5</th>
                  <th>Peroid 6</th>
                  <th>Peroid 7</th>
                  <th>Peroid 8</th>
                </tr>
                </thead>

                <tbody>

                </tbody>

              </table>
  

我的控制器

public function timetabeleget_validate()
 { 

        date_default_timezone_set('Asia/Kolkata');

        $data = array(
        "classId" => $_POST['className'],
        "sectionId" => $_POST['sectionName'],

        );

        $login_response= $this->Add_settings->get_timeTable($data);
} 
  

我的模特

 public function get_timeTable($params)
    { 
        $this->db->select('*');
        //$this->db->order_by("timeTableId","desc");
        $this->db->where('status !=', '1');
        $this->db->where('schoolId =', $this->session->userdata('school_id'));
        $this->db->where('classId =', $params['classId']);
        $this->db->where('sectionId =', $params['sectionId']);
        $result=$this->db->get('time_table')->result();

        if(!empty($result)){
            $data  = array("status" => "success", "monday" => $result);
            echo json_encode($data);
        }
        else{
            $data  = array("status" => "Error", "description" => "Not Found");
            echo json_encode($data);
        }

    }
  

我的回复

    {
  "status": "success",
  "monday": [
    {
      "timeTableId": "1",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "5",
      "teacherId": "7",
      "dayId": "1",
      "period": "1",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "3",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "10",
      "teacherId": "2",
      "dayId": "1",
      "period": "2",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "2",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "5",
      "teacherId": "7",
      "dayId": "1",
      "period": "3",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "4",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "6",
      "teacherId": "3",
      "dayId": "1",
      "period": "4",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "5",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "8",
      "teacherId": "6",
      "dayId": "1",
      "period": "5",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "6",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "7",
      "teacherId": "3",
      "dayId": "1",
      "period": "6",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "7",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "8",
      "teacherId": "6",
      "dayId": "1",
      "period": "7",
      "academicYear": "2017",
      "status": "0"
    },
    {
      "timeTableId": "8",
      "schoolId": "4",
      "classId": "8",
      "sectionId": "18",
      "subjectId": "10",
      "teacherId": "5",
      "dayId": "1",
      "period": "8",
      "academicYear": "2017",
      "status": "0"
    }
  ]
}

根据我的回答,我无法显示时间表格式,

  

我的表格和AJAX

<form action="#" method="POST" id="getTimeTableForm">
          <div class="box-body">

                <div class="form-group">
              <label for="Class Name" class="col-sm-3 control-label">Class Name: <span class="star"> * </span></label>
              <div class="col-md-9">
                 <select class="form-control select2 classId" style="width: 100%;" name="className" onchange="getSection(this.value);" required="" data-msg-required="Please select class name" aria-required="true">
                  <option value="">Select Class</option>
                   <?php 
                    foreach ($dbResultClass as $desc) : 
                    ?>
                    <option value="<?php echo $desc->class_id; ?>"><?php echo $desc->class_name; ?></option>
               <?php endforeach;?>
                </select>

              </div>
            </div>

            <div class="form-group">
              <label for="Section Name" class="col-sm-3 control-label">Section Name: <span class="star"> * </span></label>
              <div class="col-md-9">
                 <select class="form-control select2 sectionAppend sectionId" style="width: 100%;" name="sectionName" required="" data-msg-required="Please select section name" aria-required="true" >
                  <option value="">Select Section</option>
                </select>

              </div>
            </div>
         <!-- /.box-body -->
          <div class="box-footer">
            <button type="submit" class="btn btn-info pull-right" id="btn-submit">Submit</button>
          </div>
          <!-- /.box-footer -->
        </form>
  

AJAX

$(document).ready(function(){
    $("#btn-submit").click(function(e){
      e.preventDefault();
       if($("#getTimeTableForm").valid()){
             $( "#btn-submit" ).prop( "disabled", true );
                $.ajax({
                 type:'POST',
                 url :"timetabeleget_validate",
                 data: $('form#getTimeTableForm').serialize(),
                 success: function(data) {
                         var res=jQuery.parseJSON(data);
                         console.log(res);

                        /*if(res['status']=="success"){
                           var htmlString='';
                           $.each( res['monday'], function( key, value ) {
                                var period = value.period
                            });


                           alert(period);

                            $('#timeTableList tbody').empty().append(htmlString);


                        }else{
                            $('#timeTableList tbody').empty().append('No Datas Found');
                        }*/


                 },
                 error:function(exception){
                 alert('Exeption:'+exception);
                }
                }); 
    }

    });
  });

2 个答案:

答案 0 :(得分:0)

You first have to change the code in the model where you are fetching the data.. Apply the orderBy on period column instead of timeTableId column. So that you can display the subjects in ascending order.

Below code is the part of your ajax call after getting the response.

Here, first, you need to unset the key 'status' from the response object.

    delete res.status;

    var time_table_template  = '<tr>';

    $.each(res,function(index, entries){
        time_table_template += '<td>'+index+'</td>';
        $.each(entries, function(index, data){
            time_table_template += '<td>'+data.subjectId+'</td>';
        });
    });

    time_table_template += '</tr>';

    $("#timeTableList tbody").append(time_table_template);

答案 1 :(得分:0)

使用ajax成功函数更新以下代码

if(res['status']=="success"){
  var rw = '<tr><td>Monday</td>';
  $.each( res['monday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr><tr><td>Tuesday</td>';
  $.each( res['tuesday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr><td>Wednesday</td>';
  $.each( res['wednesday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr><td>Thursday</td>';
  $.each( res['thursday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr><td>Friday</td>';
  $.each( res['friday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr><td>Saturday</td>';
  $.each( res['saturday'], function( key, value ) {
    rw += '<td>'+value.subjectId+'</td>';
  });
  rw += '</tr>';

  $('#timeTableList tbody').empty().append(rw);
}

希望它对你有用。如果您需要任何帮助,请告诉我们......我们很乐意帮助您...