why does It takes too much time to convert data into datatable form?

amitccet

Hi All,

I have near about 2500 data.
Below are the steps, I am performing..
--> User clicks on the Menu, and it goes to the controller and get all data in the list.
---> List having near about 2500 rows data.
----> From controller, it comes into the UI Page.

Now the problem is, when the user comes, he needs to wait for some time, till all the CSS & Data Table gets formed correctly,

It is frustrating for the end user. Not sure how to solve this.

I can't attach any image in the forums because of that, I wan't able to share how my screen looks initially.

Can some one please help asap ?

Thanks,
Amit

amitccet

Just to add more, I am adding code,

I am getting list from the server side controller, which I want to display in the page.

Below HTML Code.

<table id="d_gu_grid" class="display" cellspacing="0"
    class="gridMargin" >
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
            <th>State</th>
            <th>Phone no</th>
            <th>Address</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>City</th>
            <th>State</th>
            <th>Phone no</th>
            <th>Address</th>
        </tr>
    </tfoot>
    <tbody>
        <c:choose>
            <c:when test="${not empty UserList}">
                <c:forEach var="user"
                    items="${UserList}">
                    <tr>
                        <td>${user.name }</td>
                        <td>${user.city }</td>
                        <td>${user.state }</td>
                        <td>${user.phone }</td>
                        <td>${user.address }</td>
                    </tr>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <tr>
                    <td colspan="5"><b>No Users were found</b></td>
                </tr>
            </c:otherwise>
        </c:choose>
    </tbody>
</table>

Below Javascript code, I am using..

<script type="text/javascript">
    $(document)
            .ready(
                    function() {
                        // Setup - add a text input to each footer cell
                        $('#d_gu_grid tfoot th')
                                .each(
                                        function() {
                                            var title = $(this).text();
                                            $(this)
                                                    .html(
                                                            '<input type="text" placeholder="Search '+title+'" />');
                                        });

                        // DataTable
                        var table = $('#d_gu_grid').DataTable({
                            "columnDefs" : [{
                                className : "columnwidthAttrName",
                                "targets" : [ 0 ]
                            },{
                                className : "columnwidthRegistryId",
                                "targets" : [ 1 ]
                            },{
                                className : "columnwidthDesc",
                                "targets" : [ 2 ]
                            },{
                                className : "columnwidthSubjectArea",
                                "targets" : [ 3 ]
                            }, {
                                className : "columnwidthStatus",
                                "targets" : [ 4 ]
                                 
                            } ],
                            "pagingType" : "full"
                        });

                        // Apply the search
                        table
                                .columns()
                                .every(
                                        function() {
                                            var that = this;

                                            $('input', this.footer())
                                                    .on(
                                                            'keyup change',
                                                            function() {
                                                                if (that
                                                                        .search() !== this.value) {
                                                                    that
                                                                            .search(
                                                                                    this.value)
                                                                            .draw();
                                                                }
                                                            });
                                        });

                    });
</script>

amitccet

Can someone please help me out on this issue ?