Home » Php » php – Display laravel retrun result in html table using jquery- Ajax

php – Display laravel retrun result in html table using jquery- Ajax

Posted by: admin February 25, 2020 Leave a comment

Questions:

In Laravel Blade I have a script for searching

 <script type="text/javascript">
    $.ajax({
        type: "POST",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        url: "{{ URL::asset('upload-panel/search')}}",
        data: dataString,
        dataType:"JSON",
        cache: false,
        success: function(result) { 
        var FinalResult=result.CallDetails
        num_rows = result.length;
        console.log(result)


        },error:function(x,e) {
            setTimeout(function() {searchPhoneCalls();}, 2000);
        }
    })
</script>

search function in controller returns is below

return json_encode($users);

In console am getting the result as an array like below

0: {Short_name: "GO120762", Date: "21-01-2020"}
1: {Short_name: "GO120764", Date: "21-01-2020"}
2: {Short_name: "GO120766", Date: "21-01-2020"}

I want to display those result in a HTML table like below

+----------+------------+
| Name     | Date       |
+----------+------------+
| GO120762 | 21-01-2020 |
+----------+------------+
| GO120764 | 21-01-2020 |
+----------+------------+
| GO120766 | 21-01-2020 |
+----------+------------+

How to&Answers:

It has nothing to deal with Laravel, it’s pure HTML / jQuery “problem”.

There is no such key named CallDetails exists in received JSON

You can build an array in your HTML :

<table id="table-search"></table>

And in your JS :

var $tableSearch = $('#table-search');
$tableSearch.html('');
//var FinalResult = result.CallDetails
result.forEach(function(row) {
    $tableSearch.append('<tr><td>'+ row.Short_name +'</td><td>'+ row.Date +'</td></tr>');
});

Answer:

In your blade:

<table>
    <thead>
        <th>Name</th>
        <th>Date</th>
    </thead>
    <tbody class="tbody">

    </tbody>
</table>

IN ajax script:

success: function(result) { 
    var FinalResult=result.CallDetails
    num_rows = result.length;
    console.log(result)

    $.each(FinalResult, function(index, value){
        $('tbody').append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
    });

 }

Answer:

Try like this

success: function(result) {
 var tableSearch = $('#table-search');
 tableSearch.html('');

 $.each(result, function(index, value){
    tableSearch.append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
});
}