Displaying data in table(view) passed from Controller – Codeigniter

I want to display data in table on inserting data as well as when the page is loaded. Storing data successfully works with the code but the issue is;

When I use POST, the form data is completely visible in the URL.
How do i display all data passed in json format in html table.

HTML:

<table class="table table-striped table-bordered" id="myTable">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Match</th>
            <th scope="col">Match Date</th>
            <th scope="col">Winner</th>
            <th scope="col">Loser</th>
            <th scope="col">Man of the Match</th>
            <th scope="col">Bowler of Match</th>
            <th scope="col">Best Fielder</th>
        </tr>
        </thead>
    </table>

JAVASCRIPT:

<script>
$(function() {
    $("#submit").on("click", function(e) {
        var team_one = $('#team_one').val();
        var team_two = $('#team_two').val();
        var match_summary = $('#match_summary').val();
        var match_date = $('#match_date').val();
        var winner = $('#winner').val();
        var loser = $('#loser').val();
        var man_of_the_match = $('#man_of_the_match').val();
        var bowler_of_the_match = $('#bowler_of_the_match').val();
        var best_fielder = $('#best_fielder').val();

        $.ajax(
                {
                    type: "POST", //HTTP POST Method
                    url: '<?php echo base_url(); ?>/MatchController/storeMatch',
                    data: { //Passing data
                        'team_one': team_one,
                        'team_two': team_two,
                        'match_summary' : match_summary,
                        'match_date' : match_date,
                        'winner' : winner,
                        'loser' : loser,
                        'man_of_the_match' : man_of_the_match,
                        'bowler_of_the_match' : bowler_of_the_match,
                        'best_fielder' : best_fielder
                    },
                    success: function (response) {

                        console.log("Response: " + response);

                        alert("Data stored successfully");

                    },

                });
    });
});


//FETCH ALL MATCH DATA USING PASSED API IN CONTROLLER

$(document).ready(function (){
    getData();

    function getData(){
        $.ajax({
            url : "<?php echo base_url(); ?>/MatchController/fetchMatchData",
            method : 'get',
            dataType: "json",
            success: function(data){

            }
        });
    }
});

CONTROLLER:

    public function storeMatch()
{

    $team_one = $_POST['team_one'];
    $team_two = $_POST['team_two'];
    $match_date = $_POST['match_date'];
    $match_summary = $_POST['match_summary'];
    $winner = $_POST['winner'];
    $loser = $_POST['loser'];
    $man_of_the_match = $_POST['man_of_the_match'];
    $bowler_of_the_match = $_POST['bowler_of_the_match'];
    $best_fielder = $_POST['best_fielder'];

    $data = array(
        'team_one' => $team_one,
        'team_two' => $team_two,
        'match_date' => $match_date,
        'match_summary' => $match_summary,
        'winner' => $winner,
        'loser' => $loser,
        'man_of_the_match' => $man_of_the_match,
        'bowler_of_the_match' => $bowler_of_the_match,
        'best_fielder' => $best_fielder
    );

    $this->MatchModel->saveMatchData($data);

}

public function fetchMatchData()
{
    $match_data = $this->MatchModel->fetchMatchList();
    return $match_data;
}

Answer

Try to pass the result to <tbody> use JQuery

 success: function(data){
     //delete old tbody block
     $('#myTable tbody').remove()
     //add tbody block
     $('#myTable').append('<tbody><tr><td>'+data.someValue+'</td></tr></tbody>')
        }

And when you want add new data jast call your getData().

success: function (response) {
                    getData()
                    console.log("Response: " + response);

                    alert("Data stored successfully");

                },

Also look at e.preventDefault for your ajax call. If you use ajax needlessly reload page

Advertisement

Answer