Bring from the database only the datas that the user are seeing

jas_jose

I have implemeted a DataTable (https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html) in my page, and add a load more button (from here https://gyrocode.com/articles/jquery-datatables-load-more-button/). What I am trying to do is when the user click in the button to show more, the procedure brings more datas to him. What is happening right now is that the database is beeing loaded for completed, something that I don't want....
The Procedure is alredy done...

My code bellow

var table = $('#tabela-precos-clt').DataTable({
            dom: 'lfrt',
            serverSide: true, //false --> ok!
            processing: true,
            ajax: $.fn.dataTable.pageLoadMore({
                url: 'https://gyrocode.github.io/files/jquery-datatables/arrays.json'
            }),
            "aaSorting": [],
            "columnDefs": [
                {
                    "searchable": false,
                    "orderable": false,
                    "targets": [0],
                    "visible": true
                }
            ],
            "order": [[1, 'asc']],
            "responsive": true,
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json",
                "searchPlaceholder": "Pesquisa de Dados"
            },
            drawCallback: function () {
                if ($('#btn-load-more').is(':visible')) {
                    $('html, body').animate({
                        scrollTop: $('#btn-load-more').offset().top
                    }, 1000);
                    event.preventDefault();
                }
                $('#btn-load-more').toggle(true);
                console.log("botão funciona!");
            }
        });
        table.on('order.dt search.dt', function () {
            let i = 1;

            table.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
                this.data(i++);
            });
        }).draw();

        $('#btn-load-more').on('click', function () {
            table.page.loadMore();
        });
        $("#tabela-precos-clt").addClass("tabela-ativa");
    }

Is that possible, how?

rf1234

What I am trying to do is when the user click in the button to show more, the procedure brings more datas to him.

You have sever side turned on. If you use paging all of this works out of the box. Set paging to 5 records, then only 5 records are read from the server. Click to see the next page and 5 more records are being read etc. (If you don't use serverside: All records are loaded that qualify regardless of paging.)

What is happening right now is that the database is beeing loaded for completed, something that I don't want....

Because you don't have paging turned on. Just turn it on and you're done.
https://datatables.net/reference/option/paging
This also important for the pagination control:
https://datatables.net/reference/option/dom

jas_jose

@rf1234 hey, even setting up the paging to 10, the table doens't work as expected... using the ajax url to show the datas, the table bring all of then and the button doens't work because the table already loaded all datas....

code bellow ---

var TableCnh = $('#tabela-precos').DataTable({
            dom: 'lfrt',
            serverSide: true,
            processing: true,
            ajax: $.fn.dataTable.pageLoadMore({
                url: 'https://gyrocode.github.io/files/jquery-datatables/arrays.json'
            }),
            "paging": 10,
            "aaSorting": [],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                }
            ],
            "order": [[0, 'desc']],
            "responsive": true,
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json",
                "searchPlaceholder": "Pesquisa de Dados"
            },
            drawCallback: function () {
                if ($('#btn-load-more-cnh').is(':visible')) {
                    $('html, body').animate({
                        scrollTop: $('#btn-load-more-cnh').offset().top
                    }, 1000);
                    event.preventDefault();
                }
                $('#btn-load-more-cnh').toggle(true);
                console.log("botão funciona!");
            }
        });

Any thoughts about what can be causing this annoying issue??
Please let me know as soon as posible!

kthorngren

You have enabled server side processing with serverSide: true. Does your server script support the server side processing protocol? Your server script is expected to perform paging and provide the only the rows to be displayed on the page. Sounds like your server script provides all rows. With server side processing you wouldn't need to use a load more button as you would use the paging button provided by Datatatables.

Kevin

rf1234

Good point, Kevin!
Editor would do this automatically for server side processing. I checked it today. Somehow I assumed that Editor was being used.
Roland

jas_jose

Soo that is the point @kthorngren, the load more button is a better way to show to the user the datas, once the user click, brings more data, in the same page... Using the load more button plugin, i hide the native pagination using
dom: 'lfrt'. So maybe is that what can be causing this problem?
I will take a deep look tomorrow moning in the server script and I can get touch by here again!! but half of the problem is already solved!!! thankss!! @rf1234, @kthorngren!!

kthorngren

Your load more button and server side processing seem to be competing to do the same thing. If you want to create a load more button then you will need to create a mechanism that the client can tel the server script how much is loaded and how much more to load.

For your reference the server side processing examples use this ssp.class.php. script..

Kevin

kthorngren

I suspect what you will need to do is not use ajax but just use jQuery ajax() to fetch the table data. Use rows.add() to add the row data. You can send the data to load information to the server using the data object.

Kevin

jas_jose

@kthorngren Hi! I've run some tests with the native pagination. Turns out that even without the button, the table didn't go well, using the serverSide: true, and using a https://localhost: with some parameters as a Url ajax... I think my hope just run out options...