How to use deferLoading if we don't know the total amount of entries in the database?

How to use deferLoading if we don't know the total amount of entries in the database?

ScryperScryper Posts: 2Questions: 1Answers: 0

Hi,

I am currently working on a project, where I display every virtual machines available on Azure. As there is a lot of data, I would like to use deferLoading from DataTable. The thing is, either I use deferLoading with integer value, or array value, in both cases, I don't know what is the total amount of entries in the database (the database is sometimes updated, and the total amount of entries subject to change).

So I am wondering how could I handle this ?

While waiting to find a solution using deferLoading, I am also trying to change de drawCallback option, to change the function called when clicking the "Next" or "Previous" buttons. So I would only load 25 new entries in the datable, which would replace the data already present in the datatable.

Another way to solve my problem is to use a static table, but I won't have all the possibilities that a DataTable can offer.

Here is the current JavaScript code :

$('#table').DataTable({
    pageLength: 25,
    /*
    processing: true,
    serverSide: true,
    deferLoading: [25, x],
    */
    drawCallback: function() {
        // .off() disables the regular action of #table_<name> button
        // so the program will only execute the function we want.
        $("#table_next").off().click(function(event) {
            showNextVMs();
        });
        $("#table_previous").off().click(function(event) {
            showPreviousVMs();
        });
    }
});

Do not hesitate to share any advice, I never used DataTables before, I may miss some good practices.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934
    edited March 2022 Answer ✓

    The only way I can think of to get the total rows from the server is with an ajax request. Then in the ajax success function initialize Datatables and use the value in the response. Pseudo code example:

        $.ajax({
          url: "/get_db_totals",
          success: function (data) {
    
              $('#table').DataTable({
                  deferLoading: data,
                  .....
              } );
    
          }
        });
    

    Kevin

  • ScryperScryper Posts: 2Questions: 1Answers: 0

    Hi,

    Thanks for your help !

    It works fine, I was able to get the correct amount of virtual machines. I just have a last question that's induced by that solution. I didn't manage to find the answer.

    So I have this code now, the thing is, how can access datatable methods in its declaration ? I need to send some information about the datatable when I call my controller method. Indeed, I have a reference error, because the datatables methods I call are not know at that moment.

    function initDataTable() {
        $.ajax({
            url: "/VirtualMachine/GetDataCount",
            success: function(maximum) {
                $('#table').DataTable({
                    pageLength: 25,
                    [...]
                    processing: true,
                    serverSide: true,
                    deferLoading: maximum,
                    ajax: {
                        url: "/VirtualMachine/GetSomeVirtualMachineFromRawString",
                        data: {
                            rawString: String(window.location.href),
                            pageNumber: table.page() + 1, // reference error
                            quantity: table.page.len() // will be the same for this one
                        }
                    }
                });
            }
        });
    }
    
  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934
                            pageNumber: table.page() + 1, // reference error
                            quantity: table.page.len() // will be the same for this one
    

    These are already sent via the Server Side Processing Protocol. You can calculate the page number by taking start / length. But if you need the specific pageNumber and quantity parameters populated you will need to use a function for ajax.data. See the last two examples in the ajax.data docs.

    Additionally you have not defined the table variable, ie, var table = $('#table').DataTable({.... variable scoping may become a problem so you might need to use $('#table').DataTable().page() instead.

    Kevin

Sign In or Register to comment.