pagination does not work and table show all data in one page

pagination does not work and table show all data in one page

bibalanibibalani Posts: 14Questions: 3Answers: 0


```
var oTable;
$(document).ready(function(){
$('#order_form').submit(function(e){
e.preventDefault();

        var serializedData = $(this).serialize();
        var url  = document.querySelector('#order_form').dataset.url
        // var url  = "{% url 'my_app:add_order_regular_customer' %}"
        $.ajax({
            type: 'POST',
            url: url,
            data: serializedData,
            success: function(response){
                $('#order_form').trigger('reset');

                var ser_order = JSON.parse(response['ser_order']);
                var fields = ser_order[0]['fields'];
                $('#order_info tbody').prepend(
                    `<tr>
                    <td>${fields["id"]||""}</td>
                    <td>${fields["sequence"]||""}</td>
                    <td>${fields["product"]||""}</td>
                    <td>${fields["quantity"]||""}</td>
                    <td>${fields["order_date"]||""}</td>
                    <td>${fields["source"]||""}</td>
                    <td>${fields["destination"]||""}</td>
                    </tr>`
                )
                location.reload();
            },
            error: function(response){
                console.log(response)
            }
        });

    });
    oTable = $('#order_info').dataTable();
});

```

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Move oTable = $('#order_info').dataTable(); to the end of your success function so it runs after the table is populated. Between lines 24 and 25 for example.

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0

    unfortunately, it does not work.

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Why do you have location.reload();?

    What exactly did you change?

    Can you post a link to your page or a test case replicating the issue so we can help debug?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Thanks for the test case but it doesn't run. Make sure to remove oTable = $('#order_info').dataTable() on line 32 and move it to your success function. Line 32 is executed before the Ajax response so you are initializing an empty Datatable then building an HTML table which Datatables knows nothing about.

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0
    edited April 2022


    I attached the .js and html files. thank you for your help
    base.html
    regular_customer.html
    regular_customer.js

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Sorry, I'm unable to open your rar file. Did you make the changes I suggested. If you can't provide a running test case then post you JS code like before.

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0
    edited April 2022
     var oTable;
        $(document).ready(function(){
            $('#order_form').submit(function(e){
                e.preventDefault();
    
                var serializedData = $(this).serialize();
                var url  = document.querySelector('#order_form').dataset.url
                // var url  = "{% url 'my_app:add_order_regular_customer' %}"
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: serializedData,
                    success: function(response){
                        $('#order_form').trigger('reset');
                        
                        var ser_order = JSON.parse(response['ser_order']);
                        var fields = ser_order[0]['fields'];
                        
                        $('#order_info tbody').append(
                            `<tr>
                            <td>${fields["id"]||""}</td>
                            <td>${fields["sequence"]||""}</td>
                            <td>${fields["product"]||""}</td>
                            <td>${fields["quantity"]||""}</td>
                            <td>${fields["order_date"]||""}</td>
                            <td>${fields["source"]||""}</td>
                            <td>${fields["destination"]||""}</td>
                            </tr>`
                        ) 
                        location.reload();
                        oTable = $('#order_info').dataTable();       
                    },
                    error: function(response){
                        console.log(response)
                    } 
                });        
            });     
        });
    

    html

     {% if order_list %}
             
            <table id="order_info" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Order Sequence</th>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Order Date</th>
                        <th>Source Warehouse</th>
                        <th>Destination Warehouse</th>
                    </tr>
                </thead>
                {% for order in order_list %}
                <tbody>
                    <tr>
                        <td>{{ order.id }}</td>
                        <td>{{ order.sequence }}</td>
                        <td>{{ order.product }}</td>
                        <td>{{ order.quantity }}</td>
                        <td>{{ order.order_date | date:'Y-m-d' }}</td>
                        <td>{{ order.source }}</td>
                        <td>{{ order.destination }}</td>
                    </tr>
                </tbody>
                {% endfor %}
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Order Sequence</th>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Order Date</th>
                        <th>Source Warehouse</th>
                        <th>Destination Warehouse</th>
                    </tr>
                </tfoot>
    
            </table>
        
        {% endif %}
    

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Now it looks like the Datatable isn't initialized as all the Dattaable elements like search are missing.

    Have you tried removing location.reload();?

    Do you get errors in the browser's console or alert messages?

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0
    edited April 2022
    var oTable;
        $(document).ready(function(){
            $('#order_form').submit(function(e){
                e.preventDefault();
    
                var serializedData = $(this).serialize();
                var url  = document.querySelector('#order_form').dataset.url
                // var url  = "{% url 'my_app:add_order_regular_customer' %}"
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: serializedData,
                    success: function(response){
                        $('#order_form').trigger('reset');
                        
                        var ser_order = JSON.parse(response['ser_order']);
                        var fields = ser_order[0]['fields'];
                        
                        
                        $('#order_info').append(
                            `<tr>
                            <td>${fields["id"]||""}</td>
                            <td>${fields["sequence"]||""}</td>
                            <td>${fields["product"]||""}</td>
                            <td>${fields["quantity"]||""}</td>
                            <td>${fields["order_date"]||""}</td>
                            <td>${fields["source"]||""}</td>
                            <td>${fields["destination"]||""}</td>
                            </tr>`
                        ) 
                        // location.reload();
                        oTable = $('#order_info').dataTable();       
                    },
                    error: function(response){
                        console.log(response)
                    } 
                });        
            });     
        });
    
    
  • bibalanibibalani Posts: 14Questions: 3Answers: 0

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Do you get errors in the browser's console or alert messages?

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0

    No

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    There is something going on that can't be debugged with the information provided. Please post a link to your page or a running test case that replicates the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954

    Another thing to try is instead of populating the table like this:

                        $('#order_info').append(
                            `<tr>
                            <td>${fields["id"]||""}</td>
                            <td>${fields["sequence"]||""}</td>
                            <td>${fields["product"]||""}</td>
                            <td>${fields["quantity"]||""}</td>
                            <td>${fields["order_date"]||""}</td>
                            <td>${fields["source"]||""}</td>
                            <td>${fields["destination"]||""}</td>
                            </tr>`
                        )
    

    Let Datataables populate the table. Maybe something like this using data and columns.data:

        $('#example').DataTable({
            "data": fields,
            "columns": [
                { "data": "id" },
                { "data": "sequence" },
                { "data": "product" },
                { "data": "quantity" },
                { "data": "order_date" },
                { "data": "source" },
                { "data": "destination" }
            ]
        });
    

    Kevin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0

    I got this error:
    DataTables warning: table id=order_info - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

  • bibalanibibalani Posts: 14Questions: 3Answers: 0

    I have removed all actions in success function but showing the $('#order_info') table. However, the datatable pagination is not working!

    {% if order_list %}
             
            <table id="order_info" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Order Sequence</th>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Order Date</th>
                        <th>Source Warehouse</th>
                        <th>Destination Warehouse</th>
                    </tr>
                </thead>
                {% for order in order_list %}
                <tbody>
                    <tr>
                        <td>{{ order.id }}</td>
                        <td>{{ order.sequence }}</td>
                        <td>{{ order.product }}</td>
                        <td>{{ order.quantity }}</td>
                        <td>{{ order.order_date | date:'Y-m-d' }}</td>
                        <td>{{ order.source }}</td>
                        <td>{{ order.destination }}</td>
                    </tr>
                </tbody>
                {% endfor %}
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Order Sequence</th>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Order Date</th>
                        <th>Source Warehouse</th>
                        <th>Destination Warehouse</th>
                    </tr>
                </tfoot>
    
            </table>
        
        {% endif %}
    
    
    
    
    {% endblock %}
    

    ```
    $(document).ready(function(){
    $('#order_form').submit(function(e){
    e.preventDefault();

            var serializedData = $(this).serialize();
            var url  = document.querySelector('#order_form').dataset.url
            // var url  = "{% url 'my_app:add_order_regular_customer' %}"
            $.ajax({
                type: 'POST',
                url: url,
                data: serializedData,
                success: function(response){
    
                    $('#order_info').DataTable();
    
                },         
            });
        });
    });
    

    ```

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • bibalanibibalani Posts: 14Questions: 3Answers: 0
    edited April 2022
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Thanks for the test case, but it doesn't run! We need to see the problem you want help with to be able to progress this,

    Colin

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954
    Answer ✓

    I got this error:
    DataTables warning: table id=order_info - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

    Did you follow the troubleshooting steps at the link in the error?
    http://datatables.net/tn/3

    Are you initializing Datatables somewhere else outside the $('#order_form').submit(function(e) handler?

    You might need to add the destroy option depending on your requirements. Seeing the running web page or test case will help us to understand the flow of your code to help with suggestions.

    Kevin

Sign In or Register to comment.