jQuery is not rendering properly datatable

Question

i am Django user i want to render out my api data using jQuery. Api data is rendered but the datatable is not working properly. but when i render data in datatable using django template datatable working fine. i thing some class's of datatable maybe not working. i try harder but i don't know how can i debug this thing. can anybody know how can i render datatable properly in html using jQuery?

it's jQuery Output

Django Output

<table id="approvedData">
    <thead>
        <tr>
            <th>ID</th>
            <th>Story</th>
            <th>Created By</th>
            <th>Timestamp</th>
            <th>Priority</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="approvedList">

    </tbody>
</table>

index.js

function fetchData() {

    $.ajax({
        type: 'GET',
        url: endpoint,
        success: function (data) {
            console.log(data)
            var html = '';
            data.map(object => {
                let storyStatus = ('Story not finish');
                let colorClassName = ("badge-danger");

                if (object.story_status === "sf") {
                    colorClassName = "badge-success";
                    storyStatus = "Story finish"
                }

                if (object.story_status === "fr") {
                    colorClassName = "badge-success";
                    storyStatus = "Approved"
                }
                html += `<tr>
                            <td> ` + object.id + `</td>           
                            <td><a href="#"> ` + object.title + `</a></td>          
                            <td> ` + object.author + `</td>           
                            <td> ` + moment(object.created_on).fromNow() + `</td>           
                            <td><span class="badge ${colorClassName} id="story-status">${storyStatus}</span></td>
                            <td>
                                <div class="table-btns">
                                    <a href="${updateURL}update/${object.id}" class="table-btn table-btn--edit">
                                        <i class="icon ion-ios-create"></i>
                                    </a>
                                    <a href="#" class="table-btn table-btn--delete">
                                        <i class="icon ion-ios-trash"></i>
                                    </a>
                                </div>
                            </td>           
                        </tr>`;
                //This is selector of my <tbody> in my table
                $("#approvedList").html(html);
                $('.table-btn--delete').click(function () {
                    var this_html = $(this);
                    var pk = this_html.parent().parent().parent().children().first().text();
                    swal({
                        title: "Are you sure?",
                        text: "You will not be able to recover this story!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                        .then((willDelete) => {
                            if (willDelete) {
                                $.ajax({
                                    url: '{% url "del" %}',
                                    type: 'POST',
                                    headers: { "X-CSRFToken": '{{csrf_token}}' },
                                    data: { pk: pk },
                                    success: function () {
                                        swal("Story has been deleted!", {
                                            icon: "success",
                                        });
                                        this_html.parent().parent().parent().remove();
                                    }
                                });
                            } else {
                                swal("Story is safe");
                            }
                        });
                });
            });
        }
    });
};
fetchData();
setInterval(fetchData, 2000)

That looks more like a layout issue in HTML/CSS than anything to do with JS or Django. To find the differences use the DOM inspector in both versions and check for extra/missing classes or ids which affect the styling on the table or its cells — Rory McCrossan
– Rory McCrossan, Commented Dec 9, 2020 at 15:56
yeah cells are affected. i also debug it but didn't find anything difference between both tables? — afi
– afi, Commented Dec 9, 2020 at 16:07

fluid undefined · Accepted Answer · 2020-12-09 16:20:47Z

1

After modifing the rows from a rendered Datatable, You have to destroy it and rebuild the table. I'd store the table instance given by jQuery to do that.

var myTable = $("#approvedData").DataTable();

After inserting new rows

myTable.destroy();

And

myTable = $("#approvedData").DataTable();

Make sure you have 'myTable' available in the function scope

DataTable Destroy

answered Dec 9, 2020 at 16:20

fluid undefined

4193 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

afi Over a year ago

i don't understand how can i destroy datatable would you like to update your code in my Question ?

Collectives™ on Stack Overflow

jQuery is not rendering properly datatable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related