JS- How to paginate data from database?-CodePudding

I have large database, which processing from serverSide. The problem is that when I run the , then I get all data at once, I know the server side works well but till I don't do pagination it's ussles. The main code is in python/ flask but the server side and table is in html and Js. Can someone help me how to paginate the data from js side or should I do it from flask side? The code bellow create te table and displaying data from server-side.

1#edit The data are sql data and I'm using my own library which create table return data from database

def get_query_per_technology(technology):
    tech_table = {"Windows": """
                   select name as Name, phone , adress
                    from alvaro.alcatraz_kongo}

return tech_table

2#Edit: I'm not using sqlAlchemy so all tutorial doesn't work for me

3#Edit: The paging should be enable defult but it doesn't work and thats what i get: Showing 0 to 0 of 0 entries (filtered from NaN total entries), When I was doing dataTable from client side the information was clear and nice, but from serverSide i got 0 even if the columns are displaying.

Many thanks for any help :D

{% extends "base.html" %}
<HTML>

{% block content %}



    <table id="data" class="table table-striped" width="80%">
        <thead>
        <tr>
            <th scope="col">Phone</th>
            <th scope="col">Name</th>
            <th scope="col">Adress</th>
            
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}


{% block scripts %}
    <script>
        $(document).ready(function () {
            $('#data').DataTable({
                ajax: '/api/infrmation',
                serverSide: true,
                lengthMenu: [[10, 15, 20, 25], [10, 15, 20, 25]],
                bProcessing: true,
                bjQueryUI: true,
                columns:
                    [
                        {data: 'Phone'},
                        {data: 'Name'},
                        {data: 'Adress'},
                        ],
            });
            $('.loader').remove();



        });

    </script>
{% endblock %}
</html>

CodePudding user response：

The server (Flask) should send only as much information as will be shown on the frontend. Imagine that a mobile user opens your website and in the background they will receive 100 000 datapoints, out of which only say 10 will be shown in the table. That would not only be slow, the user could also be on mobile data and just visiting your website could cost him money!

When you google something, there are often millions of results - do you think Google server sends all those results to your computer and then it's handled by JavaScript to show only the first 10? No, it sends you only those first 10 results and loads additional ones when you click on the paginator.

There are many ways how to achieve this, it's really up to imagination. One way would be to have a backend endpoint with parameter pageNumber which stands for which results to fetch. E.g. if your data is sorted by date and there are 10 results shown in a table, pageNumber = 1 could fetch the first 10 results, pageNumber = 2 would fetch results 11-20 etc. The endpoint should also return the total amount of results so that frontend knows how many possible values of pageNumber to show on the paginator.

CodePudding user response：

I'm not sure I understand properly your question, but if you want to parse your javascript data with python you can find your answer here: Reading config.js in Python