Ajax response appending in a table

Nayak

New Member
#1
I am doing a django project where in in ajax, i am calling my function and getting response in array then i am appending those response in my html table.
Mã:
<script>
        $(document).ready(function(){
            $.ajax({
                method : 'POST',
                url : '/home',
                data: {
                csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(data){
                var res = $.parseJSON(data);
                var trHTML = '';
                if (res.code == '200'){
                    for(i in res.data){
                    console.log(res.data)
                    console.log(res.data[i].id);
                    trHTML +=
                            '<tr><td><div><img src='
                            + res.data[i].poster_url + '>'
                            + '</td><td><div>'
                            + res.data[i].name
                            + '</div><div></div></td><td>'
                            + res.data[i].content_types_id
                            + '</td><td>'
                            + 'Africa'
                            + '</td><td><ul>'
                            + '</ul><td>';

                    }
                } else {
                    alert('Cart is empty');
                }
                $('#table-list').append(trHTML);


                },
                error: function(data){
                    console.log(data);

                },


            })
        })

    </script>
html codes
Mã:
<table id="table-list" class="col-md-12 table-bordered table-striped table-condensed cf">
                        <thead class="cf">
                            <tr>
                                <th width="10%">&nbsp;</th>
                                <th width="30%" class="numeric">File Name</th>
                                <th width="15%" class="numeric">Content Type</th>
                                <th width="16%" class="numeric">Geo Rights</th>
                                <th width="16%" class="numeric">License</th>
                                <th width="13%" class="numeric">Action</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-title=""><div class="product"><img src="{% static 'images/p1.jpg' %}"></div></td>
                                <td data-title="File Name">
                                <div class="fl">The Lost World: Jurassic Park</div>
                                <div><button type="button" class="btn btn-white"><i class="fas fa-upload"></i> Upload Video</button></div>
                                </td>
                                <td data-title="Content Type">Video</td>
                                <td data-title="Geo Rights">Asia Pacific, Africa</td>
                                <td data-title="License">Active Licenses:16</td>
                                <td align="left" valign="middle" data-title="Action">
                                <ul class="action_icon">
                                    <li><i class="fas fa-pencil-alt"></i></li>
                                    <li><i class="fas fa-trash-alt"></i></li>
                                    <li><i class="fas fa-ban"></i></li>
                                </ul>
                                </td>

                            </tr>
But problem is when i append in front-end it shows only those columns while i want button section and action section to be intact.But i am not able to achieve it, how can i do so?
 

Admin

Administrator
Thành viên BQT
#2
You try:

JS
Mã:
<script>
    $(document).ready(function(){
        $.ajax({
            method : 'POST',
            url : '/home',
            data: {
            csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(data){
                var res = $.parseJSON(data);
                var trHTML = '';
                if (res.code == '200'){
                    for(i in res.data){
                        console.log(res.data)
                        console.log(res.data[i].id);
                        trHTML = $(`<tr>
                            <td><div><img src= ${res.data[i].poster_url}></td>
                            <td><div>${res.data[i].name}</div><div></div></td>
                            <td>${res.data[i].content_types_id}</td>
                            <td>Africa</td>
                            <td><ul>
                                  <li><i class="fas fa-pencil-alt"></i></li>
                                  <li><i class="fas fa-trash-alt"></i></li>
                                  <li><i class="fas fa-ban"></i></li>
                                 </ul>
                            <td></tr>`);
                         $('#table-list').append(trHTML);
                    }
                } else {
                    alert('Cart is empty');
                }
            },
            error: function(data){
                console.log(data);
            },
        })
    })
</script>
HTML
Mã:
<table class="col-md-12 table-bordered table-striped table-condensed cf">
    <thead class="cf">
         <tr>
            <th width="30%" class="numeric">File Name</th>
            <th width="15%" class="numeric">Content Type</th>
            <th width="16%" class="numeric">Geo Rights</th>
            <th width="16%" class="numeric">License</th>
            <th width="13%" class="numeric">Action</th>
          </tr>
     </thead>
     <tbody id="table-list"></tbody>
</table>
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top