Question posted in
You can find the official documentation here.

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

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 |
+----------+------------+
Tags:

3

Answers


  1. 0

    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>');
});
    Login or Signup to reply.
  2. 0

    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>');
    });

 }
    Login or Signup to reply.
  3. 0

    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>');
});
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search